Design de site personalizado: do Figma ao WordPress com Elementor Pro

1. Boas-vindas ao curso Design de sites personalizados: do Figma ao WordPress com o curso de Elementor Pro: Olá, pessoal. Quer aprender como transformar design do ItanInfigma em sites FixlPerfect WordPress totalmente funcionais Se você já sonhou em dominar todo o processo de web design desde o conceito inicial até o site ao vivo, você está no Essa classe é chamada de design de site personalizado, Figma WordPress com Elementor pro É o guia definitivo para criar um site profissional personalizado que realmente se destaque. Não vamos falar apenas sobre coisas. Estamos mergulhando profundamente no aprendizado prático. Você começará dominando o essencial do design de UI UX, entendendo o que torna o site fácil de usar e visualmente cativante Em seguida, usaremos o Figma para projetar interfaces Eine do Vou guiá-lo em tudo desde formas básicas e voltas automáticas até técnicas avançadas, como bibliotecas de componentes e sistema de design Em seguida, pegaremos esses designs e os transformaremos em sites reais usando o Worress e a abordagem de elementos Você aprenderá a criar layouts responsivos, personalizar cada detalhe e até mesmo otimizar seu site para desempenho e SEO Se eu contar um pouco sobre mim, sou Gian Akalanga e sou o fundador do UX Alchemy Então, minha paixão é compartilhar meu conhecimento e experiência com outras pessoas. É por isso que eu crio essa classe. Portanto, nesta aula, abordaremos tudo, desde reunir inspiração de design, aplicar design conceitual centrado no usuário, design de site amigável, usando Figma Em seguida, abordaremos a configuração de sua hospedagem e domínio para instalar o WordPress e o elemento Pro, até o lançamento em seu site ativo. Você aprenderá a criá-lo em seções de heróis, criar e a se envolver em páginas. Até mesmo um conjunto de recursos avançados, como pop-ups e análises. Se você é um iniciante completo ou um designer experiente que deseja expandir suas habilidades, esta aula foi projetada para levar você de 0 a 0 Você ganhará confiança e experiência para criar sites profissionais que impressionam os clientes e elevam seu perfil Ao final, você poderá criar um design de interface de usuário impressionante no Figma Crie um poderoso site WordPress personalizado com o elemento pro, domine o design responsivo e a otimização, implemente as melhores práticas e análises de SEO e, o mais importante, transforme sua visão de design em realidade Se você quiser aprender a usar sites personalizados focados, esta aula é para você. Te vejo dentro da sala de aula. 2. Por que modelos de sites genéricos não estão funcionando: Primeiro, vamos falar sobre por que usar o mesmo modelo de site antigo é uma má ideia. Você provavelmente já viu vários sites que parecem muito semelhantes. São como casas de corte de biscoitos, todas do mesmo formato, apenas de cores diferentes Esses sites genéricos são um grande problema para as empresas. Imagine um mercado lotado em que todos dizem a mesma coisa no mesmo pacote Como você se destaca? É isso que as empresas enfrentam com esses sites genéricos. Esses sites não contam história de uma empresa nem a tornam especial. Eles podem parecer bonitos, mas na verdade não funcionam bem para as pessoas que usam o site. Além disso, eles não ajudam as empresas a conseguir novos clientes. Um bom site é uma ferramenta poderosa para atrair pessoas. Faça com que comprem coisas. É mais do que apenas um folheto on-line sofisticado. É o rosto da empresa. Precisamos nos concentrar nas pessoas que usam o site. Eles estão procurando respostas e soluções Devemos criar um site que os ajude a encontrar rapidamente o que precisam. Sites personalizados são como ternos personalizados. Eles se encaixam perfeitamente. Podemos fazer com que tenham uma boa aparência, funcionem perfeitamente e ajudar as empresas a ganhar mais dinheiro. Lembre-se de que cada empresa é diferente. Seus sites devem usar o mesmo modelo de site antigo. Não vou mais cortar. Precisamos criar sites que sejam especiais e realmente funcionem para as pessoas. É isso que aprenderemos mais sobre a próxima lição. 3. O que é UI/UX e como podemos aplicá-lo ao design de sites: Vamos aprender sobre algo realmente importante em web design personalizado. UI e UX. Então, o que é UI? UI significa interface de usuário. É como o rosto do site U. É tudo o que um usuário vê e com o qual interage. Isso inclui botões, texto, imagens, cores e como eles são organizados. Uma boa interface de usuário é fácil de entender quando usada. Então, o que é UX? UX significa experiência do usuário. É sobre como um usuário se sente quando usa seu site. É sobre toda a jornada, desde encontrar seu site até concluir uma tarefa. Uma boa UX deixa os usuários entusiasmados e satisfeitos. UI e UX são como dois lados da mesma moeda. Você pode ter um site bonito, mas se for difícil de usar, as pessoas não gostarão dele. É uma interface de usuário boa e uma experiência de usuário ruim e você pode ter um site fácil de usar, mas se parecer feio, as pessoas não vão querer usá-lo É como uma boa experiência de usuário com uma interface ruim. Como usamos UI e UX quando criamos sites? A criação de um site de sucesso começa com uma compreensão profunda de seus usuários. Devemos identificar para quem fomos projetados, quais são suas necessidades e objetivos específicos. Ao simplificar o design e garantir que seja fácil de navegar, podemos criar uma experiência positiva para o usuário Testes regulares com usuários reais nos ajudam a identificar áreas de melhoria e refinar nosso design adequadamente Em última análise, nosso foco deve estar sempre em atender às necessidades e desejos do usuário e, ao mesmo tempo , criar um site que se aplique visualmente UI e UX são muito importantes para criar sites de sucesso. Ao entender e aplicar esses conceitos, você pode criar um site que as pessoas adorem usar. 4. O que é a ferramenta de design Figma: Antes de aprendermos sobre designs centrados no usuário e princípios avançados de UX, devemos começar com o básico Vamos mergulhar no design da interface do usuário do site enquanto aprendemos a experiência do usuário. Primeiro, precisamos nos familiarizar com a ferramenta de design, então usaremos o Figma FIGMA é uma ferramenta fantástica de design de interface que nos ajudará a criar a interface do usuário do site que gostamos de criar Começaremos com o básico do Figma, onde aprenderemos a navegar pela interface e criar designs simples À medida que avançamos, exploraremos os recursos mais avançados como criar protótipos interativos, colaborar com membros da equipe usar componentes para manter nosso design consistente No final, você terá uma sólida compreensão de como usar o Figma para criar, no design do site, do início ao fim 5. Prós e contras da Figma e alternativas: FIGMA é uma ferramenta de design de interface amplamente usada e vem com uma série de prós e contras que vale a pena considerar Uma das maiores vantagens do FIGMA é sua natureza colaborativa Por ser baseado na nuvem, vários membros da equipe podem trabalhar no mesmo projeto ao mesmo tempo. Isso é feito em tempo real, a colaboração é tranquila e eficiente. FIGMA também tem uma interface intuitiva que é fácil de entender para iniciantes , mas poderosa o suficiente para usuários avançados Seus componentes de design e estilos reutilizáveis ajudam a manter os projetos organizados e consistentes, economizando tempo a longo prazo Além disso, o FICMA pode ser acessado de qualquer dispositivo com conexão à Internet Portanto, você pode trabalhar em seu design onde quer que esteja , no entanto, o FIMA tem suas desvantagens Como ele depende de uma conexão consistente com a Internet, pode ser problemático se você estiver trabalhando em uma área com pouca conectividade Embora o FICMA ofereça um plano gratuito, alguns de seus recursos mais avançados estão bloqueados por meio de uma assinatura paga, que pode ser uma limitação para equipes semelhantes ou designers individuais Além disso, natureza baseada em nuvem do Figma é um ponto forte, mas também pode ser uma desvantagem se você preferir trabalhar ou voar ou precisar de mais controle sobre onde seus arquivos No entanto, o Adobe XD é uma alternativa ao FIGMA, oferecendo seu próprio conjunto de pontos fortes e Para o propósito dessas aulas, usaremos o FGMA para orientar nossa jornada de aprendizado Ao entender os prós e os contras, você pode tomar uma decisão informada sobre a ferramenta que melhor atende às suas necessidades. Agora vamos seguir em frente e começar a explorar o que a FICMA pode fazer por nós 6. Crie uma conta 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 continuar 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 vou adicionar meu nome clicar em Continuar. Então eu tenho que selecionar Que tipo de trabalho você faz? Aqui, selecionarei o design e clicarei em Continuar. Em seguida, diz: alguma dessas coisas descreve seu trabalho. Aqui, selecionarei a resposta gratuita 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, depois clicarei em Continuar e aqui, você já usou o produto IgM antes, adicionarei várias Se você não estiver familiarizado com o WIC MA, basta clicar em Não e clicar em Continuar Em seguida, selecionarei esse pacote inicial. Em aulas futuras, explicarei os benefícios da assinatura paga do Figma No entanto, podemos acompanhar todas essas lições com o pacote gratuito. Eu clico em Continuar e aqui, vou clicar em Eskepo 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, clico 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 7. O que é Figma UI3: Olá, pessoal. A Figma apresentou sua nova árvore de interface do usuário Vamos nos familiarizar com o Figma UI two e a árvore Figma UI. Então, como primeira etapa, vamos criar um novo design para fazer isso, clico nesse botão azul e clico em Arquivo de design. OK. Aqui está a prévia do editor UI two. Se você ver esse editor, talvez não tenha acesso à interface três porque a interface de usuário três é concedida apenas para pessoas que estão na lista de espera. Se você clicar neste botão de ajuda e recursos, poderá ver este link, aprender sobre a interface do usuário três mais os AIXs e, aqui, poderá ver mais detalhes No entanto, se você concedeu a UI três, a interface ficará assim. Primeiro vou ao Figma e vamos criar um novo arquivo. Acabei de clicar nesse novo design aqui. Eu ficarei assim e, na próxima lição, examinaremos os elementos no editor Figma com a interface do usuário dois Se você já tem essa visualização prévia e deseja mudar para a prévia antiga da UI Two, você pode clicar nesta ajuda e nos recursos e clicar aqui, voltar para a interface anterior. E você pode clicar aqui e clicar em usar Nova UI para mudar para a UI três. Nas próximas lições, você deverá concluir com a Figma UI two e, depois disso, mostrarei como obter a UI três, mesmo que você não esteja selecionado Portanto, se você não estiver familiarizado com FIGMA e tiver o UI Preview, precisará clicar aqui e clicar em voltar para a interface anterior e concluir as próximas lições 8. Passo a passo do Figma UI2: lição anterior, criamos nossa conta Figma e agora estou no da Figma para acessar o painel da Figma Você pode vincular figma.com e Aqui está o primeiro projeto que criamos em nossa última aula. Vamos nos familiarizar com ferramenta de design Figma e descobrir que tipo de itens ou que tipo de recursos podemos usar no Figma Para fazer isso, vou ao nosso primeiro projeto e clico duas vezes nele. Ok, agora estou no nosso projeto Figma. E nessa área, nós a chamamos de tela. Aqui está a área que usamos para criar nosso site e, nessa barra preta superior, podemos descobrir itens ou ferramentas que podemos usar. Aqui, temos molduras. Os quadros são as camadas usadas para criar nosso site. Como primeira etapa, basta criar uma moldura, clicar na moldura e clicar em nossa tela e veremos esse tipo de moldura. Aqui, podemos renomear nossa moldura para fazer isso, clicar nela ou clicar duas vezes no nome da moldura e renomear como minha primeira Então, na barra lateral esquerda, podemos ver muitas das nossas camadas. Atualmente, temos apenas uma moldura e, em nossa barra lateral direita, temos as propriedades dessa moldura. Por exemplo, se quisermos alterar o tamanho desse quadro, temos largura e altura, então vamos alterar a largura para 1.400 e pressionar Enter Então, vamos mudar a altura para 700. OK. Agora eu pressiono o comando e a roda do mouse para ampliar e diminuir o zoom do quadro. Então, aqui está o primeiro quadro. R, podemos criar quantas molduras nessa tela. Vou pressionar Cramand e rolar a roda para cima para minimizar nossa Então eu também clico nesse quadro. Depois de clicar na moldura, posso ver na nossa opção de moldura da barra lateral direita. Então, esses são quadros predefinidos. Como exemplo, neste caso, vamos criar um design de site para Desktop. Vamos clicar nesta área de trabalho e aqui temos tamanhos de moldura gratuitos, desculpe, tamanhos moldura pré-construídos para desktop Eu clico nesta área de trabalho. E aqui temos a moldura do tamanho do desktop, a largura será de 1.440 e a altura que podemos ajustar de acordo com a altura do site Vamos renomear isso como nosso segundo quadro e pressionar Enter. Agora, eu também clico no quadro e vamos ver se vamos criar uma versão de site móvel para fazer isso, eu clico no telefone e aqui, temos tamanhos de telefone. Vou selecionar o iPhone 40 e 50 pro e aqui está o tamanho da moldura do iPhone. Vamos pressionar Command ou Control no Windows e rolar para cima até Zumi um pouco assim Aqui está a maneira de criar molduras. Além disso, quando clicarmos na moldura na barra lateral direita, teremos as opções que podemos usar na moldura. Por exemplo, se quisermos alterar a cor do campo, podemos clicar nessa cor do campo e alterá-la conforme quisermos. Ok, pressionarei Control set para comando set para desfazer a alteração OK. Agora você conhece Earl e então temos a ferramenta de formas Nesta ferramenta de forma, temos diferentes tipos de forma, clique na ferramenta de forma ou clique neste pequeno ícone de baixo e clique em Red wrangle Então, se chegarmos a esse quadro e clicarmos nele, criaremos esse tipo de formato retangular Em nossa opção de Layout ou funil de camadas, podemos ver a moldura e, dentro da moldura, temos a forma retangular Por enquanto, vou remover essa primeira moldura e moldura móvel e ficará mais fácil de entender, agora clico nesse retângulo e aqui, podemos mudar a cor do campo Vamos mudar isso assim. Vamos fazer com que seja de cor verde. OK. Agora eu posso mudar o tamanho que eu quiser. Vamos fazer 150 por 150. Basta clicar no W e pressionar 150. Em seguida, clique na tampa para acessar os valores de altura. Vamos fazer com que seja 160. OK. Agora, se formos para as formas, também podemos criar linhas como essa. Se quisermos criar, vamos criar uma linha como essa. Se quisermos criar uma linha exatamente horizontal, basta descansar no deslocamento e sua rotação ou ângulo será zero. E aqui, podemos mudar o ângulo assim também. OK. Agora, no Etroke, podemos alterar a cor do traçado E e aumentar o traçado Esta é uma ferramenta de design e podemos fazer qualquer tipo de design com essa ferramenta e criar um design de site incrível. Além disso, temos elipse de setas, podemos criar essas elipses Vamos mudar a cor de preenchimento para mudar essa cor verde. Ok, destaque 1 deles, e então podemos mudar o alinhamento. Nesse caso, se clicarmos em Alinhar centro vertical, l serão centros alinhados Além disso, se clicarmos nesse pequeno ícone de seta e clicarmos em distribuir horizontalmente o ritmo por enquanto, não aconteceu nada, mas vamos fazer esse círculo aqui Em seguida, vamos pressionar a distribuição horizontal do ritmo. Vá lá, não funciona. Por enquanto, vamos remover essa linha e pressionar Alt e clicar com o botão direito do mouse e arrastar assim para duplicar esse retângulo, depois clicar em MTol, clicar na ferramenta M e destacar Em seguida, clique em distribuir espaçamento horizontal I e Earl ficará igualmente alinhado Então podemos criar ou podemos criar imagens. Para adicionar imagens, podemos clicar nessas ferramentas de forma de ícone e clicar na imagem deste local, depois irei para a pasta definida, depois clicar em abrir e seguida, podemos clicar em nossa moldura assim, então podemos alterar o tamanho dessa moldura. Para alterá-la sem danificar a imagem, se apenas a alterarmos, isso danificará o tamanho ou não será exibido corretamente Para evitar isso, podemos pressionar a tecla Shift e ajustá-la assim. Ok, agora temos a ferramenta Caneta, a ferramenta Caneta e Lápis. Usando a ferramenta de caneta, podemos criar formas como essa e clicar em Concluído. Então temos T ou texto, clique no texto e clique assim. Vamos fazer o texto como Olá, então olá mundo. Em seguida, clico no quadro e clico no texto. Então, temos as propriedades desse texto. Aqui, temos fontes do Google. Vamos fazer a fonte com quatro pinos. A família da fonte terá quatro pinos e o tamanho será semi-negrito e eu também aumentarei o tamanho da fonte Vamos lubrificar como 60 apresentadores. Aqui está a fonte e na cor do campo, podemos alterar a cor da fonte também há muitas propriedades com as quais jogar. Basta brincar com isso por enquanto, vamos adicionar o efeito a este texto para fazer com que eu clique no efeito e clique na sombra projetada, e aqui, vamos fazer 20 X como zero e Y como zero. Então, vamos aumentar a opacidade para 80% e, se quisermos, podemos mudar a cor de fundo dessa forma Há muitas propriedades com as quais jogar. Essa é a maneira de criar texto. Além disso, temos a biblioteca de plug-ins e componentes Figma e, em aulas futuras, aprenderemos todos eles. Além disso, quando selecionamos os itens, selecionamos os elementos, teremos esse tipo de propriedade para criar componentes e selecionar camadas da máquina e coisas assim. Em aulas futuras, aprenderemos tudo sobre isso por enquanto, removerei essa arte a lápis e vamos remover essa, e vamos aumentar o tamanho da imagem para o tamanho total desta forma. Também temos dois retângulos. Selecione e pressione Shift e selecione o segundo retângulo Dessa forma, podemos selecionar esses dois retângulos e pressionar delete para removê-los. OK. Agora aqui, podemos compartilhar esse quadro ou compartilhar esse quadro ou compartilhar todo esse projeto com os membros da nossa equipe, clicar neste link de cópia e qualquer pessoa pode acessar este projeto Figma com esse link Então, poderemos verificar o real clicando neste botão atual. Vamos clicar nele e aqui está nosso site. O aqui está nossa moldura que terá a visão real. Além disso, há muitos recursos. Por exemplo, se selecionarmos a moldura ou selecionarmos a imagem no lado direito, temos a seção de protótipo Esta seção de protótipo ou guia de protótipo é para fazer interação com nosso site Por exemplo, se clicarmos em um botão, nosso site ou nossa página da web redirecionará para uma página diferente aquela interação que podemos fazer com a guia protótipo e, no lado esquerdo, teremos a guia Assert na guia Assert Podemos obter os designs pré-construídos. Podemos criar nosso próprio design ou nossos próprios elementos de design e usá-los por meio do AssiStab Também podemos criar mais páginas. A página atual é a página um, vamos torná-la como a página inicial e, se clicarmos nesse ícone de adição, podemos criar uma nova página como esta. Esses são os princípios básicos e temos mais ferramentas para explorar, mais recursos para explorar Vamos fazer isso enquanto tentamos aprender como criar a interface do usuário para nosso site. 9. Aprenda a criar layout de grade Figma: Olá, pessoal. O alinhamento é crucial no design de UX porque cria um senso de ordem e equilíbrio na página Quando os elementos estão alinhados corretamente, eles orientam os usuários sem problemas pelo conteúdo, facilitando a leitura do que a compreensão Um bom alinhamento ajuda os usuários a se concentrarem na parte importante do design e ajuda a reduzir a confusão que leva a uma melhor experiência geral do usuário Também faz com que o site pareça mais profissional e sofisticado, o que gera confiança no público Sinta-se à vontade para analisar cuidadosamente os próximos designs. Todos esses designs têm alinhamento correto e alinhamento projetado incorretamente Basta verificar a diferença entre essas duas versões. Quando criamos designs personalizados, alinhar objetos é um pouco confuso e complicado Mas no Figma, temos uma grade de layout. Então, vamos ver como podemos usar a grade de layout para alinhar nosso design Estou no painel do Figma, depois clico no meu primeiro projeto Não precisamos mais desse meu segundo quadro ou de qualquer quadro. Eu apenas limpo a tela e clico na moldura. Vamos criar um quadro de versão para desktop. Clique na moldura aqui, clique na área de trabalho e depois vamos criar a moldura da versão para tablet. Clique na moldura, expanda o tablet e selecionarei o tamanho do tablet como iPad Pro de 11 polegadas. OK. Agora teremos que criar uma versão móvel. Clique no telefone e vamos selecionar o iPhone 14 e 15 pro. Tudo bem. Agora, aqui temos três pranes Vamos primeiro adicionar uma grade de layout a essa versão para desktop. Quando clico na moldura da versão desktop, no meu lado direito, consigo ver as propriedades dessa moldura. Aqui, temos a grade de layout. Então, basta clicar nesse ícone de adição. Quando eu clico nesse ícone de adição, vamos aumentar o tamanho do design dessa forma. OK. OK. Quando eu aplico ou adiciono uma grade de layout a esse quadro, ele ficará assim. Agora eu clico na grade de layout que adicionamos para obter a configuração da grade de layout. Atualmente, nosso tipo de grade é grade, mas precisamos do tipo de coluna, grade de layout porque alinhamos nossos elementos da esquerda para a direita Quando o alinhamos horizontalmente dessa forma, temos que obter o alinhamento correto no lado esquerdo e direito, alinhamento entre os alinhamento Aqui, temos que adicionar a contagem de colunas. Vou adicionar a contagem de colunas como pedágio. Agora temos a coluna da grade de pedágio e vou manter a mesma cor Em seguida, o tipo será esticado e, aqui, temos que adicionar uma margem entre a esquerda e a direita. Margem significa espaço entre o lado esquerdo do nosso elemento. Por exemplo, se disséssemos marginus 140, essa grade se ajustará fornecendo uma margem ou um espaço da esquerda para primeiro elemento e da direita para o último elemento Então, espero que você entenda. Então, agora, ao adicionar objetos, podemos adicioná-los corretamente marcando esta coluna. Em seguida, teremos que adicionar calha. Na versão desktop, vamos adicionar medianiz como 20. Se mudarmos essa sarjeta para dez, o espaço será pequeno Na verdade, vamos adicioná-lo como 15, assim. Agora, quando adicionamos elementos como esse, vamos adicionar o retângulo e duplicá-lo pressionando o comando no Mac. Assim, quando colocamos esses elementos, quando colocamos esses elementos, podemos simplesmente aumentar o tamanho do quadro e verificar o alinhamento Podemos alinhá-lo perfeitamente assim. Além disso, quando eu destaco ou quando seleciono um objeto ou elemento, pressiono e pressiono sobre outro elemento. Podemos verificar o espaço I entre esses dois elementos. Atualmente 815 e vamos adicionar esses dois assim. Perfeito. Esse é o benefício de usar o layout da grade. E se quisermos verificar o design sem o layout da grade, podemos clicar na moldura e clicar neste ícone I e a grade será ativada. OK. Agora vamos adicionar grade a esta versão para tablet. Para fazer isso, clique na moldura do tamanho do tablet e clique em GritaYoutPlus, posso então alterar Então, no tablet, usarei sete como contagem de colunas. Então, a margem será de 60. Então Gutter terá dez anos. Na verdade, vamos adicionar a contagem de colunas: seis é melhor. Assim como na área de trabalho, podemos usar essa grade para verificar o alinhamento dessa forma Essa é a torta de bene. OK. Agora vamos ao telefone por telefone. Vamos clicar na grade de layout e clicar aqui, depois alterar o tipo de grade para coluna e, aqui, adicionarei a sincronização das contagens da grade, depois a calha será dez e a margem será 20 Na verdade, vamos adicionar uma margem de 12 assim. Agora podemos adicionar um retrângulo dessa forma de acordo com essa grade. Essa é a vantagem de ter um layout de grade. No próximo vídeo, falaremos sobre a comunidade Figma. 10. O que é a comunidade Figma: Olá, pessoal. Você sabia que o Figma tem uma comunidade online A comunidade on-line Figma é um recurso poderoso que pode ajudar você a aprender, crescer e se conectar com outros designers É como um grande mercado on-line. Na comunidade Figma, designers podem compartilhar suas ideias e recursos É um lugar onde você pode encontrar arquivos de design, plug-ins e até tutoriais gratuitos e falsos plug-ins e até tutoriais gratuitos e Nas aulas futuras, falaremos especificamente sobre os arquivos Figma E nesta lição, vamos nos aprofundar na comunidade Figma e descobrir que tipo de materiais de design podemos encontrar Para fazer isso, eu vou para a Comunidade Figma. Eu vou ao Google e pesquiso Figma Community e, no primeiro resultado, temos o URL do site da comunidade Figma slash, depois clico nele e agora estou na Há muitas coisas para explorar nesta comunidade Figma Os designers do Figma, como você adicionam recursos à comunidade FIGMA diariamente Então, por enquanto, vamos pesquisar alguns designs da web. Então, vou apenas pesquisar apresentador de ideias de web design. Aqui temos ideias de web design Então, aqui, tenha arquivo e modelo, plug-ins, widgets e criadores Para esse resultado, temos arquivos, modelos e plug-ins. Então, vamos separar arquivos e modelos, e aqui temos uma ideia, web design, madeira. Então, vamos verificar isso. E aqui temos arquivos de tema de comércio eletrônico. Vou abrir isso também, e aqui temos uma interface de usuário, então é uma boa interface de usuário. Então, basta clicar nele e vamos ver o que podemos encontrar aqui. Nós temos a descrição. Como temos o design. Vamos aumentá-lo e, clicando aqui, podemos mudar a página. Vamos mudar para projetá-lo, e aqui temos o design. Aqui está o design do site da Nike. Eu acho que é um design inspirador, então é um design limpo. Então, ao verificar esses itens, podemos criar ideias e vamos para o web design da Idea. Aqui temos um design web simples e é apenas uma imagem com texto e vamos para a próxima. Aqui temos um modelo de comércio eletrônico ou tema de comércio eletrônico. Vamos verificar esse aplicativo da web. Aqui temos design para site de comércio eletrônico. Pense que você está criando uma marca de comércio eletrônico ou um site de comércio eletrônico, basta verificar esses designs, obter inspiração de design ou obter parte do design deste arquivo Figma Para fazer isso, basta clicar em Abrir no Figma e, em seguida, esse arquivo será aberto no painel do Figma e, nas páginas, vamos para webvlpa, aqui temos Então, por enquanto, vamos verificar apenas esses itens e, no final desta seção Figma, você poderá criar esse tipo de design Figma, Figma Vamos verificar o alfa móvel e aqui temos a versão móvel. Não se preocupe se você acha que não sabe como criar esses designs. Em algumas aulas, você poderá e aprenderá como criar esse tipo de design. Agora, quando criamos designs ou quando criamos nosso site, precisamos de ícones, precisamos usar ícones. Se pesquisarmos ícones do Figma e clicarmos em PrsiconoPres Enter, poderemos Por exemplo, temos um conjunto de ícones meteorológicos e vamos pesquisar como um ícone comercial. Aqui temos ícones de linha de negócios. Vou apenas clicar em e este é um arquivo de design, e aqui está o conjunto de ícones de negócios. Então, podemos simplesmente verificar esses ícones e, se quisermos, vamos verificar todos os ícones vetoriais. Ok, aqui está a biblioteca de ícones e, se você quiser adicionar esse tipo de ícone e, se você quiser aos seus projetos, pode abri-la no Figma e obter esses ícones Mas, no futuro, mostrarei como fazer isso. Além disso, tenho um perfil da comunidade Figma. Deixe-me compartilhar com Ok, aqui está o meu perfil da comunidade Figma Vamos verificar esse BNTSGameMP e este é um modelo de interface de usuário de aplicativo que eu Vamos tentar abri-lo e ver quão poderoso é o Figma Eu clico na abertura do Figma. Na verdade, esse UIKit é muito básico e quando eu criei esse UiK eu não sabia muito sobre Então, na próxima lição, usaremos a comunidade Figma e outras coisas que aprendemos até agora, criaremos seções de heróis e entraremos no design da interface do Figma 11. Crie a 1ª seção de herói com Figma UI2: Vamos tentar criar nosso primeiro web design. Portanto, verifique o URL ou arquivo da comunidade na descrição ou na seção de recursos, você verá o URL. Ao clicar em conectar, você acessará este perfil da comunidade Figma Então, vamos criar essas duas seções de heróis. Então, isso nos ajudará a entender mais sobre a ferramenta Figma e as coisas básicas enquanto criamos essas duas sidras ou aquelas seções de dois heróis Já aprendemos sobre a comunidade Figma. Agora, basta clicar no botão Abrir no Figma para abrir a visualização editável OK. Aqui temos seções de heróis. Primeiro, vamos tentar criar essa. Vou diminuir o zoom e vamos colocar assim e ampliar. Ok, bom, primeiro de tudo, temos que criar esse quadro. Se eu clicar nesta amostra de herói, aqui está a moldura, vamos tentar criá-la. Eu vou até esse ícone de quadro e , em seguida, podemos selecionar o tipo de dispositivo. Esta é uma seção de heróis do tipo desktop. Eu clico em destop e seleciono o tamanho como mesa, tudo bem, bom Agora vou renomear isso para 01. OK. Agora, a altura é 1024. Vamos ver a altura desta. São 700. Vamos mudar essa altura para 700. Ardósia a moldura e defina o tamanho para 700, então temos que adicionar a largura do layout porque, sem a largura do layout, não podemos alinhar nosso design corretamente Então, para fazer isso, clico na grade de layout e clico aqui, depois altero a grade de layout para colunas, e a contagem de colunas será de dois L e a margem será de 140. A sarjeta é 20. OK. Além disso, o FICMA tem um recurso para salvar nosso Istis. Como exemplo, queremos salvar esse layout de grade de colunas Podemos clicar neste ícone Estes e aqui temos o ícone de adição. Basta clicar nele e aqui, podemos adicionar o nome. Vou adicionar à grade de chamadas e depois clicar em estilo criativo. Agora, se quisermos adicionar o layout da grade da coluna de pedágio ao nosso próximo quadro, podemos simplesmente selecionar o salvamento desta vez Vamos clicar nesse layout de grade e criar um novo layout de tamanho de mesa. Assim, é uma moldura, mesa do tamanho de uma moldura, então se eu for até o layout git e clicar neste ícone, terei esse estilo de layout granulado como este, posso adicioná-lo facilmente Tudo bem. Agora vou removê-lo. Na próxima etapa, temos que adicionar essa imagem de fundo para adicioná-la primeiro Vou criar um retângulo e vamos fazer esse retângulo igual ao tamanho do nosso quadro, assim Agora clique nessa ferramenta de retângulo ou forma, e aqui temos a opção Inserir imagem Eu apenas clico nele e agora vamos para a nossa imagem. Então, está no documento. Aqui está a imagem. Basta clicar nele e você pode obter esse arquivo de recurso de imagem na seção de recursos e eu clico em Abrir. Agora eu clico assim. Ok, a primeira parte está concluída. Agora temos que sobrepor a cor para adicionar a cor de sobreposição, selecionar esta imagem e aqui, temos o preenchimento, basta clicar neste ícone de adição e agora temos uma camada de cor Aqui, clico na nossa cor como escura e aqui temos a transparência. Vou fazer com que a transparência seja igual a 80. Ok, parece bom, mas podemos fazer com que 70 70 seja melhor. Agora a imagem foi adicionada, e agora temos que adicionar esse logotipo e a seção Mus para fazer isso, primeiro, vamos criar um texto. Clique neste texto e clique aqui. Em seguida, mudarei esse texto como logotipo. Vamos descobrir a propriedade, como tamanho da fonte e coisas como as desse logotipo. Para fazer isso no Mac, pressiono o comando e clico no texto desse logotipo quando clico em Comando Isso nos ajuda diretamente a selecionar o item que queremos. No Windows, deve ser controle. OK. Agora, no nosso lado esquerdo, temos os detalhes. A fonte é ferroviária, a espessura da fonte é semivol e o tamanho da fonte é 35 Então, vamos adicionar esses detalhes. Eu clico em nossa fonte e altero essa fonte para trilho e a largura da fonte será semibol e o tamanho da fonte será 35 Agradável. Vou aumentar esse pouco o design, então isso nos ajudará a verificar facilmente o design dessa forma. Agora eu movo esse texto aqui. Em seguida, vamos ao nosso design original e selecionamos o texto pressionando o comando ou, no Windows, ele deve ser controlado. Então eu pressiono Alt e verifico o tamanho entre a barra superior e o lado esquerdo. Os tamanhos não estão corretos, mas em nosso design original, vamos fazer com que o tamanho seja 14020 Ok, parece bom. Agora, o que precisamos criar é esse menu para fazer isso, novamente, clicar neste texto ou podemos simplesmente duplicá-lo pressionando tudo Pressione tudo e clique com o mouse e arraste-o assim. OK. Agora teremos que encontrar os detalhes do texto. Vamos clicar nesse texto e a cor do texto é branca e a fonte do texto é semibol aberto 18 e a altura da linha é 31 Vamos adicionar essas informações. Basta clicar em nosso texto e o texto abrirá 18 semibold e a altura da linha será 31 31 Tudo bem. Agora, vamos mudar esse texto para casa e o texto está em maiúscula para fazer esse gás superior, eu clico aqui e mudo de maiúscula para maiúscula assim. Tudo bem. Veja que você aprende muito sobre a ferramenta Figma ao criar esse design Agora eu pressiono e dupliquei assim e vamos duplicar por mais uma, duas, três, quatro, cinco, três vezes mais 12, três. Tudo bem. Agora vamos mudar essas tomadas. Em seguida, fala sobre nós. OK. A próxima é como funciona assim. Então, o próximo são nossos treinadores. OK. Agora, o próximo é o contato. Tudo bem. Agora, o que temos que fazer é colocar esse contato no canto direito. Aqui está o layout da nossa grade e agora temos que encontrar o local onde esse ícone do menu inicial deve ficar. De acordo com isso, está aqui e vamos adicioná-lo aqui. Para fazer isso, basta arrastar e colocar assim e vamos colocar todo esse menu assim. Agora, antes de fixarmos os alinhamentos, clicarei nesta casa e mudarei sua cor para essa cor vermelha Então, vamos descobrir o código da cor vermelha. Basta clicar nesta página inicial e aqui temos o código de cor vermelho. Eu apenas tento copiar pressionando Command C, e vamos aqui, destacar essas tomadas, B pressionando Command A para destacá-la e vá para a cor do campo e pressione Command V para a cor vermelha desta forma. OK. Agora é hora de corrigir o alinhamento. Esse texto está no meio dessa barra. Vamos colocar essa casa no meio de um bar como esse. Agora vou pressionar Shift e selecionar cinco itens de menu como este. Então, aqui, temos ferramentas de alinhamento, clique em alinhar o centro vertical e, aqui, podemos clicar em podemos clicar em distribuir fases I horizontais. Tudo bem. Agora vamos espaçar ou preencher J entre a parte superior e o item do menu, que devem ser seus dois t. Novamente, que devem ser seus dois t. Novamente, destaque aqueles que destacam o OSelTel desses textos pressionando at e agora eu pressiono Alt e clico na tecla superior do teclado desta OK. Agora, o que eu posso fazer é fazer isso como um grupo Para fazer isso como um grupo, eu pressiono o comando G, e agora ele se torna um grupo. Se quisermos, podemos renomear esse grupo como man Items. E se expandirmos o grupo, teremos itens de menu como este, e então eu selecionarei esse grupo e pressionarei Shift e clicarei no logotipo, e então clicarei nesse centro vertical de alinhamento como este E agora criamos nosso menu e logotipo. Agora é hora de criar esse texto intermediário. É muito simples, vamos começar passo a passo. Primeiro, temos que adicionar esse treinamento ao vivo para grandes empreendedores Para adicioná-lo, eu pressiono este T e clico aqui. Em seguida, adicionarei um texto como esse e clicarei em qualquer lugar da tela, porque se não adicionarmos nenhum texto e clicarmos em qualquer lugar da tela, o campo de texto desaparecerá . Ok, agora vou ao nosso design original e clico no Comando C dois. Então eu clico neste texto e agora pressiono Comando, A e comando C dois, copio esse texto e venho aqui, pressiono Comando, A e Comando C dois, copio esse texto assim. Então, novamente, vou duplicar isso porque antes de criarmos o design, vamos criar um texto que será fácil Então, para duplicar, eu pressiono tudo e duplo assim, assim OK. Agora temos três seções. R, vamos duplicar isso novamente para o texto do botão Agora temos esse item principal, então eu apenas o destaco e passo o ritmo texto, desculpe, vamos fazê-lo sem fontes sem estilo de fonte, porque tentaremos adicionar tecido de fonte à nossa maneira, desta forma OK. Agradável. Agora, vamos adicionar o fontistyle e corrigir o Primeiro, vamos verificar o estilo da fonte do nosso primeiro parágrafo ou subtítulo, clicar na legenda e teremos o texto como se abre e texto como Agora clique aqui, abre o símbolo. Eu já estou lá. E agora vamos dar uma olhada no design desse título Selecione o título Eu pressiono o comando e clico assim, então é Railway Bolt, 60. Vamos deixar essa ferrovia em negrito, 69 e a fonte diferencia maiúsculas de minúsculas, assim. OK. Agora é hora de criar esse design de fonte, pressionar o comando e clicar no texto, depois verificar o texto open sans regular 20, clicar aqui e abrir sem regular 20, então o caso é, novamente, temos títulos enviados Tudo bem. Antes de criarmos o botão, vamos corrigir o alinhamento e melhorar isso para corrigir o alinhamento Vamos verificar o alinhamento entre esses dois itens, é 15 e temos o toque de alinhamento 15 Vamos colocar assim, depois pressionar e acima, agora podemos configurá-lo assim. Como temos problemas porque a linha é espaço, não linha é espaço, a altura da linha deve ser maior que 31. A altura da linha é automática. Vamos tornar a altura da linha automática. Basta clicar no texto e clicar no campo de texto da altura da linha em Apresentação automática. OK. Agora é 15 e isso assim também é 15 e sim, parece bom E agora eu pressiono Shift e seleciono todos os três itens e clico neste centro de alinhamento horizontal e neste alinhamento de texto definido como OK. Agora está perfeitamente centralizado e agora temos que definir esse texto como alinhado no lado direito e esquerdo Na verdade, ele já está alinhado, e então temos que colocar isso no centro para fazer isso Podemos simplesmente ajustá-lo assim com este guia de alinhamento de cor vermelha, podemos colocá-lo no meio assim. OK. Acho que isso não está no Ah, será no meio depois de criarmos esse botão de consulta gratuita de solicitação para criá-lo, basta clicar em Novo retângulo e clicar assim Então, vamos aumentar o tamanho do retângulo dessa forma e colocar esse texto dentro do retângulo Ok, agora, nosso texto está atrás e o retângulo está acima. Então, para corrigi-lo antes de consertá-lo, vamos mudar a cor do retângulo Para alterar a cor do retângulo, podemos clicar no retângulo e aqui temos a cor do campo Em seguida, podemos clicar neste pequeno ícone e clicar nessa cor original do design e obter a cor assim. Tudo bem. Agora vou verificar nosso painel lateral esquerdo e aqui temos detalhes do nosso design. Aqui, temos esse retângulo. Vamos renomeá-lo como botão BG e agora aqui está o texto. Atualmente, o texto não está sendo exibido para ser exibido, basta clicar nele e exibi-lo assim. OK. Agora temos que verificar os tamanhos entre o retângulo ou o fundo do botão e o texto Então, antes de fazermos isso, vamos descobrir o tamanho do retângulo São 418 e 60. Vamos fazer isso como 420 e 60. OK. Agora vou aumentar esse design porque ele será facilmente exibido se eu aumentar o design dessa forma, então pressionarei e ajustarei o design dessa forma. E se quisermos, podemos clicar nesse alinhamento no meio desse texto e ele se alinhará No entanto, agora está perfeitamente alinhado e agora vou selecionar o plano de fundo, pressionar Shift selecionar esse texto e pressionar Command G para agrupá-lo Então, se eu quiser, posso renomear isso como botão Tudo bem. Agora, o que eu posso fazer é trazer esse botão desta forma e vamos verificar o espaço entre o botão e esse submenu, é t. Agora destaque esse grupo de botões e pressione e sobre este subtítulo e clique na seta para baixo para tornar o espaço entre esse botão e o entre esse botão OK. Agora eu destaco Earl dessa seção, o botão e Earl desses itens e clico neste centro de alinhamento e clico neste centro horizontal alinhamento Ok, agora está perfeitamente alinhado, e agora o que posso fazer é pressionar o Comando G para agrupá-lo e agora, se eu mudar esse design dessa forma, mudar esse grupo assim, posso encontrar o ponto central perfeito e vamos lá Nós temos o design. Agora, vamos aumentar o design. É bem parecido. Talvez se aumentarmos um pouco mais a cor escura dessa imagem, ela tenha a mesma aparência desse design, mas eu gosto dessa maneira. Vamos essa seção de heróis. E agora aqui, clique neste ícone para remover esse layout de grade e ele ficará assim. Em seguida, clicarei nesta seção de heróis e clicarei neste botão atual e poderemos ver nosso design neste modo de visualização. Agora, criamos nosso próprio design. Portanto, é um lindo controle deslizante, e espero que você siga as etapas iniciais comigo. Se tiver alguma dúvida ou problema, me avise e agora é hora de criar nosso segundo design Isso é um pouco complicado, mas podemos fazer. 12. Crie a 2ª seção de herói com Figma UI2: Olá, pessoal. Agora é hora de criar nossa segunda seção de heróis. Vamos começar. Agora estou no painel do Figma e aqui está nossa segunda seção de heróis Como primeira etapa, clicarei na moldura e, no lado direito, posso selecionar o tamanho do DextFrame Vou selecionar esse resto de 1.440 com moldura e aqui, vou colocá-lo assim e então posso renomeá-lo para herói dois assim, então o que posso fazer é adicionar Desculpe, adicione o layout da grade. Para fazer isso, clico nesta guia It e aqui está nosso layout para chamar de layout de grade Eu só clico nele. Agradável. Agora, vamos ver, vamos ver o que temos que fazer. Primeiro, temos que criar uma seção de menu. Na verdade, antes de criarmos a seção do menu, vamos adicionar a imagem de fundo. Então, primeiro, eu tenho que obter o tamanho desse fundo. Portanto, sua largura é de 1.440 pés e a altura é 700. Então, vamos criar um retângulo. Clique no retângulo, clique na tela, clique na moldura e vamos trazê-la para esse lado assim Ok, agora eu tenho que adicionar a largura 1.440 e a altura será 700 Agradável. Agora, o que precisamos fazer é adicionar essa imagem de fundo. Então eu já criei essa imagem de fundo. Você pode encontrá-lo na seção de recursos e, depois de baixá-lo, precisamos clicar aqui e clicar em Colocar imagem. E aqui temos a imagem de fundo. Eu apenas clico nele e clico em Abrir. Então você verá a imagem anexada com o ponteiro do meu mouse Eu apenas toco nisso ou clico em um retângulo como este, tudo bem, parece bom Então, agora o que temos que fazer é descobrir a cor desse fundo e a opacidade Para fazer isso, clico nessa imagem ou toco duas vezes nela e, aqui, temos a imagem. Então, basta selecionar a imagem e aqui, podemos ver a cor branca preenchida com 90% de opacidade ou a visibilidade da transparência é de 90%, clique na imagem e clique neste ícone de adição, e aqui temos o Então, vamos mudar para 90 e depois clicar aqui e colocar assim. OK. Agradável. Agora, basta criar nosso plano de fundo facilmente. Então o que temos que fazer é neste texto, primeiro, vou tocar duas vezes nesse texto e pressionar Command C para copiá-lo. E no seu caso, pode ser o Controle C. Se você estiver usando o Windows, clico neste texto e clico aqui. Em seguida, pressiono Command V ou Control V no seu caso. Assim, o que posso fazer é descobrir o tipo e o tamanho da fonte. Portanto, a fonte é Georgia regular e 45. Não se preocupe se você não conhece a fonte ou sabe muito mais sobre a fonte. Em aulas futuras, mostrarei tudo o que você precisa saber sobre fontin, UX e UI Clique aqui e parece que já selecionamos essa fonte. Vamos ver novamente. Sim, é Georgia normal 45. E aqui Georgia regular 45. OK. Então o que temos que fazer é colocá-lo nesse canto assim. Em seguida, pressione e você verá as linhas. Vamos fazer com que seja como 20. Em seguida, temos que criar essa seção de menu. Então é Helvetica. Sua fonte é Helvetica e normal 16. Então, vamos criá-lo. É fácil, clique no texto e vamos renomear esse nome de texto para home Em seguida, clique no texto e selecione a fonte vertical, aqui você verá que o tamanho é regular e o tamanho da fonte será na verdade, a largura da fonte é regular e o tamanho da fonte será 16. OK. Então, o que temos que fazer é colocá-lo assim por enquanto e vamos duplicá-lo Pressione antigo e clique no mouse, depois duplique-o. Isso ou, quantas vezes queremos duplicá-lo? Um, dois, três, quatro, cinco. São cinco vezes, então uma, duas, três, quatro, cinco, ótimo. Agora vou mudar a fonte. Posso tocar duas vezes aqui e pressionar Control C para copiar e Control V para colar. E vamos fazer isso de novo. Clique assim. OK. Agora, novamente, temos a localização, cole assim. Na verdade, quando colamos, ele já tem o design também, então vou digitar. Aqui temos blob e, em seguida, con tag ni. OK. Agora, o que podemos fazer é verificar o tamanho intermediário. Para conferir, basta clicar aqui e pressionar tudo assim. O tamanho do Ibtwin é 25. Então, vamos ajustar isso. Primeiro, vou selecionar todos eles assim. Em seguida, clique aqui e clique em amarrado e clique assim. OK. Então eu também clico aqui e aqui, podemos definir o site vinculado como 25 assim. O ritmo intermediário é 25. Agora temos que colocá-los em maiúsculas. Como eu fiz antes, clique aqui e, caso possamos clicar em maiúsculas. Agora, o que temos que fazer é, novamente, selecionar todos eles e clicar aqui e clicar em Empatado e, em seguida, torná-los 25 assim. OK. Agora, se verificarmos isso, a casa está em negrito. Então, vamos encontrá-lo aqui. É com essa ousadia. Vamos fazer isso com esse negrito, clicar assim e alterar o negrito do regulador OK. Agora, o que posso fazer é selecionar tudo isso clicando no item do menu ou clicando no texto e no texto, clicando no texto enquanto pressiona Shift desta forma. Então eu pressiono Command G ou Control G. Agrupe. Ok, então isole as duas seções e faça com que fiquem assim OK. Vamos nos concentrar em criar esses contatos, mas é muito simples. Vamos fazer isso. Clique na forma do retângulo e crie um retângulo como esse. OK. Então vamos adicionar esse canto ou reduzir os cantos como 30. Agradável. Agora eu posso simplesmente clicar aqui e duplicar o texto pressionando assim, depois coloco assim, mas temos que fazer isso acima desse retângulo para chute alto nos contatos que um contato recebe no painel da camada do lado esquerdo colocá-lo assim OK. Agora, vamos verificar o que podemos fazer. Aqui temos o tamanho de 176 e a altura de 50. Além disso, a cor é preta. Vamos fazer essas mudanças. Primeiro, a altura será 50 e a cor será preta. A cor do texto é o motivo. Em seguida, selecione esses dois objetos e coloque o texto no centro desta forma. Vamos ver se o que fizemos parece bom. Então temos que mudar o texto. Na verdade, já está como o ponto de contato, já temos o texto do ponto de contato aqui. Na verdade, não precisamos entrar em contato conosco com os ícones para entrar em contato com os itens do menu. Então, na seção original do herói, vou mudar esse contato para sobre nós. Sobre Tsk. Faça não, faça isso. Agora, vamos fazer o mesmo aqui. Vamos mudar esse contato sobre nós. OK. Agora parece bom. Agora, o que precisamos fazer é agrupar esse botão na página do grupo, clicar no texto e clicar no plano de fundo pressionando Shift. Em seguida, pressione Commando Control G, comando G no Mac e Control G no Windows. Mmm mm. Agradável. Agora, o que podemos fazer é selecionar todas essas tomadas por turno atual e selecionar os grupos como este e clicar em. Uma linha centralizada verticalmente. Então aqui, clique em distribuir na horizontal e pressione OK. Nosso cardápio está completo. E, como mencionei antes, em aulas futuras, usaremos recursos mais avançados como layouts automáticos e componentes Com esses layouts e componentes automáticos, poderemos criar facilmente esse tipo de site Mas, por enquanto, este exercício o ajudará a adquirir muito conhecimento sobre como o FIGMA funciona e você poderá obter experiência adicional no Figma OK. Agora temos que criar esses textos. É muito simples. Então, vamos começar. Primeiro, temos que criar essa boas-vindas às minhas finanças para fazer isso. Eu apenas pressiono T no teclado e vamos adicionar um texto como este. Ok, é assim, então temos que descobrir as fontes usadas para criar esse título Portanto, a fonte é Georgia five regular. Vamos adicionar esses detalhes regulares da Geórgia. Isso deve ser 55. OK. Agora vou copiar esse sutiã no comando C e colar assim, e está em maiúsculas para torná-lo minúsculo, clique aqui e caso possamos selecionar OK. Parece bom. Agora vou alinhá-lo com o nosso layout. Então, o que temos para criar isso. Estamos aqui para ajudar a copiar o texto e está na fonte tas hell, Vertica, regular 25 Vamos criar um texto e colá-lo assim e fonte, caramba, Vertica, normal 25 Ok, então basta clicar aqui e colocar assim por enquanto, então temos que criar esse ícone de contato e aprender. Então, já criamos o ícone de transmissão de contato, então eu posso simplesmente duplicá-lo, clicar em tudo e duplicá-lo assim Em seguida, alterarei essa altura para 60 para fazer isso, clique no retângulo e alterarei a altura para 60 Então faça esse centro. Também acho que temos que mudar o tamanho da fonte. O tamanho da fonte é 21, o tamanho é 20, faça dela um centro de linha como este. Agora eu posso novamente duplicar isso e colocá-lo aqui assim. Em seguida, coloque-os no centro da linha e este texto será aprendido mais. Altere o texto para saber mais. Agora, o que temos que fazer é remover essa cor do campo para remover essa cor do campo, basta clicar nesse ícone de menos, e agora adiciono o Etro, clico em Etro e a cor do traçado é preta, vou mudar a cor do texto para a cor do campo para preto assim para a cor do campo para preto Criamos muito bem o botão Saiba mais, mas primeiro precisamos ajustar mais coisas Vamos descobrir que o espaço entre o texto e a borda do botão é 33 por 33. Vamos aqui, temos 20 por 20. Vamos fazer com que seja um pouco mais parecido com este 33. E temos que aumentar mais três 0,1, dois, três. OK. Agradável. Agora, o que precisamos fazer é clicar nele e selecioná-lo como dentro. Agradável. Agora temos dois botões e a seção de cabeçalho. Em seguida, agruparei esses dois botões pressionando ao lado deles e pressionando Command G. Então eu tenho que descobrir o espaço entre essas duas seções. É 20 por 30, vamos clicar aqui e abrir isso pressionando a tecla para cima no teclado e, em seguida, aumentar para 30. OK. Agora posso selecionar todo esse texto e pressionar Command G para agrupá-lo. OK. Agora, o que posso fazer é selecionar este e selecionar o plano de fundo clicar neste centro vertical de alinhamento e alinhá-lo verticalmente no centro e alinhá-lo verticalmente Em seguida, temos que adicionar essa imagem. Para adicioná-lo, basta criar um retângulo como esse , colocá-lo assim e configurá-lo assim, assim Então, vamos clicar aqui e clicar em Colocar imagem e selecionar a imagem. Em seguida, clique aqui para colocá-lo. OK. Agora, o que posso fazer é tocar duas vezes nessa imagem e alterar o campo para recortar. E agora, nessa imagem daqui, coloco essa imagem assim. OK. Na verdade, acho que podemos aumentar esse tamanho de imagem mais assim, mas eles fizeram isso, colocaram assim e sim, se encaixa perfeitamente. Então, agora o que temos que fazer é criar essa barra preta. É fácil criar, basta clicar no retângulo e clicar assim, depois colocá-lo assim e fazer com que a largura seja igual à da moldura e, em seguida, aumentar o tamanho Na verdade, vamos descobrir o tamanho. Em 270, faça 270 assim, depois mude a cor do campo para preto e clique na seção do herói e pressione Vir no Mac e Control no Windows e rádio assim. Agora, parece bom, e agora o que temos que fazer é realmente mudar essa cor de preenchimento para essa cor, copiar essa cor, mudar a cor de preenchimento. Isso é bom. Agora temos que adicionar esse texto. O texto é Georgia 45 normal, então basta clicar no texto ou simplesmente clicar no T e pressionar aqui, depois pressionar algumas tomadas, adicionar algum texto e é Georgia. Regular 45, então nesta fase o texto fica assim, para isso e tem vamos entrar e na segunda linha assim. Em seguida, clique no fundo, clique no texto, clique no centro vertical da linha. OK. Agora temos que adicionar essas três seções. Para adicioná-los, clique aqui e verifique a fonte, ela é vertical regular, 65 basta duplicar isso e pegar esses dois planos YE e alterar a fonte para seis regulares assim Então temos que adicionar isso , é albatica regular 25. Podemos simplesmente duplicar isso e adicionar os tanques. Ok, já mude para 25. Em seguida, clique em ambos os itens e clique em Alinhar o centro horizontal Vamos ver o tamanho intermediário ou a margem entre esses dois. 14. Vamos fazer 50 e pressionar os dois. Coloque-o na horizontal e clique em Command G. Ok. Agora duplique essa foto. Agora temos que alterar o valor aqui, comando ps c1v, copiar isso, copiar isso e copiar assim Agora, faça com que eles se alinhem corretamente. OK. Agora vou colocar a foto aqui desse texto aqui. Vamos clicar em distribuir espaçamento horizontal depois de selecionar todas essas três tomadas e, em seguida, desculpe, clique em alinhar o centro vertical Então clique aqui, clique em Align Center. Em seguida, pressione Command G para agrupá-lo aqui, clique em alinhar o centro vertical OK. Agora, criamos com sucesso a segunda seção de heróis. Vamos verificar o segundo, e aqui está o design que acabamos de criar. Como eu disse antes, essa é uma maneira de aprender Figma eficaz e, em seguida, você faz um exercício Deixe-me compartilhar com você. OK. Aqui está a terceira seção de heróis. E você deve criar esta seção usando o conhecimento que acabou de aprender. Esta é uma seção simples de heróis e, ao criar essas duas seções de heróis, você só tem a ideia ou o conhecimento para criar esse design. Então, vamos começar o trabalho. Além disso, no futuro, usaremos layout e componentes automáticos. Portanto, sua jornada de web design será muito fácil com layout e componentes automáticos. Por enquanto, basta criar essa seção de heróis. E saiba mais sobre o Figma. Ao criar esse tipo de seção de heróis, ao criar este exercício, você pode brincar com o Figma e descobrir mais recursos interessantes Nos vemos na próxima lição. 13. Crie a seção de 3ª herói com Figma UI2: Você conseguiu criar esse design? Então, vamos projetá-lo novamente. Primeiro, eu tenho que criar uma moldura. Clique na moldura, clique aqui. Então eu vou definir com 14.4.700 como esta. Ok, nós temos o quadro, então vamos mudar o nome do quadro para. Então, o que precisamos fazer é adicionar layout da grade ou a grade do layout. Clique aqui, e aqui está nosso layout de grade, clique nele. Agora, como primeira etapa, temos que criar esse menu. Portanto, o tamanho do menu é 223. Sua altura é 223. Então, vamos criar um retângulo e torná-lo tão 14423 quanto OK. Agora vamos torná-lo transparente para zero assim. OK. Agora temos que criar esse logotipo para fazer isso, eu apenas crio outro retângulo e faço com que ele se alinhe assim Em seguida, temos que selecionar a imagem do logotipo. Clique aqui, clique em Colocar imagem e aqui, temos o logotipo. Em seguida, clique assim. Então, o que temos que fazer é mudar esse campo para cortar. OK. Então faça assim e aumente assim. OK. Além disso, talvez possamos alinhá-lo corretamente aqui. Agradável. Agora temos que criar esse menu. É muito simples. Clique em T e crie o menu. O primeiro vinho estará em casa. Agora, o que precisamos fazer é encontrar a fonte. Clique nele e a fonte é o parafuso de cabine 18. Sila aqui, mude a fonte para cabine e, em seguida, negrito 18. Tudo bem. Na verdade, temos que mudar a visibilidade desse retângulo para cem novamente. Em seguida, vamos mudar a cor do campo para branco. Sem isso, não conseguiremos atingir esse retângulo. Agora, o que eu tenho que fazer é adicionar o sublinhado. Antes de adicionarmos o sublinhado, vamos duplicar isso assim: um, dois, três Certamente precisamos disso por três vezes, e depois acrescentaremos aqui sobre nós. Vamos digitar sobre então os serviços elétricos. Ah não, deveria ser elétrico. Serviços elétricos, então entre em contato conosco. OK. Agora vou destacar apenas esses três itens do menu e temos que colocá-los em maiúsculas e a largura da fonte será regular. Destaque os três pressionando a tecla shift e altere-a para normal, depois mude a caixa para a parte superior. OK. Agora, aqui, temos que mudar essa maiúscula e agora o que temos que adicionar esse sublinhado para adicionar o sublinhado, podemos selecionar, podemos clicar aqui e clicar neste ícone de adição Antes de adicionarmos o sublinhado, vamos alinhar isso primeiro, selecionarei todas essas coisas e farei com que distribua o espaçamento horizontal e, em seguida, alinhe o centro OK. Agora temos que mudar a cor. A cor será preta e aqui, a cor será azul escuro. Vamos mudar isso. Cor para azul escuro. OK. Agora temos que adicionar o sublinhado Para adicionar sublinhado, verifiquei se temos o estilo do texto, mas não o encontrei Então, vamos adicionar sublinhado usando ShafTol. Então, aqui, clicamos online, e agora vou clicar em Shift e adicionar um sublinhado assim Em seguida, altere a cor do sublinhado para essa cor azul escura. Ok, ok, parece bom. Agora, o que eu tenho que fazer é formar esse grupo. Selecione esses dois objetos e pressione o comando G ou Control G para criar um grupo. Então temos que descobrir o espaço entre 50. Então, vamos transformar esse espaço em 50, 50 e 50 aqui. Ok, agora selecione todos eles e pressione Command G para torná-lo um grupo, depois selecione o logotipo e defina o grupo de itens do menu. Em seguida, clique nesse centro alinhado vertical. Tudo bem. Agora temos que ajustar o tamanho entre o logotipo e os novos itens. Então, aqui, vou fazer com que seja de 50, 40 a 50, 50, assim. Tudo bem. E esse sublinhado deveria ser maior. Vamos colocar como seis e mudar para dois. Então, agora temos que adicionar esta chamada 24 horas para ligação gratuita Então, vamos criá-lo. Primeiro, temos que criar um círculo para criar um círculo, clicar aqui e deixar a elipse, depois criar uma elipse Vamos descobrir o tamanho da elipse. É 86 por 806-80-6806. Em seguida, clique aqui, mude a cor para essa luz. Em seguida, vou duplicar isso pressionando para a esquerda Então vamos descobrir o tamanho que é 62 por 62, fazer com que seja 6262, depois mude a cor de preenchimento para essa cor escura, essa Agora, selecione esses dois objetos e faça com que eles se alinhem vertical e horizontalmente ao centro OK. Em seguida, temos que adicionar esse ícone de telefone. Para adicionar esse ícone de telefone, podemos usar o ícone fontosom Se formos ao fontsom, o Pontosom é a biblioteca de ícones e o kit de ferramentas da Internet Então, se clicarmos neste site, pontosom é uma biblioteca de ícones Então, aqui está a biblioteca de ícones do pontosom, e podemos pesquisar aqui para encontrar o ícone de pesquisa E aqui estão os ícones do telefone. No entanto, temos um plugin Figma desenvolvido por pontosm. Então, para adicioná-lo, precisamos acessar o plugin. Então, para acessá-lo, clique nesses recursos, e aqui podemos acessar plug-ins e aqui podemos pesquisar o nome do plug-in. Eu procuro a soma da fonte. Ok, aqui estão os ícones do pontosom, clique em Executar. Ok, agora temos o widget do ícone do pontosom ou eu posso conectá-lo Então, aqui temos que pesquisar o nome do ícone, é telefone, e aqui está o ícone do telefone. Clique nele. OK. Agora temos que colocá-lo aqui e depois mudar a cor para Y. Ok. Assim. Tudo bem, certo. Agora, coloque-o no centro. Na verdade, isso está fora do nosso quadro. Então, para corrigi-lo, temos que adicioná-lo ao interior da moldura desta forma. Em seguida, removerei esse quadro ALT do telefone. Agora temos o ícone para selecionar todos eles e colocá-los no centro. OK. Agora, o que temos que fazer é ler este texto. Vamos descobrir os textos cabin medium 16.5, vamos criar tanques e adicionar o texto Deixe-me adicioná-lo cozinhando aqui e colando assim. Na verdade, quando o colamos diretamente, todas as propriedades desse texto chegarão diretamente ao texto. Mas, por enquanto, vamos adicioná-lo assim porque sabemos como alterar a fonte na figma. Vamos descobrir que o espaçamento é 16 e temos essa parte, é o parafuso 25 da cabine Vamos primeiro copiar esse texto. Vou apenas colá-lo aqui. Clique no contexto, clique aqui. Em seguida, acrescentarei que é preciso 1-110, um. Eu já designei. Vamos descobrir a cor. Acho que já está bom. Agora coloque assim. Então, o que precisamos fazer é alinhar essa folha e abrir espaço entre duas, selecionar esses dois objetos e pressionar o comando ou controle G para agrupá-los Então temos que agrupar esses dois. Selecione todos esses três itens e pressione o comando G, seguida, destaque esses dois objetos, esses dois grupos e clique assim, então eu colocarei assim. Ok, a parte do cabeçalho está concluída e parece semelhante. Agora, o que temos que fazer é criar essa linha azul. Para criá-lo, clico nesse retângulo que já criamos e clico em traçado A cor da rocha será essa cor escura. Em seguida, altere o tamanho do traço para curtir E clique aqui e só precisamos de um fundo assim. Devemos mudar seu tamanho também. Tudo bem, tudo bem. Agora temos que adicionar essa imagem. Adicionar a imagem é fácil. Primeiro, clico na moldura e pressiono Command no Mac e no Alton Windows. Vá assim. Na verdade, se não colocarmos o comando no menu, mudaremos as posições quando ajustarmos essa camada Se você marcar o ícone do telefone, ele se ajustará quando ajustarmos isso. Mas se passarmos o comando vai se ajustar assim. Tudo bem, tudo bem. Não precisamos de muito espaço. Agora, descubra que a altura é 577, vamos criar outro retângulo e fazer com que ele assine 144 50 Desculpe, 1.440 e depois 577 a e coloque aqui. OK. Então, novamente, selecione a moldura e ajuste-a assim. Então, o que podemos fazer é clicar na moldura. Clique no retângulo e clique nessa ferramenta de forma e clique em conflasimage Vá para a nossa imagem, selecione assim. OK. Agora só precisamos adicionar essas chamadas à ação, adicionar essa chamada à ação como o título do subdin e o botão É bem simples, então vamos fazer isso. Primeiro, clicarei em um texto e ele será 100% Executado. Ok, agora vamos descobrir as propriedades da fonte. É cabine média 24. Então, vamos mudar para cabine média 24. Então, quando mudamos a fonte, na verdade selecionamos a fonte ou temos que selecionar a fonte sem ir para o modo de edição. Então, se selecionarmos o texto, poderemos alterá-lo. 24 médios, e a cor será essa cor azul escura. OK. Agora temos que adicionar esta seção. Para adicioná-lo, primeiro copiarei o texto clicarei nesse T e colarei o texto assim. Na verdade, como eu disse antes, quando o colamos, a propriedade do design virá junto com ele. Vamos relacionar esses dois objetos e clicar em alinhar à esquerda Agora, descubra o espaço entre eles, faça isso, e agora temos que adicionar esse botão. Vamos ver as propriedades do botão. É 320 por 80. Clique aqui desta forma, terá 320 por oito e altere a cor de preenchimento para essa cor azul escura como esta, depois coloque assim e clique no conteúdo e adicione texto como solicitação a partir da palavra mais escura para que o Figma tenha um recurso interessante Se clicarmos com o botão direito do mouse aqui e acessarmos esta opção copiar e colar como e selecionar as propriedades da cópia, clique aqui e clique com o botão direito do mouse em copiar e colar como e clique nas propriedades da fase. O que é bloqueio. OK. Agora, a propriedade será adicionada automaticamente a esse design. Vamos descobrir os detalhes. Ok, primeiro temos que mudar a altura. A altura é oito, não a altura com. Desculpe, eu estou entre esses três e 333. OK. Agora, selecione o retângulo e o botão, desculpe, o texto e faça com que ele se alinhe vertical e horizontalmente ao centro, pressione Comando G para agrupá-lo e destacar todas essas seções e pressione o comando G, depois clique nesse retângulo e Acabamos de criar o design. Vamos verificar o modo de apresentação de pré-visualização, modo atual. Parece assim. Sim, é assim que criamos o design simples. Como eu disse antes, em aulas futuras, encontraremos métodos mais fáceis gerenciar e mais fáceis de gerenciar e mais fáceis de criar esse tipo de design, e isso é para aprender o básico Espero que você aprenda sobre fontes, tanques, ferramentas de formas, rastreamento de imagens e criação seções básicas ou de criação de heróis bonitos Nos vemos na próxima lição. 14. Aprenda a criar o layout automático Figma: Olá, pessoal. Vamos aprender sobre o layout automático do Figma e como usá-lo para criar designs flexíveis e responsivos, economizando tempo e esforço ao trabalhar em seus Autoyout é como uma mágica em figma. Ele ajuda você a organizar seus elementos e tornar seus designs flexíveis. Pense nisso como um sistema que mantém tudo em ordem e ajusta o espaçamento para Quando você redimensiona um botão, cartão ou até mesmo uma seção inteira, layout automático garante que tudo dentro também seja redimensionado à noite Imagine que você está construindo uma barra de navegação com botões. Sem o layout automático, você precisa ajustar manualmente cada botão se alterar o tamanho. Mas com o layout automático, Figma fará isso automaticamente para você Existem alguns motivos pelos quais o layout automático é tão importante. O primeiro layout automático faz com que você trabalhe mais rápido. Não é necessário ajustar cada elemento manualmente. Além disso, se você quiser que seu design funcione em diferentes tamanhos de tela, layout automático ajuda a garantir que tudo se encaixe perfeitamente. Além disso, oferece um espaçamento consistente, que é fundamental para um bom design Basicamente, o layout automático permite que você gaste mais tempo projetando e menos tempo corrigindo pequenos detalhes. Vamos ao nosso design Figma e começar a adicionar o layout automático Primeiro, criarei um novo projeto clicando no botão criar novo azul e clicando nos arquivos de design. Então aqui vou mudar isso para. Vamos mudar isso como um AO automático. Em seguida, clicarei nesse ícone de moldura e criarei uma moldura do tamanho de uma área de trabalho como esta. Como primeira etapa, vamos adicionar o layout automático a esse quadro. E pagamento automático. Se você verificar a barra lateral direita, verá a opção de layout automático. Só você precisa clicar nesse ícone de adição. Ou, se você gosta de usar um atalho, o atalho de layout automático é Shift A. Assim, você pode adicionar layout automático. As opções de layout automático têm recursos para adicionar entre tamanhos, padrões horizontais, padrões verticais e alinhar os itens conforme quisermos recursos para adicionar entre tamanhos, padrões horizontais, padrões verticais e Será fácil se criarmos alguns objetos para entender isso. Primeiro, vamos criar um botão. Você se lembra da última vez que criamos o botão? Temos que adicionar forma e texto, mas com o layout automático, o texto será suficiente para criar um botão. Clique no texto e clique aqui, depois adicione texto ou adicione o nome do botão e clique em mim agora. Assim, então, como fizemos antes, vamos mudar a fonte. A fonte será, vamos adicionar uma fonte como aberturas e o tamanho ficará em negrito. Então, vamos adicionar o tamanho da fonte a 418 dessa forma, e talvez sejamos regulares. É bom. Agora, vamos fazer com que seja meio bool. Ok, agora temos o texto do botão. Vou colocar a caixa em maiúsculas. OK. Agora, isso é apenas um texto, e podemos adicionar layout automático a esse texto. Você precisa pressionar Shift A. Ao pressionar Shift A, você poderá adicionar um layout automático. Ok, agora aqui estão as opções de layout automático desse botão. Então, como segunda etapa, renomearei esse quadro para botão, que seja mais fácil de entender Então, o que vou fazer é adicionar uma cor de preenchimento. A cor do plano de fundo. Portanto, quando adicionarmos a cor de fundo, poderemos identificar facilmente o que aconteceu quando alteramos as opções de layout automático nesta seção Então, na barra do lado direito aqui, preenchemos e eu clico neste ícone de adição. Então eu vou mudar essa cor verde porque verde é uma das minhas cores favoritas. OK. Parece bom. Você pode mudar para a cor que quiser, mas eu escolho verde. OK. Agora temos o texto com a cor de fundo. E se clicarmos nesse layout automático, podemos ver o texto assim. Agora, seleciono o botão e você se lembra de que falei sobre preenchimento horizontal e preenchimento vertical Aqui estão essas opções. Podemos simplesmente adicioná-los como 15 e ver que, quando eu adiciono isso, obtenho o espaçamento entre o texto como 15 e vamos torná-lo 20 Agora está mais claro, 25, agora está mais claro. Em seguida, temos o preenchimento vertical. preenchimento vertical significa o espaço entre a parte superior e a parte inferior desse texto Vamos adicionar preenchimento vertical, vamos adicionar 25 25. OK. Agora parece mais um botão. Vamos fazer isso como gêmeo e 30. OK. Agora está muito bom. Como se eu quiser, posso adicionar, posso reduzir os cantos clicando aqui e adicionar 39. Você se lembra que nas últimas aulas, fizemos isso e agora temos esse tipo de botão e, ajustando essas coisas, podemos tornar esse design muito legal Agora esse botão está no canto esquerdo. E se quisermos que isso fique no meio, como aqui. Então, para fazer isso, clique na moldura, a moldura já tem um layout automático. Então, basta clicar em Aline superior central e ela irá para a linha superior central, e se clicarmos em Align center, ela irá para a parte central, e aqui está o poder do layout automático Se não usarmos o layout automático, teremos que ajustar esse botão manualmente. Mas quando o layout automático, Figma cuidará da parte de ajuste, só precisamos alterá-la nesta seção de layout automático OK. Agora acho que temos que criar um botão diferente. Vamos duplicar esse botão. Vou clicar no botão e pressionar Command C e pressionar Command V. O botão é adicionado, então pense se você precisa alterar o tamanho da caneta de aposta. É muito simples. Só você precisa clicar no quadro e então você verá esse tipo de linha de ajuste para alterá-lo. Então, podemos mudar isso a partir daqui desta forma. OK. Agora vamos criar esse botão como a cor do campo zero e adicionar um traçado. Para adicionar um traçado, clique no botão e você verá esse traçado, basta clicar assim. E agora vamos mudar a cor do traço para essa cor verde. Então, podemos mudar a cor do texto para mudar a cor do texto, temos que silenciar o texto e vamos mudá-lo para verde OK. Aqui fica assim, mas essa cor verde é muito clara, então temos que mudá-la para escura assim, alterar a cor de preenchimento para desculpe, não a cor de preenchimento. Altere a cor do texto para uma cor escura dessa forma. OK. Agora pense que se você quiser alterar o texto, vamos mudar, clique em mim para comprar um e ganhar outro grátis. Quando mudamos a cor do texto, o alinhamento se ajusta automaticamente Veja se eu mudar aqui para enviar, isso mudará de acordo com o envio agora desta forma. O botão mudará de acordo com o texto. Mas você se lembra do último design que criamos? Então, vamos para esse design. Eu clico em Voltar aos arquivos e aqui temos o design. Então, vamos pegar esse botão. Então, neste botão, vamos clicar em mim para clicar em mim para obter um grátis. Agora, quando você ajusta o texto do botão, o fundo não se ajusta. Temos que ajustá-lo manualmente dessa forma. É por isso que devemos usar o autoayout. Vamos voltar e clicar na seção AutoLayout. Isso é apenas básico e temos muito mais itens, muito mais recursos que podemos fazer com o layout automático. Agora imagine que você precisa criar um botão no segundo botão abaixo desse botão. Atualmente, você não pode fazer isso porque se eu duplicar esse botão , haverá apenas uma linha horizontal Se quisermos adicionar o botão abaixo, primeiro, excluirei isso ou excluirei isso e, se precisarmos adicionar um novo botão, primeiro precisamos clicar neste DestopFrame e adicionar o layout automático desse quadro como vertical, assim Quando eu adiciono, a tomada fica alinhada verticalmente desta forma, mas eu quero tornar essas duas horizontais e adicionar uma nova Para fazer isso, clico nesses dois itens e pressiono Shift A, e ele se torna um quadro diferente. Você viu? Vou pressionar Command C para desfazer isso. Primeiro, clico nessas duas camadas ou nesses dois quadros ou nesses dois botões, depois pressiono Shift A e ele se torna um novo layout ou novo layout automático Agora eu posso clicar nesse layout horizontal e ele será horizontal. Agora, se eu quiser criar um novo botão. Vamos criar um novo botão abaixo como este e Hello me. Em seguida, vamos adicionar o layout automático pressionando Shift A, e aqui temos os detalhes, temos as opções de layout automático. Agora, o que vou fazer é adicionar a cor do campo. Desta vez, vamos adicionar a cor do campo e a luz verde verde desta forma, e vamos mudar a cor do texto para branco. Agora vou adicionar o almofada horizontal 20 e, desculpe, a almofada vertical 20 é como esta. Vamos fazer isso como 30. Agora, veja, criamos esse botão abaixo desse conjunto. Vamos renomear isso como um botão como este, então podemos ajustar ou podemos alterar essa linha de texto agora e ela se ajustará de acordo com o texto OK. Aqui está a maneira de criar o layout automático. Vamos ver se você deseja transformar esse botão em tamanho real. Portanto, atualmente esse tamanho de desktop é 1.440. Então, se quisermos encher esse botão com o botão. Só precisamos clicar no botão e, aqui, você verá. No quadro, você verá, clique neste botão, e aqui, você verá um abraço, faça-o encher o recipiente Em seguida, você o faz encher o recipiente. O botão será ajustado como o recipiente de enchimento. Além disso, você verá esse tipo de espaçamento. O motivo é que, ao clicar na moldura da área de trabalho, você verá o preenchimento horizontal em dez Se o alterarmos como zero, o botão terá a largura total. Então, vamos fazer 140, 140. OK. Agora, nesse tamanho intermediário, você pode alterá-lo alterando a lacuna vertical. Vamos mudar isso como 60. Então, aqui está o caminho. Agora, se você quiser fazer esse botão na parte superior, você pode clicar em uma linha no centro superior ou em uma linha à esquerda do esboço como esta Isso é muito fácil. Talvez você ainda esteja confuso, mas nas próximas lições, criaremos esses banners com layout automático e você entenderá completamente o layout automático depois de fazermos isso, a próxima lição 15. Habilite a versão Beta do UI3 para Figma: Olá a todos, no momento em que crio esta lição, nova interface de usuário Figma UI não está disponível para todos os usuários, então temos que entrar na lista de espera porque ela ainda está Após a versão beta, conforme anunciaram, poderemos acessar o Figma UI three No entanto, se você não tiver a UI Three disponível, podemos usar a extensão do Google Chrome para obter a revisão da UI Three. Vamos fazer isso. Primeiro, abro uma nova guia e procuro habilitar Figma, eu três, plugue Em seguida, farei com que habilite a UI three beta ou Figma. Eu apenas clico nele. Agora aqui está a extensão ou plug-in, eu clico nela no Chrome e clico na extensão. Atualmente, esta versão funciona em navegadores da web, não na ferramenta Figma baixada, então use o Google Chrome para executar essa extensão. OK. Agora, o que precisamos fazer é acessar nossa conta Figma e eu a reprimo. Agora vamos clicar em Criativo e clicar em Arquivo de design. A partir daqui, podemos usar o Figma UI three para criar nossos designs. Na próxima lição, apresentaremos uma visão geral rápida e usaremos esses três recursos da interface de usuário e interface do usuário três para concluir nosso trabalho futuro. 16. Passo a passo do Figma UI3: Olá, pessoal. Vamos percorrer a interface Figma UI Agora estou no painel do Figma. Eu clico neste novo arquivo de design para criar um novo design. Agora eu tenho a UIT ou a antiga interface do Figma Editor. Eu clico neste ícone de Ajuda e aqui, clico em usar a nova interface do usuário na tinta beta, aqui está nossa interface do usuário. Isso é o mesmo que a UI two ou a antiga UI do Figma. Só que temos uma aparência mais profissional e usamos uma mudança amigável no editor geral. Primeiro, vou criar uma moldura. Então, aqui temos o painel de ferramentas aqui. Nós temos a moldura, então eu clico na moldura e clico aqui, depois faço uma moldura como essa, ou vamos criar uma moldura com o tamanho da área de trabalho. Eu clico aqui. Em seguida, no nosso lado direito, podemos selecionar o tamanho da área de trabalho. Vou selecionar essa versão para desktop. Agora, no lado esquerdo, temos a seção de navegação. Aqui, podemos ver as camadas e em ***, podemos ver essas afirmações Vou renomear essa área de trabalho 12 principal. Agora vou criar um retângulo usando a ferramenta de forma, clique aqui e crie um retângulo como este Então eu posso ver a propriedade desse retângulo. Vamos mudar essa largura e altura para 300 300 e vamos mudar a cor do campo para vermelho. Então é o mesmo de antes e também podemos criar lábios, deixar a elipse e criá-la assim Então aqui temos o texto. Eu clico nele e olá , depois seleciono o texto e aqui, posso alterar a fonte para trocá-la ferrovia. O tamanho será de 30 sincronia e semi placa Mude a cor para vermelho assim. É 60 neste lado, podemos ver os jogadores e podemos criar novas páginas como esta. Como antes de termos esse painel de ação aqui, podemos encontrar plug-ins e widgets Também nesta seção, temos recursos que podemos usar com o Figma AI e, em futuras aulas, vamos aprender sobre o Figma Vamos encerrar esta lição com a mudança no nome do arquivo Figma Vou mudar o nome do arquivo Figma para web design. Aulas como essa. No próximo vídeo, vou ver você criar layout automático do Figma com a versão mais recente do UIT 17. Aprenda a criar um layout automático Figma com o UI3: Olá, pessoal. Vamos aprender o layout automático do Figma com a interface de três editores do Figma UI Você já conhece o layout automático do Figma, vamos entrar em ação Primeiro, vou criar uma moldura. Então, aqui estou eu no editor Figma, então eu clico aqui, clico no ícone da moldura e seleciono como desktop Aqui está nossa moldura. Em seguida, vamos adicionar o layout automático a esse quadro. Para fazer isso, posso clicar com o botão direito mouse e clicar neste item do menu Alayout, ou posso clicar aqui ou no lado direito, temos layout em layout Aqui, podemos usar o recurso de layout automático, para que eu possa clicar aqui ou simplesmente clicar em Shift A. Basta clicar aqui e é um layout automático adicionado Agora, o que vou fazer é adicionar um pouco de elipse. Vamos clicar em Ellips e criar uma Elise. Em seguida, definirei a largura da elipse como 150 e a altura como um quinto Em seguida, mudarei a cor do campo para vermelho e depois duplicarei isso por três vezes vamos transformar a cor da elipse Em seguida, clique aqui e mude essa cor para azul assim. Vamos brincar com esses objetos e aprender mais sobre o layout automático. Primeiro, vou renomear esse teste de layout de nome de quadro. OK. Então eu seleciono a moldura. Na seção automática, teremos a opção. Como primeira etapa, definirei as margens esquerda e direita como 140 para fazer isso Eu tenho que encontrar a esquerda e a direita. Aqui estão as margens esquerda e direita. Atualmente, são dez. Se eu clicar aqui, posso ver as margens individuais Nesse caso, é um preenchimento, mas também funciona como margem Aqui, vou colocar 140 e, novamente, vou colocar 140 para este lado. Aqui está 140, aqui está 140. Agora eu quero adicionar margem na parte superior e inferior. Atualmente, a margem superior é dez. Aqui, você pode ver que é dez, dez, e aqui, se eu passar o mouse, ele aparecerá como dez, então eu quero adicionar mais espaço, adicionarei como 60 Para fazer isso, vou clicar aqui e agora posso alterá-lo 60 se eu minimizar clicando aqui, posso apenas em 60, então terei 60 como margens superior e inferior, e aqui, veremos a lacuna horizontal entre os objetos Então, para mudar isso, eu posso superá-lo e mudar como eu quiser. Vamos defini-lo como 50 e, a partir daqui, posso alterá-lo como quiser. Então eu quero colocar esse botão no centro para fazer isso, eu clico na moldura e aqui, eu posso clicar em Alinhar do centro A elipse vai para o centro e se eu clicar no centro, ela vai para o centro e vai funcionar assim Atualmente, essas três elipses estão na horizontal. Se eu quiser torná-lo vertical, basta clicar nesse layout vertical e ele se alinhará verticalmente Agora, novamente, vou fazer um layout horizontal como este. É assim que podemos adicionar e trabalhar no layout automático no quadro. Há mais opções para jogar, por exemplo Se adicionarmos essa lacuna horizontal entre os objetos ao automático, ela preencherá automaticamente a lacuna. Além disso, se eu alterar o tamanho com uma altura, vamos alterá-lo como 1.000, ele se ajustará de acordo com o design seis, assim. 18. Crie botões usando layout automático: Vamos criar botões com layout automático. Então, para fazer isso, removerei todo esse quadro ou criarei um novo quadro. Eu pressiono Command e uso a roda do mouse para diminuir os canners e clico aqui e clico na área de trabalho OK. Vamos mudar essa área de trabalho para a camada BTN. E agora eu clico aqui e converto para um layout automático como este. OK. Agora vamos manter a configuração assim e agora vou pressionar T e criar um texto de botão como clique em mim, agora posso alterar a fonte se quiser. Vamos mudar isso como Roboto e Roboto parecem para 25. Vamos fazer com que pareça médio. Vamos mudar a fonte para como pop pop in. Parece bom. OK. Agora, o que eu tenho que fazer é clicar com o botão direito do mouse e clicar em AutoAyouto para pressionar Shift A. Basta clicar nele e ele é adicionado ao Em seguida, vou clicar aqui e renomear isso como TN one. OK. Agora vou para o painel do lado direito e vamos adicionar a cor de preenchimento. Vou adicionar cor de preenchimento como essa cor azul clara, vamos torná-la um pouco mais escura Agora, cancele novamente, clique neste texto e altere a cor de preenchimento para branco desta forma. Novamente, selecione o botão. Layout e, a partir daqui, adicionarei preenchimentos esquerdo e direito 30 e preenchimentos superior e inferior 20, assim. Então vou mudar o canto ou reduzir a aparência do canto, nós o temos como zero, vou fazer com que seja 60 assim. OK. Agora, o que eu posso fazer é colocar isso no centro. Para fazer isso, temos que selecionar nossa moldura e, como fizemos antes, temos que colocá-la no centro desta forma OK. Agora vou duplicar isso pressionando e arrastando assim OK. Agora vou criar o segundo botão. Vamos mudar esse texto para o segundo. Clique em mim em segundo lugar. E agora vamos mudar a cor de preenchimento para essa cor azul. E agora eu clico no botão e vamos alterar os nomes dos botões dois e definir a opacidade para zero assim Então eu clico em Estro e clico aqui, depois defino a cor Etro para aquela cor azul, e vou mudar a linha com duas OK. Agora temos dois botões. Agora eu quero alterar o tamanho do convite para fazer isso, basta clicar aqui e vamos alterá-lo como 20 Mas temos um problema. Digamos que precisamos criar outro botão e ele deve estar abaixo desses dois botões. Agora vou clicar nesse botão e pressionar Command C ou Control C no Windows e Command B e, em seguida, ele estará na mesma linha. Se quisermos fazer esse botão na linha podemos silenciar a camada e clicar assim Quando criamos a camada como camada vertical, cada botão será definido como vertical. Para corrigir isso, vou destacar esses dois botões, clicar neste botão, pressionar Shift e clicar neste. Em seguida, pressiono o Comando G para agrupar o e agora o que posso fazer é clicar nesse layout vertical porque esse grupo funciona como um layout diferente. Nesse grupo, se quisermos alterar o tamanho intermediário para 15, podemos fazer isso clicando no grupo e, a partir daqui, podemos alterá-lo como 15. Ou podemos pressionar Shift A e adicionar layout automático a esse grupo e, a partir daqui, podemos alterá-lo assim. OK. Agora, vou mudar esse quadro para o conjunto BTN. Agora eu quero que esse botão seja adicionado abaixo desses dois botões. Eu simplesmente clico neste e o arrasto para a parte inferior deste conjunto de botões e aqui, vou mudar a cor do campo para que fique vermelho assim. Então acho que quero criar esse botão, botão oferta completo para fazer isso, vou aqui e no W vou configurá-lo como um recipiente de enchimento como este. Então eu vou mudar isso. Clique em mim Estou cheio de BTN, assim. Como antes de podermos alterar esses textos, clique em mim agora para que dois assim se ajustem de acordo com o design porque adicionamos o layout automático. Aqui, se quisermos adicionar margem, podemos simplesmente selecionar o quadro principal e, a partir daqui, podemos adicionar uma margem de 140 desta forma. Isso é muito fácil e, na próxima lição, vamos começar a criar a seção de heróis. 19. Crie a 1ª seção de herói com layout automático: Olá a todos. Agora vamos criar essas seções de heróis com layout automático. Já estamos criando essas seções zero sem layout automático. Agora é hora de usar o layout automático para criar essa seção de heróis. Como primeira etapa, precisamos criar uma moldura. Eu clico aqui e seleciono o tamanho da moldura como desktop. Então eu vou colocar assim. Agora eu mudo este desktop para herói com layout automático. Ok. Agora, como primeira etapa, temos que adicionar o layout da grade. Para adicionar um layout de grade, ilate a moldura e aqui temos o layout da grade Eu clico aqui e aqui nós salvamos na grade de chamadas, então eu apenas adiciono. Ok. Agora, o que vou fazer é criar esse quadro como um layout automático. Então, para fazer isso, eu seleciono o prime e pressiono Shift A, então ele se torna um layout automático e agora vou adicionar os detalhes necessários. Primeiro, vou defini-lo como um centro superior da linha, depois adicionarei uma lacuna vertical ou preenchimento como 140, depois adicionarei a margem real esquerda e direita, ou podemos chamá-la de preenchimento Em seguida, adicionarei zero como a margem inferior do ventilador superior ou os acolchoamentos superior e inferior Então, como tamanho intermediário, vou selecioná-lo como 90, ou vamos torná-lo de um a 20 Aqui temos um layout horizontal, mas precisamos ter um layout vertical porque construímos o site de cima para baixo. Ok. Agora nosso layout está pronto. Vamos criar a seção de heróis. Temos a altura da seção do herói em 700. Vamos criar uma moldura, clicar na moldura e clicar aqui. Em seguida, definirei a largura como 1.440 e a altura como 700. Ok. Agora, o que eu faço é aqui que temos o quadro, pressiono Shift A para torná-lo um layout automático ou adicionar um layout automático a esse quadro. Então, se eu quiser, posso renomear esta seção como herói. Ok. Agora, a partir daqui, precisamos adicionar essa imagem de fundo. Para fazer isso, seleciono esta seção de heróis clico em um retângulo e clico aqui Então, novamente, vou definir o retângulo com 1.440 alturas 700 como esta, em seguida, clicarei no triângulo vermelho e clicarei aqui, clicarei na Em seguida, selecionarei a imagem. Agora eu clico aqui para adicionar a imagem. Agora a imagem foi adicionada perfeitamente. Ao ver o design, você verá esse tipo de espaçamento entre a imagem para removê-la, clique na seção do herói e defina esses detalhes como zero por enquanto E, por enquanto, vamos continuar assim. Novamente, e agora temos a imagem e, como segunda etapa, temos que adicionar esse fundo de sobreposição A cor da sobreposição é preta e sua opacidade é 70. Vamos adicionar esses detalhes. Clique na imagem, clique neste ícone de adição e faça com que 70 e a cor seja preta. Ok. Agora temos que adicionar esse texto do logotipo para adicioná-lo, clicarei no texto TO e clicarei aqui, depois adicionarei o texto assim como adicionarei o texto como logotipo. Quando eu adiciono o texto, você verá que ele aparece aqui. A razão para isso é que atualmente estamos no quadro de heróis. Se eu clicar nesse quadro e ele tiver um layout horizontal. Vamos fazer com que seja um layout vertical e, em seguida, o texto do herói apareça aqui. Deixe-me mostrar mudando a cor. Vamos selecioná-lo e alterar a cor do campo dessa forma. Mas essa imagem deve funcionar como imagem de fundo. Atualmente, se adicionarmos qualquer objeto a esse design a essa seção de heróis, essa imagem não funcionará como imagem de fundo. Para atingir o pico, podemos selecionar a imagem e, nas posições do lado direito, clicar em ignorar layout automático como este e, em seguida, essa imagem ignorar o layout automático. Vou clicar na imagem e colocá-la assim. Agora que a imagem não está aparecendo para corrigi-la, vou colocá-la no topo da seção de heróis. Então, agora eu posso configurá-lo assim porque essa imagem ignora a funcionalidade de layout. Agora podemos fazer alterações nesta seção de heróis para fazer isso. Primeiro, vou removê-la e, no logotipo, mudarei sua cor para branco e vamos ver os detalhes. É Railway semivol 35, clique nos tanques e Railway semi wolthirty vamos verificar o preenchimento entre a parte superior da moldura e o logotipo São 20. Então, vamos fazer 20 para chegar a 20, isolar a seção do herói e adicionar o preenchimento superior como 20, assim Então, se eu estiver escorregando aqui, vamos remover o acolchoamento inferior Na seção de heróis, definirei o preenchimento superior como 20, assim Para esta seção de heróis , temos um problema porque a seção de heróis a altera. Vou configurá-lo com um recipiente de enchimento e a altura será 700 assim. Agora é a segunda etapa, precisamos neste item do menu para adicioná-los, pressionarei T e curtirei a tela inicial. Em seguida, clicarei aqui e clicarei em Copiar e Colar como e clicarei em Copiar propriedades e, chegando aqui, selecionarei as propriedades de texto e fase. Agora temos isso sobre nós, então vou duplicar esta casa pressionando Alt Em seguida, clicarei aqui e clicarei em Copiar propriedade, depois virei aqui e clicarei na primeira propriedade. Então vou duplicá-lo por uma, duas, uma, duas, três, quatro vezes, uma, duas, três, quatro Agora vou mudar esses textos. Este será quase como, este será como funciona. Estes serão treinadores, este será contato Agora devemos ter esse texto alinhado na horizontal , atualmente está na vertical Então, para fazer isso, vou destacar todos esses cinco textos pressionando Shift e depois pressionando Shift A. Quando eu pressiono Shift A aqui, ele é adicionado ao novo layout automático. Podemos alterar esse nome de layout automático como itens de menu. Não é necessário. Então, o que podemos fazer é alterar esse layout automático. Projete em layout horizontal. Agora vamos verificar o tamanho intermediário. O tamanho intermediário é 36. Vamos fazer isso entre 36 e 36. Para fazer isso, selecione o layout automático e altere-o para 36. Assim. Agora, na próxima etapa, temos que colocar essas duas seções ou seção de logotipo e item de menu no mesmo layout horizontal para fazer isso. Novamente, selecione o layout automático ou o conjunto de itens de menu e o logotipo pressionando Shift e pressione Shift A para criar um layout automático. Então, novamente, alteramos o layout automático para o layout horizontal. Agora, no alinhamento, vamos fazer com que ele se alinhe ao centro para alinhar corretamente ou talvez uma linha inferior central seja Agora, o que temos que fazer é nesse espaçamento, adicionar esse espaçamento é muito fácil Só precisamos alterar o tamanho intermediário. Podemos alterá-lo manualmente, mas há uma opção melhor. Ou seja, adicione isso entre o tamanho, então o que temos que fazer é mudar isso para encher o recipiente. Agora é perfeitamente Line e, a partir daqui, podemos alterar o layout automático ou o nome do layout para um menu como este. Veja, é super limpo e super fácil. Se quisermos alterar algum desses detalhes, precisamos alterá-lo apenas de uma vez. Por exemplo, se quisermos mais espaçamento, como 50, podemos simplesmente pressionar 50, mas, nesse caso, precisamos ajustar manualmente um por um Então, sim, você pode ficar confuso sobre o layout automático, mas isso é muito fácil e vamos passo passo para que você entenda completamente o layout automático. Dentro da seção de heróis, temos que criar esses textos para fazer isso. Eu pressiono T e clico aqui, depois vou para esse tipo de texto. Em seguida, copiarei esse texto diretamente e colarei assim. Em seguida, vou duplicar isso, clicar no texto e pressionar o comando C ou o controle C para copiar e V para colar assim Então, o que temos que fazer é, na verdade, precisarmos dele por quatro vezes, então vou mudar esses textos dessa forma, porque nesta lição, focamos principalmente no autoayou Nas próximas aulas, aprenderemos mais sobre tipografia e cores Então, agora, a partir daqui, como primeira etapa, vamos criar esse botão. Vamos criar esse botão e, em seguida, podemos adicionar espaçamento e centralizá-lo, mas como primeira etapa, vamos criar um botão Como fizemos antes, podemos clicar no texto do botão e pressionar Shift A. Então vamos descobrir a medida. Esses são 16, 60 na parte superior e inferior e a esquerda e a direita são 20, clique no layout automático. Vamos mudar seu nome para BTN assim. A partir daqui, a esquerda e a direita serão 220 e a parte superior e inferior serão 16. Agora, vamos adicionar essa cor a esse botão. Para fazer isso, clique no ícone Rápido no preenchimento e clique aqui, clique neste ícone e clique aqui, clique nesta cor. Criamos facilmente o botão perfeito. Ok. Agora temos aqui o espaçamento, o espaçamento entre eles é 15 e aqui temos 20 Vamos selecionar os itens com espaçamento de 15. Antes de fazer isso, vamos selecionar os itens pressionar Shift A e criar um layout automático, depois mudarei esse layout automático como CTa e agora temos que centralizar esse layout automático Facilmente, eu o tornarei um centro de linha e, em seguida, teremos que colocá-lo no centro para fazer isso. No layout do CtA, definirei a largura como contêiner do campo Em seguida, temos que alterar a altura para encher o recipiente para algo assim. Agora ele se torna central e ainda temos que adicionar o espaçamento para adicionar o espaçamento, vou selecionar o CTa Vamos definir o tamanho intermediário como 20, mas aqui o tamanho do convite é 15. Para corrigi-lo, selecione todos esses itens e pressione Shift A e, em seguida, defina o tamanho do convite Ok, perfeito. Acabamos de projetar a seção de heróis com layout automático. Na próxima lição, vamos criar essa também. Na verdade, se quisermos, podemos simplesmente colocá-lo assim e vamos ver na prévia. Eu pareço com isso 20. Crie a seção de 2ª herói com layout automático: Olá, pessoal. Vamos criar essa segunda seção de heróis com layout automático. Como primeira etapa, clique na moldura e selecione o tamanho da moldura como desktop, coloque-a desta forma e altere o nome da moldura para Hero two com layout automático. Agora, como fizemos antes, vamos adicionar uma grade de layout como essa. Ok, então vamos adicionar layout automático a esse quadro. Eu pressiono Shift A. Agora vou fazer uma lacuna horizontal entre zero e as margens esquerda e direita como uma para T, e a parte superior e inferior serão zero. Agora, vamos ver o que temos que fazer primeiro. Primeiro, temos que adicionar esse plano de fundo. Para fazer isso, vou clicar aqui e clicar aqui e clicar no triângulo, clicar aqui. Então, temos que ver 1.440 de largura e 700 de altura. Acho que 700 é 700, ok. Agora, vou clicar aqui e clicar na imagem Vídeo e depois na imagem. Esta é a imagem, clique aqui e agora temos que adicionar a cor de fundo como branco e a opacidade será 90 Clique aqui, clique em preencher, mude para branco e isso será 90. Agora, você vê que, por causa dessa margem de 140, a imagem ou o plano de fundo está aqui. Temos que selecionar a imagem de fundo. Clique neste ícone de layout automático Igno. Agora podemos adicionar, ajustar como quisermos e, em seguida, renomearei para BG Como eu disse antes, não é necessário, mas eu vou fazer isso. Então eu clico aqui e crio uma moldura. O nome do quadro será hero. Em seguida, adiciono o layout automático selecionando a moldura do herói e pressiono Shift A. Em seguida, defino a largura como recipiente de preenchimento Na verdade, nas aulas anteriores, que me lembro, eu não expliquei os parâmetros. Vamos nos familiarizar com esses parâmetros. Primeiro, temos largura fixa. Se selecionarmos a largura fixa e pudermos adicionar o que quisermos, como 200, o objeto será 200. Vamos fazer com que o objeto preencha em cores e vermelho. OK. Temos que colocar essa imagem de fundo como a primeira camada do quadro. Sem isso, não veremos o resto do quadro. Aqui está o objeto ou moldura em que estamos trabalhando atualmente. Se definirmos como 300, a largura fixa será 300. Se o configurarmos como um recipiente para abraços, ele será amarrado até que outro item toque na moldura Como exemplo, vamos criar um texto e fazer esse texto como hello world, e vamos fazer isso como hello. Agora, a largura é 300 porque é fixa. Mas se selecionarmos o conteúdo do coração, ele será de acordo com o tamanho do conteúdo. Então, como exemplo, vamos criar um retângulo diferente aqui, então será exatamente de acordo com o item dentro desse objeto ou dentro dessa moldura Agora clique aqui e você poderá ver esse espaçamento entre o quadro Isso porque dissemos que os preenchimentos esquerdo, direito e superior inferior eram dez, vamos torná-los zero para que você entenda claramente OK. Agora temos um recipiente de enchimento. Se clicarmos no recipiente de preenchimento, o objeto ou elemento expandirá todo o espaço livre que ele possui. Nesse caso, adicionamos margem de uma parte como nosso layout automático da seção de heróis Esta moldura está dentro desta seção do herói, tem espaço livre entre ela e se expandirá até que a margem esquerda atinja essa moldura. É isso mesmo. A aqui como largura administrativa e adicione a largura máxima. Se clicarmos na largura do administrador aqui, podemos adicionar a largura mínima. Se fizermos com que a largura mínima seja 200 e façamos com que a largura mínima seja 700, agora achamos que reduzimos isso assim Quando o reduzimos, o elemento ou a moldura não encolherá após a largura mínima de 700 atingi-lo Se tivermos uma largura máxima de 700, o elemento terá uma largura máxima de 700. O elemento terá apenas uma largura de 700. Então, eles são um pouco avançados, mas você pode se lembrar disso. Em design responsivo, será útil. Agora, isso se aplica à altura dois. Dissemos isso como solução, podemos adicionar uma solução com um recipiente de enchimento, um recipiente abraçar e hortelã x altura Vamos começar o trabalho. Primeiro, vou remover esses objetos desnecessários, depois vamos remover a cor de preenchimento e selecionar a seção do herói e definir com um recipiente de preenchimento, e temos que remover esse máximo e a média dessa forma. Então a altura será 700. OK. Temos que definir esse tamanho de quadro como 1.440 OK. Agora, aqui, temos que adicionar esse logotipo e o texto. Vou apenas pressionar o Comando C para copiar isso e o comando V para colá-lo. Depois, selecionarei todos esses itens do menu e os copiarei porque não precisamos fazer o estilo e também temos esse botão No botão, eu apenas copio o texto. O texto é branco, então vamos começar com o botão. Aqui temos o botão, isolamos o botão e pressionamos Shift A. Então vamos descobrir o botão com o oi, que tem 16 por 16 e 37 por 37 como tamanho Aqui está a moldura do botão. Vamos renomeá-lo como VTN e preenchê-lo com a cor preta. Então, aqui, temos que adicionar 37 como preenchimento esquerdo e direito e 16 como preenchimento superior inferior, agora temos que reduzir o canto para 60. O botão Agora, o que precisamos fazer é selecionar esses itens do menu e, a partir daqui, temos os itens do menu. O item de menu entre os tamanhos é 25, venha aqui desta forma e selecione os itens do menu e pressione Shift A para criar um novo layout automático ou agrupe-o e adicione o layout automático. Então, no layout automático, temos que definir o layout horizontal. Em seguida, temos que adicionar o tamanho entre 25. Ok. Agora temos que selecionar todos esses três itens e pressionar Shift para criar um grupo e adicionar uma moldura. Em seguida, teremos que fazer um layout horizontal. Agora vai ficar assim. Agora, o que podemos fazer é, se quisermos, renomear isso. Vamos renomear isso como menu e aqui itens de menu como este Em seguida, clique no layout do menu e vamos fazer com um recipiente de enchimento. E então temos que definir este item entre o tamanho como automático, pressionar enter, na verdade, temos que selecionar este e definir o item entre o tamanho como automático, assim. Então, temos que colocá-lo no centro para torná-lo no centro. Temos que clicar aqui assim. O menu foi criado e agora aqui temos a margem superior adicionando a passagem superior 25. Vamos fazer com que seja 25. Selecione isso e clique aqui a partir daqui, torne-o como 25. Perfeito. Agora temos que adicionar essas boas-vindas à minha seção de finanças , elas estarão dentro desta seção de heróis. Vamos copiar todos os que estão na foto aqui. Eu apenas copio daqui assim. Para esses botões, temos que criar um layout diferente, vou apenas copiar o texto e também copiar apenas este texto. Vamos começar com os botões novamente. Antes de fazer isso, vamos descobrir o botão entre os lados. São 18, 18, 24, 24. Clique aqui na mudança de fase A para o layout automático e isso será 24 e aqui será 18. Em seguida, a cor de preenchimento é preta. Na verdade, temos que adicionar que a cor de preenchimento será preta e, na aparência, radicalizar os cantos em 60 Então temos que fazer o mesmo com isso, botão Saiba mais. Res shift A. Então, vamos adicionar primeiro o traçado, clique aqui e o tamanho do traço será dois. Acho que é C, vamos ver. Sim, é um. Então, vamos fazer isso como um. OK. Então tem a mesma largura de altura Sim, não, tem largura aumentada para 33, 33, 33, 18, 80, 35, 30 Vamos fazer com que isso não seja esse, como 35, 18. E vamos fazer o mesmo aqui. Clique neste botão Saiba mais e aqui, faça com que seja 35 18 reduza a quantidade para sentar. Em seguida, destaque e destaque esses botões, pressione Shift A e, em seguida, transforme o layout em layout horizontal Espero que você entenda claramente essa opção com a qual estou trabalhando. Se você não entender primeiro, apenas brinque com isso. Você tem que tentar de novo e de novo para aprender. No começo, eu fiz o mesmo. Se você tiver alguma dúvida, basta me perguntar na mensagens ou na seção de comentários. Aqui, temos espaçamento como 30, aqui, temos espaçamento como 21 Veja, quando criamos design sem layout automático, podemos obter números exatos. Como exemplo aqui, temos a almofada inferior em 19, mas a parte superior em 18. Também aqui, temos 21 como tamanho intermediário, mas deveria ser 20. Com o layout automático, podemos facilmente selecionar aqui e alterar o layout automático para dois. É por isso que aprender a camada Oto será uma grande vantagem. Em seguida, vamos selecionar todos esses itens e pressionar Shift A para criar um grupo. Vou renomear esse grupo como ctA e t N s BTN um, BTN, dois, então agora vamos fazer isso entre o tamanho 30 São 30? Só aqui 30, aqui estão 20. Para esses 20, basta selecionar apenas esses dois e mudamos, em seguida, alteramos isso para. OK. Agora, o que temos que fazer é colocá-lo no centro. Para fazer esse centro, eu vou aqui e defino a altura como um recipiente de enchimento como este. Em seguida, definirei esse alinhamento como alinhar ao centro esquerdo. Ok, está centralizado e agora temos que adicionar essa imagem. Portanto, essa imagem também vem do lado de fora do nosso design, então ela não deve ter Outlet ou deve ignorar o Autoao Então, primeiro, eu crio um retângulo como este e vamos fazê-lo com 710 e como 610 Ok, então eu posso fazer com que ele ignore Autoao e coloque-o acima assim Então eu posso dar gorjetas em qualquer lugar que eu quiser. Então, por enquanto, vamos adicionar uma imagem a ele. Clique aqui, clique em Imagem de vídeo e selecione a imagem. Aqui está o único. Clique aqui e adicione. Então, atualmente, ele não está sendo exibido, então temos que colocá-lo assim e clicar nele e alterar o campo para recortar e alinhá-lo assim OK. A primeira parte está concluída. Na verdade, temos que colocar essa imagem, essa. OK. Agora parece bom. Na verdade, temos que colocar isso saber o que temos que fazer é adicionar esta seção. É fácil adicioná-lo, eu crio um novo quadro. Vamos criar um novo retângulo como esse, ele estará abaixo da seção do herói, não dentro do herói Agora, isso deve ser, vamos colocá-lo aqui e colocar a seção de heróis acima disso. Encontrei o problema em nosso quadro principal, temos que definir o layout como layout horizontal para layout vertical. OK. Agora está aqui. Agora vou alterá-lo com a altura 1.440 a 700, não 700 é o tamanho 270. Vamos testar 270. OK. E para este, temos que fazer o mesmo. Vamos clicar em Ignotayo e colocar assim. Ok, então mude a cor do campo para isso agora, o que temos que fazer é adicionar o primo assim e vamos mudar o nome desse quadro para realçar, acho que para o destaque de Sakura C. Em seguida, selecione-o e pressione Shift A para criar o layout automático e definir com o recipiente de preenchimento de traços E a altura será de 270 a 70 assim. OK. Agora temos que adicionar essas informações. Por enquanto, vou copiar este e colocar a moldura e colocá-la dentro da moldura e temos que fazer isso sobre a moldura. Sem fazer isso, não veremos os detalhes da moldura. Em seguida, para esse layout de quadro, vou colocá-lo como uma linha à esquerda no centro Ok, agora temos que criar esses três itens, selecionar este e vamos selecionar este e copiar, colar assim. Copie assim. Em seguida, selecionarei esses dois objetos e pressionarei Shift A e, em seguida, verificarei o tamanho da rainha de entrada como 15, selecionarei este e definirei o tamanho da rainha de entrada como 50 OK. E também torne-o central. Vamos fazer do centro. OK. Agora, vamos fazer o mesmo com este também. Como esses dois objetos, pressione Shift A e coloque-o no centro de 15. Agora, selecionarei esses dois objetos e pressionarei Shift A para criar um novo layout automático e definir o layout horizontal dessa forma. Agora vou selecionar esse quadro de destaque e definir o layout automático como layout horizontal. OK. Então temos que adicionar este. Vamos adicioná-lo e selecionar esses dois objetos, pressionar Shift A e defini-lo como centro de layout vertical. Agora vamos ver entre os lados. O lado entre os lados é 57, destaque todos esses quadros, na verdade, posso colocar isso dentro desse quadro e selecionar esse quadro e defini-lo como 57, então vou converter esse texto em layout automático pressionando Shift A e clicando no quadro principal e definindo com como recipiente de preenchimento, e aqui temos automático como tamanho intermediário. Está perfeitamente encaixado. Agora, se você quiser, pode renomear, mas por enquanto, eu não vou renomear, então aqui está, aqui está nossa segunda seção de heróis com layout automático O design, ficará assim. Agora é sua vez, você precisa adicionar um layout automático a este herói, seção de três heróis, brincar com Figma e tentar fazer isso Nos vemos na próxima lição. 21. Crie a seção de 3ª herói com layout automático: Olá, pessoal. Você conseguiu fazer um bom trabalho? Se não, vamos fazer isso aqui e primeiro, temos que criar um quadro. Clique na moldura, defina os tamanhos, a área , coloque assim e adicionaremos a grade de layout. Em seguida, clique nessa grade de chamadas. Na verdade, não precisamos do layout. Mas, com o layout, será fácil identificar para onde o objeto irá. Então, primeiro temos que adicionar esse menu para fazer isso, pressionarei Shift A para adicionar layout automático a esse quadro. Vou renomear esse quadro como 03 com layout automático. Em seguida, removerei todos esses detalhes e aqui vou defini-los como 140, nossa margem esquerda e direita, então vou definir isso como layout vertical em resolução, alinhado ao centro Agora, temos que adicionar esse logotipo. Para adicioná-lo, precisamos criar um novo quadro, clicar no ícone desse quadro e criar um quadro. Esse tamanho de quadro será a altura 223. Vamos fazer a altura 223 com este recipiente de enchimento. OK. Agora temos um problema. Não, podemos resolver esse problema. O problema é que temos essa linha, mas nosso quadro só virá aqui até aqui. Portanto, a linha não chegará ao final desse quadro, mas não será o problema, pois podemos adicioná-la à imagem de fundo. OK. Agora temos que adicionar esse logotipo. Para adicionar esse logotipo, criarei um retângulo como este Na verdade, precisamos adicionar layout automático a esse quadro, ardósia do quadro e pressionar Shift A para adicionar layout automático Então, a partir daqui, crie propriedades e sua altura deve ser 223 pessoas OK. Então aqui temos que adicionar esse logotipo. O tamanho do logotipo é 192 como largura e 92, e vamos torná-lo em altura como preenchimento agora adicione esse logotipo a esse retângulo como este A parte está concluída e, como segunda parte, temos que adicionar este conjunto de itens principais. Primeiro, copiarei menu inicial e depois sobre o serviço elétrico e entrarei em contato conosco. Vou copiar todos eles para aqui. Então, para esta casa, temos que adicionar essa pequena seta. Vou copiá-lo daqui. Em seguida, selecionarei a seta e o texto inicial, o texto inicial, depois a seta pressionarei Shift A. Em seguida, definirei o layout como layout vertical e, no intervalo, o tamanho será zero. Vamos ver qual é a diferença entre 66 e isso. OK. Então, vou começar com um abraço C como esse Então eu tenho que colocá-lo na frente assim. Em seguida, selecionarei todos esses itens de menu e pressionarei Shift A para criar um novo layout automático de item de menu. E vamos ver o tamanho em dez, é 50 no meio, o tamanho tem 50 assim. OK. Agora temos que criar essa seção de uso. É muito simples. Primeiro precisamos do circo. Vamos copiar esses dois círculos daqui e colocá-los aqui. OK. Então, o que eu faço é, antes de adicionarmos o ícone do peão, colocar esses dois no centro Então, para fazer isso, pressionarei Shift A e adicionarei o layout automático. Mas com o layout automático, não podemos fazer isso porque os itens não entrarão em colapso ou os itens não os adicionarão na frente de outro item no layout automático. Temos que clicar nesse layout do Igno Auto. Vou selecionar esses dois círculos e clicar em Igno Autoayout Então eu posso colocá-lo no centro assim. Então, o que temos que fazer é acessar este ícone móvel, vou copiá-lo daqui. E selecione essa moldura, coloque-a na moldura dentro da moldura, e eu farei o mesmo por ela também. Em seguida, selecionarei todos esses três itens e os colocarei no meio assim. OK. Agora temos um problema. Essa moldura não funciona como queremos, então vou colocá-la fora da moldura e removê-la. Em seguida, selecionarei todos os três itens e pressionarei Command G para o grupo E. Em seguida, pressionarei Shift A para adicionar layout automático a ele. Então, o que temos que fazer é clicar nessa data de quadros ou vamos renomeá-la como um menu como este e aqui os itens do menu aqui, ícone do telefone, então temos que adicionar esses dois itens Vou apenas adicioná-los desta forma e selecionar os dois, pressionar Shift A, depois adicionar layout vertical e bom. Agora posso selecionar esses dois itens e pressionar Shift A para fazer la adicionar Otolaa a esta seção No meio do tamanho está a toalha, então eu apenas troco por uma toalha. OK. Tudo bem. Agora eu seleciono esta moldura e defino o item entre os tamanhos de Otto e ela distribuirá tudo igualmente OK. Agora temos que adicionar essa imagem de fundo. É muito simples. Basta clicar no retângulo e definir a largura como 1.440 e vamos ver que a altura Vamos adicionar altura como 577. OK. Agora, o que precisamos fazer é clicar neste IgnootoaVocê pode, e agora podemos adicionar Clique aqui no vídeo, salte a imagem assim. OK. Então temos que adicionar esse traço. Então, vamos copiar a cor do traço e clicar aqui. Clique em PAs e interiores, set-top e dois, então essa será essa cor OK. Agora temos que criar essa seção. Vamos criá-lo como primeira etapa, vamos criar um quadro. Na verdade, não precisamos da moldura aqui, mas vou copiar essa parte primeiro, colocá-la assim. Essa parte, como esse texto , ou o botão, assim. Vou clicar na moldura e temos que colocar esse texto à esquerda. Clique assim e ele irá para a esquerda e aqui temos um problema. Temos 100% de garantia na parte inferior, mas ela deve estar na parte superior. Eu o seleciono e clico aqui e o coloco no topo. Então temos esse botão no meio, na parte inferior. Ok, agora vou clicar em Shift A para criar um botão. Portanto, os detalhes do botão serão 25, 25, 30, 30. OK. Vamos fazer com que seja 30 como esquerda e direita, 25 como parte superior e inferior e, em seguida, preencha a cor. Vamos adicionar essa cor de preenchimento. Ok, bom. Agora temos que verificar o meio. Tamanho Para adicionar entre os tamanhos, selecionarei todos esses itens e pressionarei Shift A, então o tamanho intermediário será. OK. Na verdade, isso deveria ser zero. Este é o preenchimento superior e inferior ou o preenchimento vertical deve ser de dois L. Agora temos que fazer esse centro. Para criar esse centro, temos que aplicar o layout automático a isso. Então, para fazer esse centro, precisamos ter uma moldura que tenha tamanho nessa imagem de fundo porque atualmente essa imagem de fundo está ignorando o layout automático Portanto, devemos ter uma moldura que não ignore o layout automático, então eu crio uma moldura e pressiono então essa altura será 577, então ela será preenchida assim Em seguida, colocarei esse quadro dentro de um quadro recém-criado como este. Agora está no centro. Agora eu posso renomear isso como CTA ATN, assim. Em seguida, selecionarei este conjunto de alinhamento central à esquerda, assim Aqui, recipiente elétrico Ok. OK. Agora está centrado na fábrica. Criamos com sucesso a seção dois do terceiro herói. Vamos ver o modo de visualização. Nas próximas aulas, usaremos o layout automático para criar sites mais complexos. Criamos apenas três designs. Se você acha que o autolayout é tão complicado, basta pesquisar algum design popular no Google e tentar imitar e criar esse design no Figma Dessa forma, você aprenderá mais sobre autoayout e como usar o autoayout de forma Nos vemos na próxima lição. 22. Introdução ao princípio de design de UI/UX: Olá, pessoal. Até agora, aprendemos sobre os fundamentos do Figma e começamos a nos familiarizar com a ferramenta e a criar alguns designs com os recursos do Figma Agora vamos nos concentrar nos princípios de design do YX. Quando criamos um site personalizado, devemos ter uma ideia sobre os princípios do UIUX, porque se não aplicarmos os princípios e conceitos do UIUX ao nosso design, o propósito do design ou do site Nas próximas aulas, aprenderemos sobre hierarquia visual, layout, tipografia, teoria das cores e precisamos conhecer os princípios de UX para criar Nos vemos na próxima lição. 23. Hierarquia visual: Olá, pessoal. Imagine entrar em uma nova sala. Você precisa saber onde procurar primeiro e como encontrar uma maneira de contornar. Isso é exatamente o que a hierarquia visual faz no site. Então, vamos detalhá-lo. hierarquia visual é a forma como organizamos as coisas no site para mostrar o que é mais importante Algumas coisas precisam chamar a atenção imediatamente , enquanto outras podem ser notadas posteriormente. Quanto melhor a hierarquia, mais fácil é usar o si Adicione hierarquia visual ao nosso design, temos que considerar principalmente três coisas O primeiro é o tamanho, coisas grandes chamam a atenção primeiro. Pense em uma grande manchete de jornal. Isso se destaca. O mesmo vale para sites. títulos ou botões importantes devem ser maiores do que outros itens na página Então, temos que considerar a cor e o contraste. Cores brilhantes chamam sua atenção; cores escuras ou opacas, cores escuras ou opacas se você quiser que algo se destaque, como um botão, use uma cor que Por exemplo, um botão vermelho sobre fundo branco será notado rapidamente. Então, devemos considerar o espaçamento e o posicionamento. Temos que dar espaço às coisas importantes. Quando adicionamos mais espaço ao redor do elemento, ele se destaca mais. Se as coisas estiverem muito próximas, pode ser difícil se concentrar. A hierarquia visual guia seu usuário pelo seu site. Ao ajustar o tamanho, a cor e o espaçamento, você pode mostrar a eles o que é importante sem que eles percebam 24. Aprenda sobre tipografia: Olá, pessoal. A tipografia é simplesmente como escolhemos uma fonte organizada em um site para torná-la bonita e fácil Ele desempenha um papel importante na criação de uma ótima experiência para o usuário. Aqui estão algumas coisas rápidas que você deve saber sobre tipografia Tipo de letra. Isso se refere ao design da fonte, como a fonte area times Nur Rome ou Roboto Uma fonte é uma coleção de caracteres, letras, números e símbolos que compartilham o mesmo tipo de face e estilo E. Em seguida, temos a largura da fonte. Isso se refere à espessura da fonte, como normal antiga ou. Então temos fonttyle. Isso inclui variações como itálico, oblíquo ou condensado. Ao escolher um tipo de letra para seu site, sempre escolha essas coisas em primeiro lugar, sobre Escolha uma fonte que seja fácil de ler nas telas. Evite sobrepor fontes decorativas ou complexas. Consistência: use um número limitado de fontes em todo o site para manter a coesão Minha recomendação é usar apenas dois tipos de fontes, uma para título e outra Então, você deve considerar a identidade da marca. Seu tipo de letra deve reproduzir a personalidade e os valores da sua marca Então, temos que considerar o contexto. Isso significa que o conteúdo e a finalidade do seu site influenciarão o tipo apropriado , então aqui estão algumas dicas para uma boa tipografia Use tamanhos de fonte diferentes com um estilo para criar uma hierarquia visual clara garantir o espaçamento adequado entre letras e palavras para Crie contraste entre o texto e o plano de fundo para melhorar a legibilidade Mantenha as linhas de texto em um tamanho razoável para evitar cansaço visual. Em seguida, escolha cores de texto que sejam fáceis de ler e complementem o plano de fundo. tipografia é a chave para tornar seu site fácil de ler e aparecer visualmente 25. Aprenda sobre fonte: Quando se trata de fontes, você sempre ouvirá falar sobre serif e Cancerif A fonte Serif tem pequenos traços no final das letras. Pense nos neurônios do tempo ou na Geórgia. Eles são ótimos para criar uma sensação tradicional e formal e costumam ser usados para longas passagens de texto, como em livros ou blogs Por outro lado, Sanserifont não tem aquelas antenas extras de Etroke, Helvatica e Robot aquelas antenas extras de Etroke, Helvatica e Robot são exemplos. Esses telefones são ousados, modernos e ótimos para títulos ou manchetes Eles também funcionam bem em dispositivos móveis porque são claros e fáceis de ler. Vamos ver que tipo de marca e que tipo de design usará esses telefones Sans e Sanserif Portanto, lembre-se sempre da legibilidade do sabor. Aqui. Aqui. 26. Como encontrar fontes usando fontes do Google: Olá, pessoal. Agora sabemos sobre tipografia Vamos descobrir onde e como encontrar tipografia de escrita para seus projetos O melhor lugar é o Google Phones. Você pode acessar os telefones do Google acessando phons.google.com e acessará esta página Aqui, temos muitas fontes para escolher. Então, podemos simplesmente rolar para baixo e encontrar as melhores fontes ou podemos usar esses filtros para filtrar as fontes. Vamos encontrar fontes para títulos. Aqui, vou definir o tamanho do título como 60. Vamos testar 60. Aqui, podemos digitar o título real. Acrescentarei algo como seu guia para um estilo de vida saudável e equilibrado e, em seguida, pularei esse idioma Aqui, temos o tipo Serif e sensori, então vou selecionar Agora temos as fontes filtradas, agora podemos verificá-las e encontrar a melhor fonte Aqui, temos essa última fonte, então vou clicar nela e então podemos descobrir mais sobre essa fonte. Então, se adicionarmos essa fonte aos parágrafos, ela ficará assim, e nosso plano é adicioná-la ao cabeçalho Então, agora vou clicar neste botão de fonte G e ele será adicionado à seção de fonte selecionada e, novamente, irei para fontes. Agora preciso encontrar uma fonte para os parágrafos. Para fazer isso, adicionarei esse tipo de parágrafo aqui. Em seguida, vamos alterar o tamanho para 20 e selecionaremos o telefone sensorial Aqui, podemos verificar as fontes adequadas ao nosso projeto. Encontrar essa fonte sempre depende do tipo de site que você está criando. Nesse caso. Este é um site para preparadores físicos, então vou selecionar esse sentido de trabalho e aqui, podemos conferir os detalhes Então, se adicionarmos isso, ficará assim. Agora podemos clicar neste telefone Gate. Depois de clicar aqui, posso encontrar as fontes que selecionei. No Figma, temos a biblioteca de fontes do Google. Vou abrir nosso arquivo Figma e aqui, vamos selecionar este e eu clicarei nessa fonte e aqui temos a fonte Aqui, podemos selecionar fontes do Google e agora podemos obter as fontes do Google. Se selecionarmos essas fontes RL, podemos encontrar fontes E. Essa é a maneira mais fácil de encontrar fontes para nossos projetos. Vou até as fontes e se você quiser conferir as fontes SEI, podemos clicar aqui e teremos a fonte SE que podemos usar em nosso site. Em algumas lições, usaremos este site de fontes do Google para selecionar fontes para nosso projeto. 27. Como usar a psicologia das cores: As cores desempenham um papel crucial no design da web, influenciando a forma como os usuários percebem seu site e interagem com ele O que é psicologia das cores? psicologia das cores é o estudo de como as cores afetam nossas emoções, modos e comportamentos. Cores diferentes evocam sentimentos e associações diferentes Por exemplo, o vermelho é frequentemente associado a energia, moda e entusiasmo, enquanto o azul está ligado à confiança e confiabilidade. É por isso que marcas como a Coca Cola usam vermelho e marcas como Linked In e bancos mais confiáveis usam azul como suas cores principais Entender a psicologia das cores pode ajudá-lo a criar sites que ressoem com seu público-alvo e evoquem as emoções desejadas Aqui estão algumas dicas. Escolha cores que se alinhem à personalidade da sua marca e quais emoções você deseja evocar em seus usuários Garanta que seu texto e gráficos sejam fáceis de ler e visualmente atraentes Experimente diferentes esquemas de cores para ver o que funciona melhor. A teoria e a psicologia das cores são aspectos essenciais para o web design. Ao entender como a cor afeta nossas emoções e comportamentos, você pode criar um site que não só seja visualmente atraente, mas também emocionalmente Confira este guia de emoções coloridas. Neste guia, você verá muitas marcas populares e as cores de suas marcas. Além disso, você verá detalhes sobre emoções, humor e comportamentos dessas cores. download desta imagem na o download desta imagem na seção de recursos e estude-a ao criar um site que não tenha a cor da marca ou se tentar redesenhar a marca, use este guia emocional cores e crie adequadas à marca Nos vemos na próxima lição 28. O que são regras 60-30-10: Em design de interiores, temos um conceito chamado regra 603010. Podemos aplicar essa regra 603010 ao nosso site personalizado. Essa regra ajuda a fazer com que seu site pareça equilibrado e atraente. O que é a regra 603010? A regra 603010 divide as cores em seu design para harmonizar. Veja como funciona. 60% é sua cor dominante. Ele deve cobrir a maior parte do seu site e definir o clima geral. 30% é sua cor secundária. Ele suporta a cor dominante e a profundidade adicional, 10% é a sua cor de destaque Use-o como botão de destaques um recurso importante para chamar a atenção. Vamos descobrir como usar isso. Comece escolhendo suas paletas de cores, selecione uma cor dominante para sua marca, uma cor secundária que combine bem com ela e uma cor de destaque que se destaque, depois use a cor dominante para o plano de fundo e a selecione uma cor dominante para sua marca, uma cor secundária que combine bem com ela e uma cor de destaque que se destaque, depois use a cor dominante para o plano de fundo e a área principal. A cor secundária funciona bem para barras laterais e título. Reserve a cor de destaque para os botões e. Seguindo essa combinação de cores, mantenha seu site limpo e organizado, evitando uma sensação caótica Depois de aplicar a regra 603010, obtenha feedback de usuários reais veja como eles se sentem em relação à cor e ao design Em seguida, faça as alterações necessárias. Além disso, lembre-se de que isso é uma regra, o que significa que podemos violar regras. Se você acha que a regra 603010 não é a melhor para algumas das seções do seu site, você pode alterá-la Vamos ver alguns exemplos de como usar efetivamente essa regra 603010 Você vê que a regra 603010 é um ótimo guia para criar um web design atraente Ao usá-lo, seu site se sentirá equilibrado e envolvente. 29. O que é design centrado no usuário: Olá, pessoal. Vamos falar sobre um conceito muito importante em web design, design centrado no usuário e por que ele é crucial para sites Design centrado no usuário significa criar um site que se concentre no que os usuários precisam e desejam em vez de projetar para o que você acha que parece bom Você projeta para tornar as coisas fáceis e úteis para as pessoas que visitam o site. Vamos pensar nisso como a construção de uma loja. Você organizaria tudo de uma forma que tornasse mais fácil para os clientes encontrarem o que estão procurando. Se as coisas forem difíceis de encontrar e confusas, as pessoas sairão da loja sem comprar nada A mesma ideia se aplica aos sites. Um site deve resolver um problema ou atender a uma necessidade do usuário. Se isso não acontecer, os visitantes sairão rapidamente. Aqui estão alguns motivos pelos quais focar no usuário é tão importante. Quando você facilita a navegação no site, as pessoas podem encontrar rapidamente o que estão procurando. Isso significa que mais pessoas permanecem no seu site. Quando os usuários sentem que o site foi feito para eles, é mais provável que permaneçam mais tempo e explorem mais. Se o usuário conseguir encontrar facilmente o que precisa, como produtos ou informações, é mais provável que ele aja, seja vincular algo, inscrever-se ou entrar em contato com você Vamos ver um exemplo. Digamos que você crie um site para uma mercearia local. Se a maioria dos clientes vier comprar arroz, vegetais e ervilha, certifique-se de que sejam fáceis de encontrar na página inicial Você também adicionará uma barra de pesquisa clara e talvez até sugira produtos relacionados para facilitar as compras. Vamos ver outro exemplo. Se os pais usam um site para verificar as notícias da escola ou os resultados dos exames, esses links devem ser simples de encontrar na página inicial com rótulos claros Aqui estão algumas dicas simples para garantir que seu site se concentre no usuário. Antes de projetar, pergunte a si mesmo quem está visitando o site? O que eles querem fazer? Saiba quando seu público é fundamental. Como você pode fazer uma pesquisa sobre seus concorrentes e descobrir que tipo de design e tática eles usam em seus sites. Então, os usuários nunca devem se sentir perdidos. Use rótulos e botões de menu claros que os ajudem a se movimentar facilmente pelo site. Além disso, muitos usuários em todo o mundo também usam o telefone . Certifique-se de que seu site também funcione bem em dispositivos móveis. Além disso, não confie apenas na sua própria opinião. Mostre o site para usuários reais e veja como eles interagem com. O feedback deles ajudará você a melhorar o design. No centro de um site de sucesso está o usuário. Ao se concentrar no que eles precisam e garantir que o site seja fácil de usar, você criará um site mais eficaz fará com que os visitantes voltem. Lembre-se de que o design não se trata apenas da aparência de um site, mas de como ele funciona para as pessoas que o usam. 30. O que é princípio do KISS: Olá, pessoal. Vamos falar sobre o princípio do beijo. Suporte de beijo para manter as coisas simples, estúpido. Quando criamos sites, precisamos garantir que o usuário encontre o que está procurando rapidamente e sem confusão. Se um site for muito complicado, o visitante pode ficar frustrado e sair Portanto, seguindo o princípio do beijo, certifique-se de que nosso site carregue rapidamente, seja fácil de navegar e tenha um conteúdo claro. Então, como se inscrever em web design. Vamos dividi-lo em algumas etapas. Primeiro, simplifique o layout. Não sobrecarregue suas páginas com muitos elementos. Um layout limpo e simples facilita que os usuários se concentrem no que é importante. Use uma navegação clara. Mantenha seu menu e link simples e diretos. Não tenha muitas categorias. Eu me limito ao básico para que os usuários não se percam. Use menos cores e fontes. Um esquema de cores simples e uma a duas fontes geralmente são suficientes para profissionais. Muitas cores ou fontes podem fazer com que o site pareça confuso e difícil de ler Nas aulas de tipografia e psicologia das cores, aprenderemos sobre a vantagem de ter duas fontes e a regra 603010 para manter a harmonia de cores do nosso site Então você precisa se concentrar no conteúdo essencial. Mostre primeiro o mais importante. Por exemplo, em um site de saúde, o paciente pode querer saber como marcar uma consulta ou procurar um médico. Facilite a identificação dessas informações e teste com usuários reais. Às vezes, o que achamos simples ainda pode ser confuso para os outros. Sempre teste seu design com usuários reais para ver se eles conseguem navegar facilmente pelo site e entender o conteúdo. Pense na página inicial do Google. O Google é um dos sites mais simples que existem. Apenas um logotipo, uma barra de pesquisa e botões. No entanto, é um dos sites mais eficazes já criados. Por quê? Porque está ligado ao princípio do beijo. 31. Aprenda sobre o escopo do projeto: Olá, pessoal. Vamos falar sobre o projeto ICO. Pense no Projeto ICoV como um mapa da jornada do seu site. Isso ajuda você a se perder, cometer erros ou demorar muito para terminar seu site. Saber o que é necessário antes de começar a projetar é essencial. Imagine construir uma casa. Você não começaria sem saber quantas salas são necessárias qual material usar? O mesmo vale para o web design. O Projeto iCOPE ajuda você a entender as necessidades dos clientes Eles querem um site simples ou grande, um cronograma Quanto tempo você tem para terminar? Em seguida, orçamento e, em seguida, características-chave, como haverá um blog, loja online ou sistema de reservas? Na próxima lição, começaremos a definir nosso projeto ICO, nossa primeira web. No entanto, às vezes, mesmo com a discoteca do projeto, desafios acontecem. Se um cliente quiser mais salários ou recursos posteriormente, isso não acontecerá conforme o planejado. Para evitar esse tipo de problema, precisamos definir uma expectativa clara desde o início Informe a eles o tempo e custo para adicionar novos recursos posteriormente. Criar um contrato é a maneira de lidar com esses problemas. 32. o que é um quadro de humor: Olá, pessoal. Vamos falar sobre os mood boards e por que eles são tão especiais para encontrar design, inspiração e entender o que os concorrentes estão fazendo. Então, o que é um moodboard? Um moodboard é como uma colagem digital que mostra o estilo e a sensação que você deseja É uma ótima maneira de fazer um brainstorming visual antes de começar a criar Por que precisamos de um quadro de humor? Começar do zero pode ser difícil. Um moodboard ajuda você a reunir inspiração de design de outros sites e dos sites de seus concorrentes Além disso, como banners, anúncios relacionados à marca da sua empresa ou até mesmo outro design que desperte sua criatividade É fácil se deixar levar pelas novas tendências. Um quadro de humor mantém você no caminho certo lembrando sua visão original Antes de projetar, veja o que seus concorrentes estão fazendo. Um quadro de humor permite que você crie e compare seu design, para que você possa criar algo ainda melhor. Então, vamos descobrir como criar um moodboard. Primeiro, confira o site em sua área. Do que você gosta ou não gosta? Em seguida, faça capturas de tela e salve as imagens que você está inspirando Então, onde encontrar inspiração de design Create Moodboard. Você pode verificar diretamente site do seu concorrente e pesquisar designs sites em sites como Dibble, Pinterest, Figma Community Em breve, criaremos um moodboard e uma inspiração de design bacana para criar nosso primeiro site 33. Como criar uma paleta de cores: Olá, pessoal. Agora conhecemos a teoria e a psicologia das cores. Vamos criar nossa primeira paleta de cores. Eu uso este site coolers.co para gerar a paleta de Acesse este site, clique em É o gerador, e eu removerei este aqui. De acordo com a regra 603010, precisamos apenas de três cores Vou remover dois deles. Agora temos três cores. Vamos dar nosso exemplo como site imobiliário. Agora estou na imagem do guia de emoções coloridas, então adicionarei o URL dessa imagem na seção de recursos. Neste site imobiliário, a principal imagem da marca será a confiança e podemos considerar a clareza De acordo com essa imagem colorida, você pode selecionar uma das cores azul e outra como laranja. Se você ainda tiver dúvidas, podemos acessar o Google e pesquisar algo como design de banner realista Em seguida, vou ver essas imagens nas imagens, podemos ver que muitas delas têm a cor azul e algumas delas têm algumas cores com o azul escuro e o laranja. Vamos dar outro exemplo. Agora, acho que precisamos de cores de marcas ou de sites para negócios de sorvetes. Nesse caso, podemos selecionar o vermelho. Tem a emoção e será perfeito. Como podemos selecionar essa cor amigável. Se formos aqui e vamos pesquisar um banner de negócios de sorvete aqui temos , aqui temos algumas imagens e muitas delas têm a cor vermelha. Agora vamos ver nosso primeiro exemplo de design, que será o imóvel. Vou voltar e aqui, vou selecionar esse design para que possamos obter essa cor azul para fazer isso. Vou até este coolers.co e coloco neste lado, depois clico aqui e coloco neste lado, minimizo isso e agora temos nossa primeira cor azul para selecioná-la, clico aqui e aqui, temos essa ferramenta temos essa Basta clicar nele e agora posso selecionar a cor assim. Essa será a cor azul e aqui, precisaremos ter cores brancas. Vou definir isso como cor branca. Em seguida, clicarei neste registro de alternância para registrar este item, que essa cor não mude, então eu também registrarei este Então temos que encontrar nossa terceira cor. Para encontrar nossa terceira cor, pressionamos Shift no teclado, podemos ver esse tipo de alteração na cor, mas no nosso caso, podemos selecionar a cor amarela Além disso, se formos a esse guia de emoções coloridas, podemos selecionar essa cor verde, mas, nesse caso, vamos selecionar essa cor laranja. Aqui, vou selecionar aqui e selecionar o seletor, selecionar a cor laranja Se eu quiser, posso mudar a cor por enquanto, vou colocar assim. Agora eu aumento o tamanho dessa janela, aqui estará nossa árvore de cores. Agora, há um problema. Quando selecionamos a cor, temos que sempre verificar o contraste e a legibilidade Existe uma ferramenta para verificar esse contraste. Para fazer isso, acessarei color.adob.com e você acessará Aqui, vou clicar em Vs e, em seguida, temos essa ferramenta de acessibilidade, caixa de seleção, então eu apenas a seleciono e cruzo esta Aqui, podemos verificar o contraste e a legibilidade das cores Agora eu venho aqui e copio esse código de cores e vamos colocá-lo como cor de texto. Em seguida, mudarei a cor de fundo para branco B F aqui. Agora, a taxa de contraste está boa, mas se usarmos essa cor, será um teste pai para 17 fixel e Blofon Você verificará aqui se ele falhou. Se aumentarmos, o contraste da cor será aprimorado e o teste será acelerado. Agora temos que mudar essa cor um pouco mais escura. Vou colocar assim. Isso. O motivo é que, se escolhermos essas cores em nosso site, teremos que adicionar um parágrafo a essa cor azul. Eu copio esse código de cores e venho aqui. Então eles veem que a taxa de contraste está boa e, vamos mudar, o fundo ficará ótimo. Em seguida, verifique também com essa cor laranja. Para fazer isso, definirei essa cor de texto como esta e vamos adicionar essa cor. Vamos adicionar essa cor como cor B. OK. Eu também passei no teste, mas se isso ficar mais brilhante, ficará, também passará no sabor. Vamos mudar a cor do texto e a cor do plano de fundo. Vou funcionar perfeitamente e vamos ver se funciona com a cor branca. Vamos ver. Quando adicionamos isso à cor do texto e à cor de fundo como branco, isso significa que só podemos usar essa cor laranja com cores azul escuro. Quando você seleciona a paleta de cores para seu site, sempre verifique o contraste das cores e isso ajudará a melhorar a legibilidade do nosso Lembre-se também de que, na maioria das vezes , as cores preto e branco serão duas cores do nosso site, mas às vezes a cor preta será um pouco menos escura No entanto, na maioria das vezes, essas duas cores serão as cores que usamos como plano de fundo e cores de teste. Então, temos que encontrar nossa cor primária e podemos selecionar essa cor primária acordo com o tom de emoção da cor Nesse caso, nós o selecionamos como azul. 34. Entender as etapas de web design personalizadas: Olá, pessoal. Acabei de criar uma etapa para concluir um projeto de web design. Esse é o Estep essencial que usaremos para criar um site de sucesso para nossos clientes Você pode usar esta lista e seguir a ITF ao criar um site para clientes reais e também podemos usar este Estep para concluir este curso Primeiro, temos a reunião com o cliente. É para entender o objetivo, as necessidades e as expectativas do cliente . Em seguida, crie um contrato. Ele definirá os resultados, prazos e condições de pagamento Em seguida, o cliente concorda com o contrato, vamos iniciar o design. Como primeira etapa, criaremos um moodboard e reuniremos inspirações de design e design Dessa forma, podemos verificar como nossos concorrentes usam seu site para resolver seus problemas e ajudar seus clientes. Criar um moodboard é muito importante para obter inspiração, então não estamos apenas copiando designs da web, vamos verificar a aparência desse web design e criar uma versão melhor e criar um site exclusivo Em seguida, temos que criar um mapa do site. O mapa do site serve para entender que tipo de páginas nosso site tem e entender e planejar a estrutura do site Em seguida, temos que selecionar fontes para o nosso site. Quando selecionamos fontes, escolhemos uma tipografia que corresponda à marca e essas fontes devem ser legíveis e fáceis Em seguida, temos que selecionar as cores. Então, temos que criar uma paleta de cores que se alinhe com a identidade da marca Então você se lembra da regra 603010? Usaremos a regra 603010 para criar a paleta de cores. Em seguida, temos que criar a interface do usuário. É tudo uma questão de projetar a interface do usuário com ícones e layout de botões. Por isso, usamos o Figma para projetar essas interfaces de usuário e, ao criar sim antes de projetar o site, nos ajudará a dar compreensão clara sobre o site, procurar nosso cliente Então, podemos obter seus feedbacks e fazer as mudanças necessárias Em seguida, geramos conteúdo. É tudo uma questão de escrever e reunir texto, imagens e mídia para o site. Na reunião com o cliente, podemos pedir conteúdo ao cliente e dizer que usamos a IA para gerar conteúdo. Portanto, enquanto projetamos a seção do site, podemos gerar conteúdo. Em seguida, temos que escolher uma plataforma. Portanto, neste caso, selecionaremos o WordPress como nossa plataforma, e trata-se de instalar o WordPress e instalar os plug-ins necessários e, em seguida, teremos que criar o site. Trata-se de criar e instalar o site de acordo com o design da interface do usuário. Em seguida, configuraremos a ferramenta de análise. Trata-se de instalar ferramentas como o Google Analytics, Google Recapture, Google Search Console para verificar o desempenho do rastreamento Em seguida, temos que configurar formulários, o que significa que, se criarmos um formulário de contato , formulário de inscrição, formulário, temos que garantir que funcione perfeitamente. Então, temos que melhorar a segurança. Melhorar a segurança significa configurar o certificado SSL, instalar plug-ins de segurança e plug-ins de backup Então, temos que melhorar a velocidade do site. Usaremos plug-ins para fazer isso. Depois disso, podemos carregar o site e, se você fornecer suporte posterior, essa será a última etapa que teremos que dar. Este é o ETF e a maioria desses ETFs, é melhor informar as atualizações É sempre melhor informar nosso cliente sobre as coisas que fizemos. Por exemplo, se criarmos um quadro de humor e pudermos compartilhá-lo com nosso cliente podemos permitir que ele escolha seções ou compartilhe sua opinião sobre os designs. Então, ao projetar o site, podemos conversar com o cliente e receber feed também quando selecionamos imagens Se o cliente não fornecer essas imagens, podemos coletar alguns links de imagens e compartilhá-los com o cliente. Ele escolherá a melhor imagem para o site. Ter uma conversa saudável com cliente e obter feedback dele nos ajudará a concluir nossos sites sem receber muitas revisões Vamos começar o processo de design. 35. Crie uma lista de verificação de proposta de projeto e requisitos: Ao obter um projeto de web design de um cliente, você deve ter uma maneira de obter informações claras sobre os requisitos do cliente e uma breve ideia sobre o site que você vai criar. Além disso, você também deve definir claramente o que você fornece ao seu cliente quanto custará e o prazo do projeto. Para realizar essas duas tarefas, precisamos ter uma lista de questionários e um contrato Se você abrir este arquivo completo da comunidade FEMA de recursos de web design personalizado , você verá a seção chamada Projeto ICO Neste projeto Icope, temos essa tabela chamada requisito de web design Ao entrar em contato com seu cliente por videochamada ou apenas enviar uma mensagem de texto para seu cliente, você pode solicitar essas informações e obter a resposta dos clientes. Dessa forma, você terá todos os detalhes de que deseja criar um site personalizado para seu cliente. Ao preencher esta lista de verificação de requisitos de web design, você terá todas as informações necessárias para iniciar o projeto Além disso, esse arquivo é editável. Você pode fazer essas perguntas seu cliente ou compartilhar esse arquivo com seu cliente clicando neste botão de compartilhamento e, em seguida, selecionando a opção que qualquer pessoa pode editar, depois clicar em Salvar e clicar no link copiar. Então, vamos abrir isso em Nova janela. Agora o cliente pode editar esse arquivo ao fazer login no Figma. Além disso, ao fazer isso, você pode criar um novo arquivo Figma Vamos até Figma e clique em Novo arquivo de design. Depois, basta clicar aqui e pressionar Control ou Command C colar aqui. Dessa forma, você entenderá claramente o projeto. Aqui, você pode adicionar o nome do projeto como Dr. John limpando assim. Depois, você pode compartilhar esse arquivo com seus clientes. Depois, basta clicar aqui e editar essa resposta quando ele responder a essas perguntas. Depois de obter todas essas informações, você pode criar uma proposta de projeto. Esta é uma proposta de projeto simples, mas eficaz que você pode usar com projetos de web design e dar compreensão clara ao cliente sobre o que você faz quanto custará e que tipo de método de pagamento você aceita, coisas assim. Leia a proposta e você terá que alterar os itens nesses colchetes de acordo com seu projeto A maneira mais fácil é pressionar Command ou Control F. Em seguida, pesquise esse colchete desta forma Em seguida, você pode ver os locais em que os colchetes estão localizados. Além de alterar os resultados do projeto e a estrutura de pagamento da duração do projeto, ou você pode editar todas essas informações acordo com seu projeto nas próximas lições, mostrarei como editá-las em nosso primeiro projeto Vou fechar este. Também nesta lista de verificação de requisitos de web design, se você precisar adicionar mais colunas ou adicionar mais informações, basta selecionar o profissional e pressionar Controle C ou Comando C e controle ou comando V para colá-lo Analise os requisitos de web design e a proposta do projeto. Além disso, se você acha que esse requisito de web design ou modelos de proposta de projeto precisam mais informações ou mais melhorias, basta me enviar uma mensagem direta ou elogiá-los e eu atualizarei se for uma alteração necessária 36. Lista de verificação do Projeto 01: Olá, pessoal. Este é o nosso projeto de imprensa e aplicaremos tudo o que aprendemos aqui e criaremos um site personalizado do zero. Este projeto é fictício, o que significa que todos os detalhes deste projeto são apenas para fins educacionais e o conteúdo que usamos neste site são conteúdos fictícios Como primeira etapa, precisamos coletar informações e preencher esta lista de verificação de requisitos de web design Eu já fiz isso e vamos analisar um por um. Quando você tenta coletar essas informações com clientes reais para seu projeto real, sempre obtenha a opinião deles e entenda o que eles precisam. Em seguida, dê uma sugestão. Isso é muito importante. Não tente dar sugestões ou dar versões para elas. Basta ouvir seus requisitos e, em seguida, dar sugestões e melhorias. Dessa forma, você terá uma ótima comunicação com seu cliente e poderá coletar as informações. Aqui, primeiro, nossa pergunta será qual é o nome do cliente? Nesse caso, o nome do cliente é Dr. John Bennett e qual é o nome da sua empresa O nome da empresa é JB Family Clinic, e qual é o seu endereço de e-mail, JB clinic at mail.com Você tem um site? Se sim, qual é a URL? Aqui, esse cliente não tem um site existente, então eu o defini como NANA não disponível Então, temos a seção de visão geral do projeto aqui. Qual é o propósito do site? O objetivo é fornecer informações sobre saúde, permitir a solicitação de consultas, compartilhar recursos de saúde para famílias, aumentar a visibilidade da clínica e promover conexões com a comunidade Então, temos quem é seu público-alvo? O público-alvo são famílias e indivíduos locais que buscam serviços de saúde confiáveis e, em seguida pais que procuram cuidados pediátricos, saúde mental e serviços de bem-estar familiar Então, temos quais são os objetivos principais do site. Os principais objetivos são melhorar a presença on-line do cliente para atrair novos pacientes, comunicar claramente os serviços e especialidades disponíveis das famílias e, em seguida, fornecer recursos educacionais sobre tópicos de saúde da família Em seguida, fazemos perguntas. Existem sites que você gosta da aparência? Aqui temos alguns URR de sites? Sempre pergunte ao seu cliente sobre um site semelhante à ideia dele Essa é a melhor maneira de entender seus requisitos. Depois, você pode perguntar qual estilo de design você prefere. O cliente pode entender essa pergunta, para que você possa pular essas perguntas ou, se ele souber sobre sites, ele dirá que tipo de site eles desejam Nesse caso, sites com layout limpo e moderno e, em seguida, você tem cores ou diretrizes de marca? Nesse caso, ele não estará disponível. Mas, na maioria dos casos, você criará um site para marcas existentes, que significa que você deve seguir as diretrizes de cores e usar seus próprios logotipos. Em alguns casos, eles mudarão a marca de sua empresa. Nesse caso, eles não fornecerão as cores da marca ou outras diretrizes. Então você tem um logotipo? Não está aqui, temos conteúdo e recursos. Temos perguntas chamadas quantas páginas seu site precisará? Nesse caso, você precisa fazer sua pesquisa antes de entrar em contato com o cliente. Basta verificar sites semelhantes e ter uma ideia sobre o site. Em seguida, descubra que tipo de páginas eles têm e quais são as páginas mais importantes e coisas assim. Mas se você não tiver nenhuma ideia, pergunte a eles sites semelhantes de que eles gostem. Dessa forma, você poderá ter uma ideia. No entanto, se eles não tiverem sites semelhantes ou sites de amostra para mostrar nesse caso, você pode fazer sua própria pesquisa e encontrar sites relacionados a esse nicho e descobrir o que eles fazem de mais importante Não vamos copiar esses sites Vamos reunir essas inspirações de design e criar um site exclusivo. Agora temos o nome das páginas. Nesse caso, temos uma página sobre o blog de contato de nossos fornecedores. Então você pode perguntar: você fornecerá conteúdo para Earl Nesse caso, mostraremos como criar conteúdo com IA. Agora, ferramentas de IA como o aGPT Google Bad desempenharão um papel importante e nos ajudarão a criar conteúdo incrível para sites Portanto, se os clientes não fornecerem conteúdo, podemos gerar conteúdo para o site. Então, em aulas futuras, mostrarei a melhor e profissional maneira de conversar com a IA e gerar os detalhes que queremos. OK. Então, se você precisa de recursos especiais, se eles precisarem de funcionalidades de comércio eletrônico , como o Ito on-line ou se quiserem adicionar o bot de bate-papo, você pode obter esclarecimentos fazendo essas perguntas No entanto, se eles quiserem alguns recursos que você não sabe e não sabe criar, diga a eles que vou pesquisar sobre isso e voltar para você. Depois, você pode pesquisar sobre os recursos, por exemplo, se eles quiserem um fórum de bate-papo e você pode pesquisar sobre isso e entender que você pode fazer isso ou, se custar mais, pode dizer a eles que custará. E essa é a maneira de lidar com esse tipo de pergunta. E nós temos um interrogatório, você precisa de algum Neste caso, é necessário solicitar agendamento e formulários de contato. Vamos criar formulários neste projeto e, em seguida, teremos detalhes técnicos. Eu digo, você tem uma plataforma preferida? Nesse caso, ele pressionará, mas se o cliente estiver familiarizado com plataformas diferentes, como Webflow, PFI Weeks Studio ou apenas HTML Você pode conversar com eles e, se não conhece essas outras plataformas, pode dar sugestões de por que eles precisam escolher o Wordpress e, se não concordarem, você ainda pode obter o projeto e aprender enquanto cria o site. Então, temos perguntas como: você tem um nome de domínio e hospedagem? Nesse caso, é, mas às vezes os clientes simplesmente não sabem sobre nome de domínio e hospedagem ou alguns clientes acham que também forneceremos nomes de domínio e hospedagens. Você precisa definir claramente que você não fornece essas coisas e que eles precisam fornecê-las. No entanto, se você estiver fornecendo seu próprio servidor de hospedagem e domínio como uma assinatura, você pode informá-los sobre isso e, no contrato, você pode mencioná-lo claramente para que eles entendam quanto custará e, se concordarem , você poderá fornecer sua própria hospedagem. Pessoalmente, quando eu crio um site para meus clientes, peço nome de domínio e hospedagem para criar o site. Então temos o prazo final do projeto. Você pode simplesmente perguntar quando deseja que o site seja lançado. A maioria dos clientes dirá em uma semana, em três dias, em duas semanas, mas não poderemos criar um site personalizado em três dias porque forneceremos um site de qualidade que os ajudará a fazer sua marca brilhar online. Você explica a eles sobre o prazo e dá pelo menos três a quatro semanas como prazo final do projeto e tenta fazer isso em duas semanas. Dessa forma, você terá um cliente satisfeito e ele confiará em seu serviço para os próximos designs de sites. Então temos o orçamento, você pode exatamente qual é o seu orçamento para este projeto. Portanto, na maioria das vezes, se você trabalha com o cliente individual, não com uma empresa, eles farão a primeira pergunta quanto custará. Você acaba de obter informações sobre que tipo de site, quantas páginas eles querem e quais tipos de recursos. E então, se você criar um site de cinco páginas por $1.000, diga a eles que você precisa de 1.200 e eles tentarão negociar com você e, se negociarem por mil, você poderá fazer isso Nesse caso, eu apenas às 7:50 como número fictício. Mas se você tem uma marca e um cliente vem até você conferindo seu vídeo ou seu conteúdo, você pode cobrar mais desse cliente. OK. Agora temos os detalhes e, na próxima lição, criaremos um contrato para essa lista de verificação 37. Use a IA para web design: Olá, pessoal. A IA desempenha um papel importante nos designs da web e em outros campos relacionados à Internet. Portanto, saber como usar a IA é um grande ponto positivo e nos ajudará a obter o melhor resultado em alguns minutos. Antes do KDG PD e do Google Bart, que agora se chama JamiNir, usamos sites como o texto Lam ISM para adicionar conteúdo nosso site, que criamos para o cliente, porque muitas vezes os clientes não fornecem conteúdo para nós, então temos Mas depois de 22 22, podemos usar ferramentas de IA como HAG PT e Jamin para gerar conteúdo para o projeto de nossos clientes Além disso, essa ferramenta nos ajudará a reduzir nossa carga de trabalho e obter informações que não temos e não conhecemos Como exemplo, recentemente adquiri um projeto de design de site de uma empresa de aviação. Eu não sabia nada sobre a empresa de aviação e as coisas que tenho que adicionar ao site. Eu simplesmente uso o JAG PT para gerar o conteúdo para o site e Cran ficou muito feliz com isso e ele só mudou algumas coisas de acordo com sua versão Vamos aprender sobre o JAG PT para gerar o que queremos. Eu só vou ao HGBT e aqui podemos inserir o formulário. Basta adicionar conteúdo imediato para gerar heroína para um site de saúde que não nos proporcionará melhores resultados Então, vamos tentar isso. Ok, aqui estão os DTs. Mas se adicionarmos detalhes adequados e adicionarmos o DDS que já conhecemos, o resultado será melhor do que isso Então, vamos experimentar um novo bate-papo e tentar gerá-lo com o baile Então, eu uso versões anteriores dessas ferramentas, e as pré-versões serão suficientes para o nosso trabalho. Então, aqui está o prompt simples que eu sempre uso. Então, primeiro, temos que atribuir uma função para esse GPT. Então, devemos dizer o que queremos gerar, e então podemos encontrar três opções. Então, quando adicionamos essas informações, temos que adicionar tudo o que sabemos e tudo o que sabemos para obter melhores resultados. Então, vamos tentar. Primeiro, direi que você é um web designer. Em seguida, você criará um site para a clínica HealthCare chamado Clinical JB Family Clinic e, em seguida, teremos que atribuir a tarefa Quero que você crie capturas de seções de heróis com Good CTA. CTA é um apelo à ação E você se lembra de que criamos seções de heróis no autoayout FICMA e no Pigma , então temos que dizer o que devemos Como este site, concentre-se melhorar a pessoa on-line da clínica para atrair novas versões. Portanto, se houver mais informações, podemos adicioná-las no futuro. Vou adicioná-los por enquanto. Essas serão as instruções, então vamos pressionar Enter e ver a diferença Ok, acho que temos três opções. Vamos nos concentrar apenas na primeira aqui, saúde, nosso atendimento prioritário às famílias, uma visita por vez e essa é a manchete e temos um ótimo subtítulo na Clínica da Família JB Oferecemos atendimento integral para toda a sua família e , em seguida, marcamos uma consulta no botão. Vamos ao baile de formatura simples que já criamos. É saúde, nossa prioridade. Pronto, então ele fornecia apenas um pequeno subpeddin e não o personalizava e não oferecia melhores opções, mas aqui temos detalhes melhores e Então, sempre temos que atribuir a função, depois atribuir as tarefas e pedir três opções. Dessa forma, obteremos esse tipo de resultado e poderemos escolher o melhor, então o ponto é que, se você pensar em apenas adicionar texto e obter resultados do HGBTO Jami, isso não funcionará, você sempre terá que especificar e, dessa forma, obterá resultados melhores e personalizados Portanto, em aulas futuras, usaremos muitos prompts no GBT e também tentaremos usar o Jamini 38. Crie uma proposta de projeto: Agora é hora de criar um contrato para o nosso projeto. Eu vou para o perfil da nossa comunidade e aqui temos a proposta do projeto. Eu apenas copio e clico aqui, depois colo assim. OK. Agora vou colocá-lo aqui. Tudo bem. Agora, primeiro temos que adicionar o nome do projeto. O nome será o nome da empresa. Em seguida, teremos que adicionar o nome do freelancer. Vou adicionar meu nome aqui. Vou ter que adicionar um e-mail. Vou apenas adicionar um e-mail falso, como teste em mail.com, e aqui, temos que adicionar o nome do cliente e nossa solicitação de web design, temos que copiar e colar o nome do cliente desta forma Agora vamos criar a visão geral do projeto. Para criar essa parte, podemos obter a ajuda do chat G PT. Vamos até a GVT e clicamos em Novo chat. Então, aqui está nosso aviso. Você pode verificar esse prompt na seção de recursos. Você receberá mais dois Então, aqui, a função é web designer, e então vamos ao requisito do site. Aqui você está criando um site para B TenNing e eu quero que você crie uma visão geral do projeto para contrato do site da clínica familiar JB Então, vamos adicionar aqui mais informações. Aqui, podemos adicionar informações como a finalidade do site. Eu copio a resposta do cliente desta forma e depois colo. Na verdade, vamos redigir essa parte primeiro, assim, e depois aqui. Quais são os objetivos principais? Vamos copiar essa parte e colar aqui assim. Então, podemos obter o número cinco e tudo ficará bem. Agora eu também terei que dizer, faça apenas 150 palavras e vamos pressionar Enter. Ok, aqui está a primeira opção. Então, parece que não é bom. Então, o que podemos fazer é clicar em Editar mensagem. Agora vou entrar aqui e aqui, agirei como se quisesse que você criasse uma visão geral do projeto para entrar em contato com o site da JB Family Clinic que pretendo enviar para clientes aqui Vamos adicionar apenas um quinto de 100 palavras e falaremos sobre os detalhes necessários, os detalhes necessários, depois clique em Consentimento e vamos ver A primeira opção é que o site da JB Family Clinic contará com cinco páginas que fornecerão informações sobre saúde, facilitarão solicitações de consultas e oferecerão recursos de saúde da família O site tem como objetivo aumentar a visibilidade da clínica, atrair novos pacientes e destacar seus serviços e especialidades principais elementos incluem uma interface fácil de navegar e conteúdo educacional para promover conexões com a comunidade. Isso vai ser perfeito. Vou apenas copiá-lo e vamos até aqui e vamos substituir esse projeto assim. Em seguida, nas entregas, entregamos as maquetes do Figma e, em seguida, entregamos site totalmente funcional e responsivo um site totalmente funcional e responsivo. Aqui, adicionarei, como wordpress, porque vamos criar Vamos torná-lo um site WordPress em interrogatórios técnicos, teremos que adicionar o eTAF e, neste primeiro ponto, não precisamos Eu vou removê-lo. E aqui, configuraremos Google Analytics para o Google Search Console, otimizaremos a velocidade de carregamento e a capacidade de resposta móvel. Em seguida, obteremos o formulário de tag e, aqui, o formulário de solicitação de agendamento, o formulário solicitação de agendamento e, aqui, melhoraremos a segurança na web Assim, você pode alterar essa integração técnica de acordo com seu projeto. Então, aqui está o toque em que vamos fazer isso. Você pode entender claramente esses requisitos verificando os requisitos de web design e, em seguida, os requisitos de iniciação do projeto Para este, já chamamos design do site ou exemplos de sites semelhantes, portanto, precisamos apenas de acesso de registro para a palavra servidor web e site. Site significa que wordpressbd permite mudar como o Wordpressabard, assim Se o Wordpress ainda não estiver instalado, você pode remover essa parte. Portanto, não precisamos documentação necessária porque já a temos. Vou remover o ponto em que você pode ajustar isso de acordo com suas necessidades. Aqui temos a seção de suporte pós-serviço. Aqui, novos recursos e novas páginas exigirão cobranças e discussões adicionais. No entanto, oferecerei manutenção básica do site e pequenas atualizações após a conclusão. Portanto, se você não oferece manutenção básica gratuita do site ou após atualizações, pode adicionar o BDS aqui Então temos a condição tripulada. Então, aqui temos estimativas do tempo de conclusão do projeto. Vamos fazer com que sejam quatro semanas e depois moldar e desestruturar Portanto, ao criar um site, sempre faça um pagamento adiantado. Eu geralmente recebo 50% do pagamento adiantado. Então, vamos mudar isso aqui, temos 375 e, após o lançamento bem-sucedido do site, seremos 375 e o total do projeto é 750 como Em seguida, temos que adicionar os métodos de pagamento. No meu caso, aceito métodos de pagamento como paneer e Western Union Se você tem payal, você também pode adicionar payal, mas eu só ofereço métodos de pagamento, então temos uma política de cancelamento Então, aqui, diz que se o projeto for cancelado pelo freelancer após o início, um reembolso total do dinheiro será fornecido ao cliente pelo mesmo método em que foi recebido Se cancelado pelo cliente, o pagamento será devido por todo o tempo investido no projeto, independentemente do uso pretendido Portanto, a proposta do projeto é uma carta séria e sempre verifique antes de enviá-la. Portanto, neste caso, se eu cancelar o projeto, reembolsarei totalmente o dinheiro ao cliente e, se os clientes cancelarem o projeto, não darei o pagamento adiantado aos clientes Ajuste essas políticas de acordo com seu padrão de trabalho e seus clientes, então temos a seção de propriedade. Após o pagamento integral, direitos de propriedade intelectual associados ao site serão do cliente. Em seguida, temos essa mensagem, como a proposta, descrevendo os serviços prestados e os resultados esperados do projeto Se você tiver pacientes ou precisar de detalhes adicionais, sinta-se à vontade para entrar em contato comigo Estou entusiasmado com a oportunidade de trabalhar juntos na concepção e desenvolvimento e aqui temos que adicionar o nome do site. Aqui está o nome do site, a empresa. Vamos adicionar o nome do site assim e, se quisermos, podemos adicionar o site. Você pode adicionar ou remover qualquer um desses pontos. Se você quiser adicionar novos termos e condições, basta pressionar Enter e você receberá esse tipo de ponto. E aqui, se você quiser adicionar mais um item, você tem que clicar aqui e clicar nesta propriedade. Depois, você pode simplesmente duplicá-lo pressionando Control C ou Command C e controlando o comando, assim Nesta proposta de projeto projetada com layout automático, você já tem uma ideia sobre o layout automático, e isso será fácil de editar como quiser. E depois de concluir esta proposta de projeto, você pode clicar na proposta e, no lado direito, rolar para baixo. Ao rolar para baixo, você pode ver a seção de exportação aqui, selecionar o tipo como PDF e clicar no botão exportar proposta de projeto. Portanto, esta proposta de projeto é de tamanho A quatro. Clique aqui, ficará assim, e você pode simplesmente enviar isso ao seu cliente e informá-lo se precisar de alguma alteração. E depois que seu cliente concordar com esses detalhes, você poderá começar o trabalho. 39. Coletar inspirações de design: Olá, pessoal. É hora de criar nosso moodboard Para criar nosso moodboard, precisamos encontrar inspirações de design e obter uma captura Neste projeto, já temos inspiração de design que o cliente nos dá. Vamos abrir um por um desses UR Ok, agora temos que obter uma captura de tela deste site Para fazer isso, podemos usar a chamada de extensão do Google Com, a extensão GoFullPage, acessar o Google e pesquisar a extensão GoFuulPage Em seguida, você receberá o Comm webstollin, clique nele, e aqui você verá adicionar ao Chrome, clique nele Eu já fiz isso. Você verá esse tipo de ícone de câmera no navegador Chrome, acesse a página da web e clique nela capturar o design completo do site. Aqui temos um problema. Nesta captura de tela, não temos partes do cabeçalho para obter as partes do cabeçalho, vamos tentar fazer isso de novo. A parte do cabeçalho não está sendo exibida, mas está tudo bem. Primeiro, eu o baixo como PNG, basta clicar aqui e depois o que posso fazer é pressionar Shift Command quatro e apenas destacar ou selecionar assim, depois soltar o mouse e você obterá a captura No entanto, se você usa o Windows, pode usar uma ferramenta chamada InPintol Basta ir ao Window e pesquisar no Pintolo, agora vamos para o Clique nesta extensão de página inteira e ela obterá automaticamente o design, depois baixe-o e vamos fazer isso nos sites da EAL Agora, esses são os sites dos concorrentes, mas isso não é suficiente para coletar mais inspiração de design, é melhor entender bem o site. Existem sites nos quais podemos coletar inspiração de design. Um deles é o drible. Vamos para o Dribble. E se você não tem uma conta Dibble, você pode clicar em se inscrever e eu já tenho uma conta de drible, então eu vou entrar Ok, eu entrei na minha conta Então eu posso pesquisar aqui a clínica da família porque vamos criar um site para a clínica da família. Pesquise a clínica da família aqui, apresentadora. Em seguida, selecione a categoria de web design aqui. Em seguida, escolha o tipo de design, encontre os melhores designs e abra-os na Nova janela. Clique e clique em Abrir link no Nutab e faça isso. Se você não encontrar nenhum site relacionado ao UNH, basta obter outros designs relacionados ao Rf Nesse caso, posso encontrar um site de saúde geral, site odontológico e outros sites semelhantes. Vamos abrir tudo bem. Agora, aqui vou obter palavras-chave relacionadas. Então, o primeiro é odontologia hospitalar, médico, dentista basta clicar em Hospital one, e aqui temos o design do hospital Portanto, também podemos alterar esse filtro , mas vou defini-lo como popular. E aqui vou abrir novamente esses designs. Aqui está um site odontológico, e então vamos ao médico e tudo bem. E, novamente, clicarei nesta clínica. Agora, obteremos o design do site da clínica. Ok, basta fazer sua pesquisa e encontrar o design do site. Até agora, encontrei poucos designs, então não há nada para tirar daqui, então vou pular este e fechar a guia Então aqui, vamos rolar para baixo. E aqui temos a versão de página inteira. Clique nele e, em seguida, clique com o botão direito, depois clique em Salvar imagem como e salve-a. Todos esses designs serão baixados para sua pasta de download. E ao rolar para baixo, você também verá outros designs desse designer. Portanto, lembre-se sempre de que obtemos esses designs para obter inspiração, não apenas para copiar e colar. Portanto, não encontre apenas design de outras pessoas e tente copiá-las e encará-las. Basta se inspirar no design e criar sua própria versão. E eu vou te mostrar como fazer. Ok, vamos rolar para baixo. Aqui temos uma prévia da página inteira, clique nela e clique com o botão direito do mouse. Podemos simplesmente salvá-lo. Então aqui temos esse também, e aqui está outro site. Nós podemos economizar. Ok, copie este, dois, Ok, é isso. Então, podemos encontrar designs de sites deles para nós. Então, vou pesquisar Tmforus no Google, e vamos acessar themforus.net, e vamos acessar themforus.net, basta clicar nele. Ok, aqui, eu posso pesquisar família Krinic e clicar em Ok. Agora você pode ver sites com boa classificação, basta abri-los em uma nova janela e vamos abrir alguns deles assim. Sim. Além disso, vamos pesquisar uma clínica semelhante para obter o site da clínica. Aqui, temos uma clínica odontológica, mas aqui temos outra clínica, eu clico nela. Portanto, esses modelos já são usados por pessoas, o que significa que não serão exclusivos, mas podemos encontrar seções e como elas projetam o site. Obtenha informações sobre os designs que devemos usar em nosso site. A partir daqui, basta clicar em Visualização ao vivo e aqui você obterá a prévia ao vivo do site. Aqui temos algumas demonstrações. Agora, clique com o botão direito do mouse nessas demonstrações e obtenha esses designs como este. Aqui temos o design. Agora, o que podemos fazer é clicar nesta página divertida, conectá-la e obter uma captura de tela do design Eu baixei e aqui temos o próximo, basta cruzar este seletor de permanência e rolar para baixo. Ok. Em seguida, clique nessa extensão do Chrome para obter o design e baixá-lo. Nós temos esse. Vamos projetá-lo também. E nós temos esse também. Vamos rolar para baixo e clicar em Download. Então, temos outro site. Clique em Análise ao vivo, e aqui está a análise ao vivo, basta clicar neste botão R para obter design. Vamos continuar. Ok, agora vou remover todos os links dos quais já recebi as capturas Ok. Agora, outro site em que podemos encontrar inspiração de design é o Ban dot O Bans, vou pesquisar Family Clinic A partir daqui, veremos sites de design relacionados à clínica familiar, vou abri-los assim. Vamos ver esses designs. Este não é o design do site, e aqui está o design do site. Obtenha a captura de tela aqui, basta clicar nela e usar a página inteira para obter a captura de tela. Vamos ver isso. Este site não está em inglês, mas ainda assim podemos encontrar inspiração de design. Vamos baixar esse também. Clique duas vezes e torne-o maior, depois clique em GoFullPage e clique em Baixar imagem Temos o site da Clínica Dentária, então vamos tirar essa captura de tela também. Ok. Agora podemos encontrar inspiração de design no PinterSt Vamos para o PinterRSTT. Para obter designs do Pinterest, você precisa fazer login no PintersTo, estou na minha Agora eu clico neste botão de busca, e aqui, vou pesquisar o site da Clínica da Família. Então você deve trocar os pinos Pins e aqui temos os designs do site, clique nesses designs e eu apenas clicarei no design e o colocarei em uma nova janela como esta, depois clique com o botão direito do mouse, clique em Salvar imagens e salve Vou clicar aqui. Isso não é bom. Abra-os em uma nova janela como esta. É uma família aberta de poucos designs. Portanto, no Pin trust, você pode usar essa pesquisa de imagens para obter designs de sites semelhantes. Vamos pesquisá-lo assim. Ao fazer isso, você obterá um design de site semelhante, então abrirei alguns deles assim e depois os abrirei em uma nova janela. Ok. Agora, o que vou fazer é fazer o download deles clicando com o botão direito e clicando em salvar imagens. Tudo bem Agora temos designs suficientes para criar uma placa de modo. Então, na próxima lição, vamos criar o quadro de modos. 40. Crie um clima de humor: Olá pessoal, é hora de criar nosso quadro de humor. Vou diminuir o tamanho da tela pressionando Control e usando a roda de rolagem do mouse. Então, aqui, vou criar uma moldura. Basta clicar no quadro e clicar assim e vamos aumentar seu tamanho assim . Na verdade, vamos adicioná-lo a partir daqui, para que tenhamos mais espaço. Em seguida, vou renomeá-la para bola lisa. Espaço múltiplo. OK. Agora, o que podemos fazer é alterar a cor de preenchimento, então silencie a moldura e altere cor do campo para um pouco mais escura dessa forma OK. Agora temos toda essa captura de tela, então vou destacar todas elas e adicioná-las assim Eles serão enviados, então temos que esperar até que as primeiras imagens sejam enviadas com sucesso Também é melhor colocar as amostras de design que o cliente nos fornece mais próximas. Então, aqui estão os designs, e vamos criar esse design de moodboard assim Na verdade, vamos colocar essas duas seções como aqui. Então, vamos aumentar o quadro de humor para ficar assim, e agora aqui está uma das duas opções reais. Ok, aqui está um dos designs, vamos colocar um moodboard como este Molhe os desenhos. Vamos diminuir o tamanho do moodboard e adicioná-lo aqui. Ok, agora que temos esse primeiro design, vou colocá-lo assim e vai ficar tudo bem aí, então temos esse design, basta colocá-lo aqui, vou definir o tamanho do convite como 15 Podemos usar o layout automático, mas é fácil colocá-lo assim sem o layout automático, e aqui, temos um plano de fundo. Vamos removê-lo para removê-lo. Eu clico duas vezes na imagem e, aqui, direi para recortar. Agora podemos cortá-lo assim. Aqui vamos nós. Tudo bem. Então eu vou colocar isso aqui. Tudo bem. E há 38 recursos, pelo que me lembro, vamos dizer muitos. Ok. Então, este tem o fundo, clique nele e altere-o para recortar e soltá-lo assim e estourá-lo e pressione enter, vamos colocá-lo aqui. OK. Na verdade, é assim. OK. E aqui temos outro design. Vamos colocar assim e aumentar um pouco. Vamos fazer isso entre os tamanhos 15. Ok, temos mais designs. Vamos adicionar todos eles. Esse é outro design. Vamos colocar aqui, colocar esse. E nesse design, vamos soltar essa barra preta porque é um tema para nós. Ótimo, vamos colocá-lo aqui. Ok, vamos deixar essa caneta. Agora vamos fazer aqui. OK. Agora, vamos colocar isso. Ok, vou adicionar esses designs a esta placa de modo. Agora não temos muito espaçamento, então eu clico na moldura do moodboard e pressiono Command para aumentar o quadro pressiono Command para aumentar o Se você estiver usando o Windows, pressione Control. Está bem? O que temos é remover o plano de fundo. Esta é a qualidade desta não é boa, então vou removê-la. Vamos adicioná-los. Agora vou selecionar essas capturas de tela e curtir aqui. Vamos continuar adicionando-os à caixa lunar. Então, aqui está o design da web selecionado pelo cliente. Então, vamos colocá-los mais próximos para que possamos ter uma ideia sobre a seção que este site deveria ter. Então, aqui, temos sinais de que só temos o design completo sem a seção de heróis. Vamos colocar a seção de heróis porque a seção de heróis já temos com a ferramenta de recorte Vamos descobrir o design. Vamos ao raciocínio da razão. Aqui, separamos a cabeça, copiamos, arrastamos e amarramos assim, depois colocamos os dentes assim e depois os colocamos assim Agora, o que posso fazer é pressionar o comando G para agrupá-lo. Ok, agora vou colocar assim. East aT Ok, aqui temos a placa de modos e, aqui, temos todos os designs que coletamos, para que possamos ampliar e verificar o design desta forma. Agora podemos ter uma ideia geral sobre o tipo de seção que precisamos ter e podemos selecionar essas seções verificando o estilo desse design. A maneira mais fácil é primeiro verificar os sites fornecidos pelo seu cliente. Esses são os sites dos concorrentes do seu cliente. Descubra a seção mais comum desses sites. Como exemplo, este site tem uma seção de heróis, somos uma seção, por que escolhemos nossa localização, por que escolher nossas localizações com o formulário de contato e as avaliações do Google e um rodapé Então, se verificarmos este, ele tem herosection, nossos serviços, log e, aqui, temos a seção de revisão, nossa seção de provedores e a seção Fora da seção. Agora podemos escolher essas seções a partir desses designs. Basta examinar o design e descobrir qual é a seção úmida. Para fazer isso no Figma, temos um recurso de comando Na barra de ferramentas, você pode ver esta seção de comando, clicar nela e, nesses designs, eu gosto desta seção como nosso site, seção de heróis, clique nesta seção e defina o nome como seção de heróis. Ok, no entanto, eu só entendo a estrutura desse design, que significa que o subtítulo, título principal e o texto do parágrafo ficarão assim, esse botão será colocado na parte inferior A única coisa que o texto estará no canto inferior esquerdo. Então, temos que descobrir a seção. Para saber mais sobre a seção, vamos verificar o design e selecionarei essa parte como uma seção. Apresentador, quando adicionamos comentários, podemos ver todos esses comentários aqui E agora temos que descobrir quais são as seções do site do nosso concorrente Aqui, a seguir, temos a seção Escolha nós, e se formos para o segundo design, ele não tem muita coisa, tem serviços e escolhe fornecedores. Vamos selecionar a seção para serviços. Vou selecionar esse tipo de seção para serviços. Em vez de adicionar essa seta, adicionarei ícones relacionados a esses serviços. É isso que eu digo: precisamos criar uma versão melhor e exclusiva, e agora precisamos escolher sua seção de provedor. Vamos ver o que será bom para eu criar esse tipo de seção para nossos fornecedores. Vamos nossos fornecedores. Termine agora, temos que encontrar seção para depoimentos ou avaliações Vamos descobrir a seção de resenhas. Vamos criar esse tipo de seção para avaliações. Agora, o que temos que adicionar , teremos que adicionar a seção de blocos. Então, vamos encontrar uma seção de blocos. Isso vai ficar bom, então eu só clico aqui e vamos fazer isso como um bloco. Nós criamos isso para a página inicial. Na verdade, não vamos adicionar o último bloco na página inicial. Vou clicar aqui e vamos remover o comando, clique em Excluir excluí-lo OK. Agora temos cinco seções para a página inicial Vamos selecionar um rodapé. Vamos descobrir que o rodapé criará esse tipo de rodapé. Clique aqui para fazer rodapé, mas vou mudar o design Eu só entendo a estrutura. Então, precisamos ter esse tipo de seção, então teremos claramente o número e teremos um botão para solicitar agendamento. Então, vamos descobrir esse tipo de design. Isso é melhor. Vamos criar esse tipo de formulário de contato na página inicial Vamos fazer com que seja o mais rápido possível. Agora temos oito seções. Em seguida, vamos até a lista de requisitos e veremos que essas seções nos ajudarão a atingir nosso objetivo. Nosso principal objetivo é melhorar o pessoal on-line da clínica para atrair novos pacientes. Para fazer isso, precisamos de um forte apelo à ação, a seção de heróis. Nesta seção de heróis, teremos que mencionar o número CLS. Aqui, substituirei esse botão de introdução pelo CLS pelo número de clínicas Isso ajudará os usuários a encontrar o número rapidamente ao visitarem o site. Vamos adicioná-lo como resposta no número de contato do Menu Pa. A próxima será comunicar claramente os serviços e especialidades disponíveis para famílias Já temos a seção de serviços nesses serviços. Adicionaremos serviços principais para que o visitante possa entender e ter uma ideia dos serviços disponíveis com facilidade . Devemos fornecer recursos educacionais sobre tópico de saúde da família. Para isso , precisamos criar uma seção de blog. Então, vamos criar uma seção de blog depois de projetarmos a página inicial Então, acho que temos a seção. Então, agora é hora de enviar esses detalhes ao cliente. Então, quando você compartilha esse moodboard com o cliente, vamos clicar na apresentação para que ele verifique todos esses designs e dê sua ideia de esses designs e dê selecionar o melhor Depois de concluir o quadro de modos, compartilhe-o com seu cliente, basta clicar nesse compartilhamento e definir como qualquer pessoa pode ver e copiar o link. Em seguida, explique a ele sobre essa placa de modo e quais são as seções que você escolhe, para que ele verifique essa placa de modo e informe sobre suas sugestões Se ele gostar de uma seção diferente, também as selecionará. 41. Criar estrutura de sites: Olá, pessoal. Agora, selecionamos a seção L que precisamos em nosso site a partir deste quadro de humor Vamos coletar todos eles e criar um único site anexando eles. Para fazer isso primeiro, clico na moldura e crio uma mesa do tamanho de uma moldura. Então vamos aumentar o tamanho do quadro dessa forma e depois eu vou para os comandos. Nos comandos, temos oito seções. Então, vamos clicar na primeira seção, e aqui está a primeira seção. Então, vou clicar neste motol e aqui eu seleciono esta captura de tela e pressiono o comando C para copiá-la e clique aqui e pressiono o comando V para colá-la E a partir daqui, só precisamos dessa seção de heróis. Então, clico duas vezes na imagem e seleciono cortar. Então eu vou recortá-lo assim, assim e depois pressionar Enter. Depois, basta colocá-lo assim e aumentar o design. Ok, então temos que encontrar a segunda seção. É sobre, então aqui está a seção A. Agora vou clicar em mTol e copiar aqui. Então venha aqui, cole assim, depois clique D na imagem e defina-a para cortar, depois recorte apenas esta seção. Curta isso e pressione Enter. OK. Então, vamos colocá-lo neste site assim. OK. Então, o que vamos fazer é encontrar na terceira seção. Essa terceira seção é serviços e aqui está a seção de serviços. Eu passo motol e seleciono, copio, colo aqui, então só precisamos desta seção de serviços Vamos recortar e apresentar. Então, aqui, vamos adicionar essa seção. Isso pode aumentar a seção pressionando, deslocando e aumentando. Quando pressionamos shift, podemos aumentar o tamanho sem alterar a altura e a largura. Então, temos que encontrar nossa seção de fornecedores. Então, aqui está essa seção. Agora vou copiar esta seção. Na verdade, já copiamos essa captura de tela, então clico em MTol e aqui está a Eu apenas o duplico pressionando o Comando C e o comando V, depois coloco assim Agora eu tenho que aumentar o tamanho da área de trabalho, selecionar a área de trabalho e aumentá-la assim. Em seguida, vou clicar duas vezes nisso e precisamos nossa seção de provedores como esta e depois colocá-la assim. Agora vamos verificar a quinta seção. Eu reviso, aqui temos resenhas, basta pressionar Mtol e copiar esta, venha aqui. Coloque-o aqui. Então, temos esta seção de revisão, edite duas vezes, seta e clique em enter apenas na seção de visualização OK. Agora coloque aqui e pressione Shift e aumente assim. Ok, então vamos encontrar a próxima seção. É rodapé. Aqui está o rodapé Aqui está o rodapé que vamos adicionar. Então copie este, venha aqui. Passe essa assim. OK. Em seguida, toque duas vezes, clique em cortar e recorte esse desenho assim e pressione Enter. Então vamos colocá-lo no fundo assim. Então, o que temos que adicionar é vamos aumentar o tamanho. Temos que adicionar, vamos selecionar o quadro de texto e aumentar seu tamanho assim. Em seguida, temos que adicionar a última seção. A última seção é contato fraco, aqui está a seção de contato fraco. Então, vamos pressionar motle e salgar a seção, pressionar o comando C , pressionar o passo aqui, pressionar o comando então vamos pegar essa seção, tocar duas vezes nela, soltá-la neste centro cinza por enquanto, vamos aumentar essa seção também, assim Ok, e coloque assim. OK. Agora vamos verificar esse design. Vamos mudar o nome desse quadro para estrutura, estrutura do site. Agora clique nele e clique neste presente e aqui está a estrutura do nosso site. Agora podemos criar nossa versão exclusiva com essa estrutura de design do site. Eu faço isso porque quando criamos esse tipo de estrutura, não precisamos criar armações de arame. Podemos criar diretamente a interface de usuário de alta fidelidade. UI de alta fidelidade significa interface de usuário semelhante à do produto real Além disso, não vamos apenas projetar isso como está. Mudaremos esse design de acordo com nossa criatividade e criaremos uma versão melhor. 42. Crie um mapa do site: Olá, pessoal. Agora, temos a estrutura do nosso site em nossas etapas para concluir um guia de projeto de web design. Em seguida, temos que criar um mapa do site. Vamos criar um. Vou até aqui e para criar um mapa do site, precisamos ter um quadro, clicar no quadro e clicar aqui, depois aumentar o tamanho do quadro dessa forma, então vou mudar esse nome para Então o mapa do site é a estrutura do nosso site. Se virmos alguns exemplos de sitemap, o sitemap ficará assim Primeiro, temos a página inicial, depois temos o resto da página. Depois disso, temos o item do submenu. Para sites pequenos, não precisamos do mapa do site, mas para sites grandes e complexos, é melhor ter um mapa do site para que possamos entender a estrutura do Além de criar um mapa do site para o seu site, ele pode ser alterado quando desenvolvemos e obtemos mais informações dos clientes de nossos concorrentes durante o processo de design Vamos criar o mapa do site. Agora temos a moldura. Eu apenas clico no texto e crio um texto chamado home. Em seguida, aumentarei o tamanho e, em seguida, alterarei o tamanho da fonte para 42. OK. Então, o que posso fazer é pressionar Shift A para aplicar o layout automático a esse texto. Lembre-se de que aplicamos o layout automático somente a esse texto, não ao quadro, somente ao texto. Agora, aqui, vamos aumentá-lo. Vamos adicionar o preenchimento horizontal como 20 e o preenchimento vertical será dez Em seguida, preencherei a cor. Clique aqui e vamos adicionar a cor do campo como essa cor vermelha, e então eu clico no texto e mudaremos a cor do texto para branco. OK. Agora temos a página inicial, parece um pouco menor, então vamos mudar esse texto para 60 Agora, novamente, vamos diminuir o tamanho dessa moldura para 2000, vamos com 2000 e alturas 151500 Ok, agora vamos adicioná-lo aqui. Na verdade, vamos mudar essa altura para mil porque não precisamos do mapa maior do site. Agora temos uma casa aqui. Vamos adicionar preenchimentos horizontais 30. Muito melhor. Agora precisamos criar outras páginas. Essas páginas serão: vamos verificar nossos requisitos. Aqui teremos o nome da página. bloquear contatos de nosso provedor, vamos copiar todos eles e vir aqui, Trata-se de bloquear contatos de nosso provedor, vamos copiar todos eles e vir aqui, depois duplicar pressionando e arrastando assim Vamos duplicá-lo algumas vezes. Então aqui está o texto que eu copio, então vou adicioná-lo e primeiro temos cerca de, depois temos o contato, depois aqui teremos o bloqueio seguida, lamentaremos nosso provedor. Aqui estão as páginas principais do nosso site. Portanto, a página inicial será a primeira página e cerca será a segunda página, e o bloco será a terceira, nosso provedor será a quarta e contato será a última página do nosso site, selecione todas elas e vamos centralizá-las. Em seguida, selecionarei todos eles, vou para a posição e clicarei em amarrado assim. Em seguida, mudarei a cor do campo para gostar dessa cor azul. Assim, poderemos identificar facilmente outras páginas da página inicial. OK. Agora podemos adicionar setas a essas páginas Aqui, eu seleciono a seta, vamos aumentar, depois clico e arrasto assim. OK. Na seta, podemos adicionar esse estilo assim, e agora devemos ter uma linha para criar uma linha, clicar na linha e clicar e pressionar shift, depois adicionar lineTo e colocar a seta assim OK. Na verdade, vamos diminuir o tamanho da seta selecionar essas duas setas e aumentar a largura Selecione as setas e aqui, vamos adicionar 55 para ser, Quanto mais duas serão Lo assim Agora, vou duplicá-los assim. Assim, aumente isso aqui Agora vamos adicionar, vamos duplicar essa seta e adicionar isso Na verdade, não precisamos dessas pontas de flecha. Eu vou fazer isso e aqui está. Portanto, em nosso site, precisaremos ter uma subpágina sobre nossos fornecedores Então, vamos duplicá-lo e adicionar os URLs de outras páginas para visualizar OK. Então vou diminuir esse tamanho de fonte para cerca de 30, e vamos colocar assim e vamos mudar essa cor para essa cor. OK. E agora vou duplicar essa seta e vamos colocá-la assim Em seguida, duplique-o novamente, mude a posição. OK. Agora vou remover a ponta da flecha desta linha e só precisamos dessa flecha aqui. OK. E se você não tem ideia como criar o mapa do site para o seu site, pode verificar o site do seu concorrente e ter Para nós, aqui está o mapa do site. Agora temos todas as páginas que queremos criar. Além disso, nesta seção de blocos, precisaremos ter uma única postagem de bloqueio. Vou duplicar isso e colocar assim. Em seguida, vou adicioná-lo como um único bloco quatro, como este. Vamos ver o mapa do site, clicar na moldura do mapa do site e clicar no ícone atual, e aqui está o mapa do nosso site , na verdade, por que não tenho certeza se deveria colocar isso. Temos que adicionar essa linha dentro do quadro. OK. Agora está perfeito. 43. Selecione fontes para site: Olá, pessoal. Agora é hora de selecionar a tipografia para o nosso site Existem basicamente duas maneiras de fazer isso. O primeiro método é verificar seus concorrentes e inspirações de design no moodboard e descobrir o que funcionará melhor Vamos ver. Aqui, temos a fonte seri para o título e a fonte San seri como parágrafo Só precisamos de dois tipos de fontes, uma para título e outra para parágrafo Vamos ver outros designs. Aqui, temos o cabeçalho e o parágrafo Sanseris e aqui temos o Sansorifont e aqui novamente, temos o Sanserifont e aqui temos Ceri como cabeçalho, verificando nossos concorrentes, você pode entender qual tipo de tipografia funcionará com nosso você pode entender qual tipo a fonte Ceri como cabeçalho, verificando nossos concorrentes, você pode entender qual tipo de tipografia funcionará com nosso site. Dessa forma, minha conclusão é que usar Sanserifont será a melhor opção para o parágrafo principal. Usarei duas fontes San Serif diferentes Então, o segundo método é que podemos pedir a IA e obter a opinião deles. Então, vamos fazer isso. Aqui estou no HatGPT, então clico em Newhat. Então, eu apenas adiciono nosso prompt para que você possa encontrar esse prompt na seção de recursos, e aqui, vou mudar isso, pois você é um web designer que cria um site para a JB Family Clinic então aqui podemos adicionar a tarefa para que a tarefa seja, eu quero que você esteja aqui Eu tenho que mudar de criador, eu quero que você escolha Ty como gráfico para o site da JB Family Clinic Em seguida, terei que fornecer mais informações, então fornecerei aqui, aqui estão mais informações e depois vamos adicionar as informações. Podemos obter esses requisitos de informação. Então, aqui, temos o propósito, para que possamos copiar o propósito do site, público-alvo e o objetivo principal para descobrir a melhor fonte. Então, selecionarei primeiro, selecionarei essa pergunta e depois copiarei e colarei assim. Pressione Enter para criar um espaço. Em seguida, copie e cole assim. Então, vamos fazer isso aqui. Isso. Agora, para este, removerei, darei três opções e tentarei gerar a saída. Aqui temos as informações. Para o site Kenic da família JB, a tipografia deve reproduzir o valor da confiança, cuidado e acessibilidade, mantendo o profissionalismo a tipografia deve reproduzir o valor da confiança, cuidado e acessibilidade, mantendo o profissionalismo. Então, temos os tipos primários como SunSerifFamily e os nomes das fontes como Poppins e Então temos o motivo e aqui, onde devemos colocar? Devemos colocá-lo nas manchetes, para que possamos colocá-las no subtítulo Em seguida, temos a fase de digitação secundária, como se fosse uma família depois temos essas duas fontes, mas o problema é que, se adicionarmos fontes da família Serif ao parágrafo, pode haver um problema de legibilidade, então é sempre melhor verificar essas fontes antes de adicioná-las ao site Também temos tipos de sotaque, mas precisamos apenas de dois tipos de fontes, uma para título e outra para Vamos ao Google Fonts e verifique essas duas fontes. Mesmo que essas fontes não sejam boas para o site, entendemos que a SanseriFont será boa para o título e aqui está uma família de fontes Serif, mas quando verificamos aqui, nosso humor, todo projeto tem fonte do tipo Sun Agora vamos às fontes do Google. Agora estou em phones.google.com. Aqui podemos conferir as fontes sugeridas. Vamos copiar os quatro pinos e , em seguida, podemos pesquisar diretamente a fonte aqui Aqui está a fonte de quatro pinos, aqui, podemos definir os tamanhos dos títulos Vamos defini-la como 55 e aqui estará a aparência e a fonte normal 55 ficará ótima em nosso site. Vamos descobrir a fonte do parágrafo sugerida pelo GPT, então será essa, vamos copiar a fonte e vir aqui e pesquisar a fonte e aqui estará essa fonte Vamos rolar para baixo, e essa é a aparência quando a adicionamos como fixador do parágrafo 16 Como eu disse antes, temos que considerar a legibilidade Se costumarmos usar a fonte Serif para o parágrafo, não será fácil de ler para alguns usuários No entanto, algumas fontes modernas são melhores para parágrafos, mesmo que precisem do tipo de fonte Si. OK. Agora, de acordo com esta placa de modo, o subtítulo do título e parágrafo devem ser fontes sensoriais Vamos descobrir o Sanserifon, basta acessar Google Fonts e usar o filtro e clicar no filtro Em seguida, role para baixo e aqui definiremos o sensor de teste de fonte. Se clicar em, agora vamos ver as fontes do nosso site Eu gosto dessas fontes, então vamos abrir com o botão direito do mouse e abrir na janela nib as últimas fontes sugeridas pela HG PT, então vamos abri-las também e rolar baixo e descobrir a melhor fonte para o site No entanto, se você já tem um logotipo e diretrizes de marca, precisa segui-las, usar fontes semelhantes à fonte do seu logotipo e, se não conseguir encontrar a fonte A, basta encontrar uma fonte semelhante. Agora, aqui eu encontrei três fontes adequadas para o título. Agora vamos encontrar apenas um deles para fazer isso. Aqui, posso defini-lo como 60 e usaremos o normal e ficará assim no site. Se formos até, vamos definir o tamanho como 60 e teremos que usar essa fonte normal, normal ou clara, o tamanho claro é muito fino, normal será bom. Eu ficarei assim e encontramos a fonte Manro, Mnro e vamos aumentar o tamanho para 60 e a fonte normal ficará assim Dessas três fontes, usarei essa última fonte como fonte, então clico em obter fonte e ela será adicionada ao bucket Agora temos que encontrar a fonte para os parágrafos. Vou remover essas duas fontes e, em procurar fontes, selecionamos os sensores e agora vamos rolar para baixo e ver algumas fontes para usar. Vou abrir este telefone e também este e este. Vamos rolar para baixo e aqui vai aparecer no texto do parágrafo. Então, se eu clicar aqui e continuar na maior parte do tempo, podemos ver onde usar essa fonte. Aqui, é um senso público que é uma forte fase de tipo natural para interfaces, texto e título Podemos usá-lo como texto, o que significa parágrafo, e então, se formos aqui, não aqui, se formos para essa fonte, vamos ver se ficará assim no parágrafo. Vamos ver os detalhes aqui, temos detalhes e vamos dizer que ele foi projetado para fins de exibição, mas mantido legível o suficiente para ser usado também no tamanho ismll Este podemos usar no parágrafo. Aqui, vamos colocá-lo como médio. Quando adicionarmos médio , ficará muito melhor. Vamos verificar este e ele ficará assim no parágrafo. Vamos ver, no telefone, digamos que fi tree é uma fonte sensorial geométrica limpa e amigável para uso em laboratórios móveis de bandas web É difícil e crees que usamos para texto. É claro que eu digo que podemos usá-lo para texto. É perfeito para botões e etiquetas curtas. Em maiúsculas, é perfeito para botões e rótulos curtos . Vou usar essa fonte de ajuste como nossas fontes de parágrafo, então clico em Obter fonte e agora temos essas duas fontes e removerei esse trabalho. Se me lembro, usamos essas quatro, aprendemos sobre as fontes do Google em nossas lições anteriores. Eu clico em Premo e aqui estão as fontes que vamos usar Agora, o que precisamos fazer é definir essas fontes no arquivo Figma Na próxima lição, vamos fazer 44. O que é uma folha de adesivo: Olá, pessoal. Vamos falar sobre algo realmente prático e importante para web designers. É Itigai. O que exatamente é um Itigahi? Pense nisso assim. É uma coleção de elementos de design que você usará repetidamente ao criar um site. Esses elementos podem ser botões, ícones, logotipos, paletas de cores e até fontes É como um kit de ferramentas que você prepara antes de criar seu site Não apenas antes de criar, você adicionará mais itens à planilha Itiga enquanto cria o site Por que precisamos da folha Itiga? Bem, quando criamos sites, queremos que tudo pareça consistente para que tudo corresponda em todo o site. Então, vamos começar a criar um conjunto de estilos. Agora, vou ao nosso arquivo Figma e clico em conframe e crio um quadro como este Vamos aumentá-lo assim. Em seguida, vou mudar o texto para uma folha de adesivos. Ok. Na Figma, criamos estilos e variáveis que podemos salvá-los para uso posterior Podemos criar uma fonte de paleta de cores, botões, ícone ou algo parecido na planilha Itera e salvá-los como variáveis ou Vamos começar. Primeiro, escolhemos nossas fontes, removerei as guias desnecessárias e depois clicarei no ícone deste cartão nas fontes do Google, e aqui temos nossas fontes Então, vamos clicar aqui, pressionar T, criar uma seção ou teste chamado Tipografia, destacá-la e aumentar o tamanho para 60 Ok, 60 é demais, então vamos diminuí-lo um pouco como 42, certo. Agora, aqui, vou duplicar esse texto e vou alterá-lo como cabeçalho e aqui podemos selecionar a tipografia do cabeçalho que Escolhemos Lato como tipografia principal. Vamos copiar isso e vir aqui. Então, aqui, vou defini-lo como lato e vamos selecionar o tamanho como 60, então vamos torná-lo regular Agora vou alterar o cabeçalho do texto 60, 60 é o tamanho e regularizar a fonte do tweet Ok. Agora temos o texto do cabeçalho e vou duplicá-lo, vamos adicionar o tamanho entre 20 Aqui, vamos adicionar entre o tamanho 30, e aqui vou adicionar parágrafos Na verdade, clique duas vezes nele e remova-o. Essa é a palavra correta, e o texto do parágrafo será Vamos verificar o texto do parágrafo. É uma árvore Fk. Vamos selecionar a árvore PF. Ok, aqui temos o e aqui, digamos que o tamanho seja 200, e o normal ficará bem. Vamos alternar o tamanho de uma pessoa. Ok. Agora temos a fonte do parágrafo, fonte do cabeçalho e vamos duplicar isso Vamos duplicá-lo duas vezes, e aqui teremos um subtítulo e aqui teremos Na verdade, se quisermos, podemos adicionar o título da fonte dois, mas vamos adicioná-lo assim. Então, para sub fdding, definirei o tamanho da fonte como 30. Ok, e vamos fazer com que seja médio. Parece muito grande, então vamos fazer com que seja 25 e o normal será bom. Então, vamos mudar para 25 regulares. Agora teremos que adicionar o tamanho do botão. Parágrafo, temos que mudar isso para 20. Em seguida, o tamanho do botão será 20 valores normais e vamos definir a caixa como maiúscula. Vamos fazer com que seja de tamanho médio. Vamos pegar 20. Agora vou mudar a posição assim. Essas serão as fontes que usaremos. Além disso, podemos criar isso de uma maneira melhor. Ou seja, vou copiar este e vou renomeá-lo como cabeçalho e vamos mudar seu tamanho para 30 e vamos adicionar isso Então eu vou colocá-lo aqui. Coloque assim, então aqui podemos alterar o nome da fonte como lato e podemos fazer isso aqui, duplicar isso aqui e torná-lo subdin assim, então aqui vamos mudar o nome da fonte subwdingo O nome da fonte é week tree. Agora temos que pegar isso e será botão, botão. Então aqui, vamos alterá-lo para Petree e torná-lo espaçado como 30 30 E então vamos duplicar esse. Será um parágrafo, e aqui estará da figura três ao normal. Ok. Agora está muito claro. Nós apenas adicionamos tipografia ao nosso istigast e então podemos criar tipografia Então, para fazer isso, selecione o tipo de molho e clique aqui. Em seguida, no estilo de texto, apareça e clique neste ícone de adição. Vou defini-lo como cabeçalho e clicar em estilo criativo. Vou clicar aqui. Vamos fazer isso com mais facilidade. Clique aqui e clique no estilo de texto, clique neste ícone de adição e adicione-o assim. Então, vamos fazer isso para texto do botão dois e clicar em estilo concreto, e vamos fazer isso para o texto do parágrafo dois, assim Ok. Então, vamos adicionar esses estilos ao texto, então vou criar um teste como Hello every one. Como você está? Portanto, este texto atualmente é de sentido aberto, então eu clico que o texto aqui é typer graphiton Eu clico em aplicar Itis e se eu selecionar o cabeçalho, ele mudará para o texto do cabeçalho. E se eu clicar em C subbedin, ele mudará para subbedin. Se eu clicar nos botões Contra, ele mudará para o texto do botão. A vantagem é pensar que temos muito texto como esse em todo o site, temos muitos parágrafos e achamos que precisamos alterar o tamanho do texto em todo o site. Podemos clicar facilmente no texto que criamos na folha de estilo Nesse caso, é o texto do parágrafo, e aqui podemos clicar e depois clicar neste ícone Editar estilo. Então aqui podemos mudar o tamanho. Vamos definir como 16 e pressionar Enter. Então, quando eu mudar isso para 16, cada instante ou cada estilo de parágrafo que adicionamos ao site mudará. Se mudarmos para 50 , mudará para 50 assim. Essa é a vantagem de adicionar seus tipos e criar uma folha de adesivos Vamos defini-lo como dois. Agora encontramos a tipografia do nosso site. Vou diminuir essa folha de adesivos assim. Na próxima lição, selecionaremos cores para nosso site. 45. Crie uma paleta de cores: Olá, pessoal. Vamos selecionar cores para o site da nossa clínica. Há duas maneiras de selecionar cores principais ou cores primárias para o nosso site. O primeiro método é que podemos usar o guia de emoções coloridas e encontrar a cor correspondente. Agora estamos criando um site para uma clínica. Quando pensamos em limpar um hospital médico, que tipo de emoção será desencadeada. Aqui, temos natureza equilibrada, crescimento pacífico, saúde aqui dentro, saúde significa nutrição e a cor verde relacionada à saúde dos alimentos. No entanto, confiamos em uma força confiável. Quando pensamos em médico, devemos ser capazes de confiar nele, especialmente quando falamos sobre família, a confiança e a confiabilidade são essenciais para que possamos escolher a cor primária como a cor azul Existe outra maneira. Isso significa que podemos verificar nossa placa de modos. Quando verificamos nossa placa de modos, vemos claramente que a cor azul está visível em todos os lugares. Depois, temos as cores branca e preta. O primeiro método é usar o guia de emoções coloridas e o segundo método é verificar nosso quadro de humor e selecionar a cor. Agora selecionamos nossa cor como azul e, em seguida, temos que criar a paleta de cores Para criar a paleta de cores, vou para coolers.co e aqui, clicarei em iniciar o gerador e usaremos a regra 60, 3010 para nosso uso de cores, precisamos apenas de três cores como nossa cor principal, então removerei duas delas Agora temos três cores. Vamos selecionar nossa cor primária essa cor será azul. Vou deixar essa cor azul um pouco mais clara assim, e então temos que selecionar mais duas cores. Uma cor será obviamente branca e a segunda cor será escura. Quando eu seleciono a cor escura, não prefiro muito escuro. Eu vou escolher um pouco menos escuro como esse. Agora, acabamos de selecionar três cores para o nosso site. Ainda assim, temos que fazer uma coisa. Ou seja, verifique a legibilidade dessas cores. Vou clicar aqui e copiar o código de cores, depois vou para colors.adobe.com e aqui, clico neste botão Então, a partir daqui, irei para a ferramenta de acessibilidade e, aqui, selecionarei a cor copiada como cor de teste Na verdade, precisamos definir isso como fundo e, em seguida, selecionar o branco como cor do texto. Vamos copiá-lo daqui e vamos definir o branco como cor do texto. Nesse caso, fica pálido. Não podemos usar branco nesse fundo azul. Vamos verificar se a cor preta e a cor branca são adequadas para fazer isso, adicionarei essa cor de fundo como preto e testarei a cor como branco e ela passará nos três testes e vamos alterar a cor do texto e a cor de fundo ainda está correta, o que significa que encontramos duas cores. Então, vamos bloquear essas duas cores, e agora temos que mudar essa cor azul. Então, vamos torná-lo um pouco mais escuro assim, e vamos copiar essa cor Então venha aqui e vamos colocá-lo como cor de texto. Então, em pequenos testes, ele ainda falha. Então, vamos mudar a cor, mas ela ainda falhou, então precisamos deixar isso mais escuro. Vamos ver como funciona com esse tipo de cor e copiar a cor presente agora que ela passou, que significa que selecionamos com sucesso a cor primária. Mas se essa cor não for a cor azul que você gosta, podemos mudar a cor a partir daqui e ver que tipo de cor será adequada. Então, quando mudarmos a cor, a proporção será alterada. Então, quando o número for maior, isso significa que teremos melhor acessibilidade e os usuários poderão dar uma boa olhada. Então, vou selecionar essa cor como nossa cor primária e agora temos três cores. Ilhota essa cor porque é uma cor brilhante e agora temos essas três cores Vamos ver nossa ficha de Itagia. Aqui está nossa planilha Itiga e vamos criar um novo texto. Vamos duplicar essa e mudar as duas cores. Vamos adicionar nossa paleta de cores. Para adicionar nossa paleta de cores, basta clicar em retângulo e criar um retângulo Vamos definir com 150 por 150 e só temos três cores. Vou duplicar isso por três vezes. E agora vamos copiar essas cores. A partir daqui, clico aqui para copiar esse azul e clicar no primeiro retângulo e alterar a cor do campo para essa cor azul Então temos essa cor branca, copie e cole assim. Quando a colamos, a cor não fica visível porque nosso fundo é branco. Então, se pudermos mudar esse fundo para uma cor diferente como essa, vamos mudá-lo para a cor verde ou podemos adicionar o traçado para esse cubo ou retângulo Vamos adicionar Etroke, selecione o retângulo e clique em Acabei de adicionar o astro preto e aqui vamos selecionar nossa terceira cor. Copie isso. Vamos testar essa cor com ela. Quando o testamos, ele ainda falha, o que significa que não podemos usar essa cor azul em fundo preto. Temos que usá-lo apenas em fundos brancos. Copie, vá aqui e clique aqui, depois adicione como próxima cor. Agora temos cores. Então, agora podemos criar estilo. Então clique aqui e clique neste ícone de adição, e vamos definir esse estilo como preto, e vamos clicar no branco e clicar aqui, clicar neste ícone de adição e definir essa cor como ela e, em seguida, clicar nessa cor azul. Clique aqui, clique no ícone de adição, defina-o como azul e clique em Createtyle Ok. Agora temos nossas cores e tipografia Na próxima lição, vamos criar um logotipo para nosso site. 46. Crie um logotipo de marca: Olá, pessoal. Vamos criar um logotipo para o nosso site. Temos tipografia e cores. Agora vamos criar o logotipo. O nome do nosso site é BG Family Clinic, então vou copiá-lo e vir aqui e colar aqui. Então, o que vou fazer é criar um texto, predefinir e criar texto aqui Em seguida, colo esse texto e removerei essa parte da clínica familiar. Na verdade, eu posso remover esse. Em seguida, vou mudar essa tipografia para cabeçalho. Em seguida, clicarei em desanexar Istile. Quando clico em Detachtyle, posso alterar livremente Aqui, vou deixá-lo ainda mais ousado e vamos aumentar os lados para 78 assim. Em seguida, mudarei a cor de preenchimento para essa cor azul, agora temos que criar o resto do logotipo. Vou clicar em T, clicar aqui, colocar esse texto que copiamos e aqui temos a parte da clínica da família. Agora vou clicar aqui e clicar em Chad. Então, o que vou fazer é separar o estilo E e colocá-lo assim Vamos adicionar espaçamento como 20. Então, vou aumentar mais essa parte do JB. Agora vou clicar neste texto e vamos clicar na parte inferior da linha. Na verdade, está tudo bem. Agora vamos aumentar novamente esses 20 destacar os dois e clicar em Alinhar o centro vertical Agora vou mudar a cor desse teste de clínica familiar para preto. OK. Agora, o que eu faço é destacar esses dois itens e pressionar Command G para agrupá-los. E agora acabamos de criar um logotipo simples. Podemos fazer muito mais coisas com esse logotipo, mas essa é a maneira mais fácil de criar um logotipo e vamos criar outra versão desse logotipo. Então, para fazer isso, pressionarei novamente T e adicionarei JB assim Em seguida, clique aqui, defina como texto do cabeçalho e clique no link para desanexá-lo, e então vamos aumentar esse tamanho para negrito E agora vamos aumentar os tamanhos como 88, ok. Depois, podemos clicar em T e adicionar o resto do texto e só obtemos a parte da clínica familiar e clicamos aqui no título, então podemos colocar assim Então, podemos aumentar esse texto conforme quisermos. Vamos fazer com que seja 102 e vamos adicionar esse espaçamento em seis, então podemos selecionar os itens e clicar no conteúdo horizontal da linha Então, podemos fazer algo assim. Vamos fazer essa família na cor azul. Então vamos selecionar essa parte B e vamos torná-la na cor azul. Não parece bom. Se quisermos, podemos simplesmente fazer essa parte do Blow na cor azul. Há várias maneiras de adicionar algumas linhas ao redor desse logotipo. Por enquanto, isso será bom para o nosso trabalho. Também podemos fazer algo assim. Então aumente para 50, 50 é demais, 15, e vamos mudar essa cor para realmente torná-la azul. Também podemos fazer algo assim, mas é 7,5 e seguida, vamos clicar na seta e criar uma seta como esta. Não é uma seta, é uma linha, clique na linha e, novamente, clique assim, então vamos colocar essa linha aqui e temos que fazer o tamanho como um. Também podemos fazer algo assim. Há muitas coisas para fazer isso. Há muitas coisas para fazer, mas a maneira mais simples e fácil é criar esse tipo de logotipo. Eu vou ter todas essas informações. Agora posso clicar nesse logotipo e clicar na porta. Em seguida, defina o tipo de arquivo como PNG, aumente o tamanho para dois x clique em Download e o download será feito desta forma. Vou mudar seu nome para o logotipo JB. Vamos duplicar este e torná-lo um logotipo. Agora, acabamos de criar um logotipo simples para nosso site. 47. O que é componente Figma: Olá, pessoal. No FIGMA , temos um recurso chamado componentes. Os componentes são objetos reutilizáveis que podem nos ajudar a criar e manter um design consistente em todo o site, para que possamos transformar qualquer elemento ou item na tela Figma Então, vamos fazer parte desse logotipo. Para fazer isso, basta selecionar o logotipo. Quando seleciono o logotipo, posso ver no nosso lado direito temos o item que selecionamos e aqui temos um pequeno ícone chamado criar componente. Eu só toco nele. Quando fiz isso, esse logotipo se transformou em um componente. Quando você se transforma em um componente, destaque do item será virado índigo Se eu clicar aqui, ele será exibido como. Deixe-me aumentar o design. Se eu clicar no elemento normal, ele será destacado em azul. Mas se eu clicar no componente, ele será destacado como índigos Também na seção da camada lateral esquerda, ele dirá que é um componente. Agora, como usar esse componente para demonstrar isso, vou apenas criar um quadro e vamos criar outro quadro. Agora acho que preciso adicionar esse logotipo a esse quadro para fazer isso, temos um método fácil de usá-lo, podemos acessar a guia AZA no nosso lado esquerdo. Eu apenas clico nele e quando clico nele, posso ver bibliotecas aqui. Se eu quiser, posso simplesmente pesquisar o logotipo da biblioteca. E o logotipo aparecerá ou, se eu clicar em declarações locais, o logotipo estará aqui Agora eu só preciso clicar aqui e clicar em Inserir instantâneo. Agora podemos editar aqui. Instância significa uma cópia desse componente principal, o que significa que se eu fizer alterações nesse componente, isso afetará a instância desse componente. Vamos editar esse quadro para clicar aqui, clicar em Inserir instantâneo e, em seguida, adicionarei como Ok , para demonstrar o benefício desse componente, duplicarei assim e clicarei nesse ícone instantâneo separado Quando eu clico nele, ele simplesmente se transforma em um elemento normal. Se eu for para o arquivo, é apenas um item normal, e agora vamos duplicar este assim e assim Agora acho que tenho que mudar essa cor JB para vermelho. Portanto, temos duas versões. Uma é uma instância desse componente principal e aqui está um item duplicado desse logotipo Então, vamos mudar a cor. Aqui, eu seleciono o texto e vamos mudar essa cor para vermelho. Eu clico em separar o estilo daqui e mudo essa cor para vermelho Quando eu mudo essa cor, isso afetará a instância desse componente principal. Então, se eu mudar esse, oh um, ele mudará desse jeito. Mas se você duplicar esse logotipo normal e vamos fazer alterações nesse logotipo individual, é melhor ver essa visualização de toque como esta OK. Agora, se fizermos alterações nesse logotipo, isso não afetará nossos logotipos duplicados Veja, essa é a vantagem de ter um componente. Agora vou remover todos eles e clicar aqui, vamos remover as alterações e aqui, vamos definir a cor para azul. Em nosso site, vamos criar 45 páginas. Então, nesse caso, podemos criar uma instância desse componente. Como podemos alterar os detalhes desse instante. Por exemplo, se eu mudar aqui como um, não afetará o componente principal, mas ainda assim, se eu mudar a cor, isso mudará a cor dessa instância e se eu mudar aqui, dois, isso não afetará essa instância editada porque nós a editamos e vamos tentar mudar a cor. Vamos mudar a cor para azul. Ainda assim, a cor mudará, eu não mudarei o texto porque alteramos o texto dessa instância. Esse é o benefício do componente de uso. No futuro, usaremos mais componentes e você aprenderá mais sobre componentes, veja na próxima lição. 48. Saiba mais sobre componentes com botões: Ok. Agora vamos tentar criar componentes com o botão. Para fazer isso, vou criar uma nova moldura e vamos configurá-la como moldura de desktop. Ok. Agora, aqui, vou criar um botão. Para criar um botão, pressiono T e vamos definir o nome do botão como botão. Nome ou podemos simplesmente dizer rótulo. Em seguida, aumentarei seu tamanho para cerca de 20, e vamos mudar a fonte para ferrovia e clicar aqui, colocá-la em maiúscula e depois mudar a fonte regular para semi Ok, agora eu pressiono Shift A para criar layout ou adicionar layout automático a este botão e definirei 30 como preenchimento horizontal e 20 como preenchimento vertical Agora vou mudar a cor de preenchimento para, vamos mudar para a cor verde assim com verde mais escuro Como essa cor, adicionarei cantos como 30, vamos fazer seis. Ok. Agora vou mudar a cor do texto, vamos mudá-la para Y. Agora temos que tornar a cor de fundo um pouco mais escura assim Agora temos esse quadro, então vou renomeá-lo como botão, depois clicarei neste componente de criação e alterarei esse botão para um componente Ok. Agora, como aprendemos anteriormente, podemos adicionar esse botão repetidamente em outros lugares. Vamos fazer isso. Eu vou para Asserts e clico no componente Earl. Aqui temos o botão, depois clico em Inserir instância. Ok, aqui temos o botão, e aqui vou mudar esse texto para aprender mais sobre mim. Ok. Então, se eu mudar a cor do texto para cinza, ela mudará para cinza. quando eu faço alterações como essa, ela muda para nossa instância dessa forma porque esse é nosso componente principal, e aqui está a instância desse componente, o que significa que, se formos avaliar e criar mais instâncias, podemos adicioná-las em qualquer lugar alterando o texto, clicando e podemos adicionar esse tipo de botão em todo o design. Além disso, ainda podemos duplicar essa instância dessa forma e aplicar as alterações que fazemos no componente principal No componente principal, podemos criar uma variante. Variante significa uma versão diferente desse botão. Como exemplo, vamos chamar esse botão de botão primário. Este é um botão primário e acho que precisamos de um botão secundário. E esse formato de botão é o mesmo. Só que não terá a cor do campo em verde. Em vez disso, ele terá uma borda verde e esse texto também será verde. Para fazer isso, podemos selecionar nosso componente principal e, quando eu clicar em selecioná-lo, veremos esse pequeno ícone de adição, chamado advarian. Quando eu clico em con, ele cria uma versão duplicada desse Em seguida, mudará o design desse botão. Vamos adicionar um traço. Eu apenas pressiono aqui e vamos adicionar um traçado com essa cor e vamos fazer isso também. Agora vou alterar essa cor de preenchimento ou remover essa cor de preenchimento. Isso, então eu vou mudar a cor do texto desse botão. Vamos mudar a cor do texto para a mesma cor desse plano de fundo e com pouca luz. Vamos torná-lo mais escuro assim e adicionar a cor da borda ao Ok, agora temos o botão primário e o botão secundário. Então, vamos renomeá-los. Então eu clico nesse botão, e aqui vou chamá-lo de botão secundário secundário. Ok. Quando eu o troco e pressiono o centro, ele chama o botão secundário, e aqui temos o botão principal. Eu chamei de default, podemos alterar esse padrão para o botão principal. Ok. Tudo bem Agora temos duas versões desse botão e podemos criar quantas versões quisermos. Ok, por enquanto, vamos usar essa variante em nosso quadro. Para fazer isso, vou até AsSETS e aqui nosso botão. Quando eu abotoo, podemos ver duas, quero dizer, inclui duas variantes. Então eu simplesmente pressiono nele e, a partir daqui, posso selecionar o tipo de botão que eu quero. Então, clicarei no botão secundário e clicarei em Inserir Instantâneo. Então aqui está, e agora podemos mudar esse nome em uma boa localização assim. E agora pense se queremos fazer disso um botão principal. Então, vamos pensar que teremos aqui para aprender mais. Aqui temos o botão Learn Me e o botão Find Location. Este é o botão principal, e esse é o botão secundário, e eu quero fazer isso como botão primário. Para fazer isso, clico no botão, e aqui temos a propriedade um, basta clicar assim e clicar no botão principal. Basta mudar e obter todos os detalhes desse componente. Os dados do botão principal. Então, se eu quiser tornar isso secundário, posso simplesmente clicar aqui e clicar no botão secundário e podemos fazer isso com qualquer um desses botões. Essa é a vantagem de conhecer componente e saber como adicionar uma variante. Além disso, vamos criar outra variante. Eu apenas pressiono class e, para este, vamos alterar os detalhes, vamos primeiro remover o campo e não vamos criar nenhuma borda de tipo, e vamos mudar a cor do texto para essa cor. Em seguida, vamos adicionar um ícone ao lado daqui. Vamos adicionar o ícone aqui. Para fazer isso, vou até as barbatanas e, a partir daqui, vamos pegar o ícone. Então, vou pegar o ícone do plug-in. Então, eu apenas procuro aqui a fonte Osome, temos ícones de fontosom Eu apenas clico nele e, a partir daqui, vamos pegar o ícone, vamos pegar o ícone. Uma flecha. Vamos selecionar esse tipo de seta. Agora, basta selecionar a seta pressionar Command X e cortá-la. Se você é usuário do Windows, você pode pressionar Control X e depois eu pressionar Command V. No seu caso, será Control V. Então teremos um design como este. Eu clico aqui e vou aumentar isso assim. Não precisa mais dessa seta, círculo ALT, basta excluí-la. Ok. Agora, aqui, vou clicar nesse logotipo e vamos mudar esse logotipo para essa cor. Ok. Agora eu clico nessa variante e aqui, eu posso mudar entre os tamanhos. Vamos fazer com que seja como Ok. Agora, o que posso fazer é adicionar isso ao nosso design. Então, antes de adicioná-lo, vamos renomear esse botão para simplesmente clicar no botão, clicar no botão e vamos alterá-lo para simples secundário primário, botão simples O nome não é importante. Ok. Agora, o que posso fazer é adicionar esse botão também. Então, se eu for para o AZAS, clique aqui e aqui, altere a propriedade para botão simples e clique em inserir instância, acrescentaremos que poderemos adicionar esse botão assim Eu vou para Fs. E agora vamos adicionar todos esses botões dentro da moldura da área de trabalho desta forma. Ok. Agora, aqui, eu posso mudar o texto. Vamos alterá-lo para ir para a próxima etapa como essa. Então, agora, se quisermos, podemos simplesmente clicar no botão e alterar o design desta forma. Veja, isso é importante saber sobre o componente e ter uma ideia sobre a variante. Isso nos ajudará a manter a consistência em todo o site. 49. Como encontrar conteúdo para design de sites: Olá, pessoal. Se o cliente não estiver fornecendo conteúdo de texto ou imagem, precisamos encontrá-lo. Primeiro, vamos ver como encontrar conteúdo de imagem. Para fazer isso, podemos usar sites gratuitos de imagens históricas, como pixadt com ou pixabay.com Essas imagens são isentas de royalties, o que significa que podemos usá-las em nossos produtos No nosso caso, temos que encontrar imagens relacionadas à clínica familiar. Vou pesquisar algo como uma clínica familiar, e aqui estão as imagens que obtivemos. Eu clico nesses filtros e aqui vou defini-los como horizontais. Então, só podemos filtrar as imagens horizontais. Vou apenas selecionar algumas dessas imagens, então eu as abro na Nova Janela. Vamos abrir esse. Agora vou ao pixabay.com e vamos pesquisar algo como Aqui vou filtrar apenas para pesquisar e encontrar imagens como esta. Eu já selecionei as imagens que precisamos para concluir este projeto quando você cria projetos reais, basta encontrar imagens relacionadas ao nicho do seu site. Agora vamos ver como gerar conteúdo. Para gerar conteúdo, podemos usar GPT ou J Mini. Vamos usar o GPT. Acabei de copiar nosso e vamos preencher esse prompt. Então, aqui você é um web designer e vai criar um site para a JB Family Clinic Então, vamos ao nosso conjunto de requisitos de web design, vamos copiar esse nome, e então eu quero que você aqui, temos que adicionar a tarefa. Quero que você gere conteúdo para cada seção do site. Eu lhe darei o nome da seção e você terá que gerar conteúdo. Então, aqui está a seção de mais informações, podemos adicionar todos os detalhes que coletamos na tabela de requisitos de web design. Então, vamos começar daqui, copiar essa e encarar essa, depois vamos até aqui, passando assim. Um aqui assim, depois vá aqui assim. Essas são as informações que podemos fornecer. Ok, então nós me damos três opções. Temos que mudar isso porque não o enviamos para a seção em que queremos obter conteúdo, então você pode me dar três opções para cada seção quando eu lhe der a seção e apresentar, digamos quando eu lhe der a seção e apresentar, que estou pronto para ajudar a gerar conteúdo para cada seção do site Kenic da família BG Ok, agora eu só preciso adicionar a seção, vou adicionar uma seção como a rosa da página inicial , aqui temos a seção de heróis. Ok, temos título, subtítulo e plano de ação Então, se esta seção não for adequada, podemos falar sobre isso. Posso dizer que também gosto da opção, mas subtítulo e CTA significam apelo O texto no botão é muito longo. Você pode mostrar a eles? Agora eu digo que é muito curto. Então eu posso dizer que ainda é muito curto. E você pode me dar um subtítulo de apenas 150 caracteres. Aqui temos o subtítulo que tem 150 caracteres. Mantenha a conversa assim com CGBD e gere o texto No entanto, sempre leia o texto gerado pela IA antes de adicioná-lo ao seu site. Ok. Agora vou te ver em um web design real e você pode obter todas essas fontes e imagens na seção de recursos. 50. Seção de design de herói: Olá, pessoal. É hora de criar nosso site. Então, vamos começar criando o quadro. Vou criar uma moldura aqui, então clique na moldura e, em seguida, aqui, vamos selecionar a moldura do tamanho da área de trabalho. OK. Agora, de acordo com o mapa do nosso site, primeiro precisamos criar a página inicial. Então, vou renomeá-lo como casa. Em seguida, trarei a estrutura deste site até aqui para que possamos ver claramente esses dois quadros. OK. Agora, aqui, adicionarei uma grade de layout a esse quadro. Para fazer isso, clico neste ícone de adição e clico aqui, depois altero a grade para coluna e a contagem de colunas será 12. E então vamos manter essa cor. E aqui temos que adicionar margem. Vamos adicionar margem como 140. Os dados serão 20. OK. Agora vamos diminuir a opacidade dessas grades de layout dessa forma Agora, se eu quiser, posso salvá-lo. Eu só clico aqui, aplico o estilo e clico nesse estilo criativo e vamos fazer disso uma grade de chamadas e um presente. Agora podemos reutilizar esses dados da grade repetidamente. Como primeira etapa, temos que converter esse quadro um AutoAyouto. Temos que adicionar layout automático a Para fazer isso, eu posso clicar com o botão direito do mouse e aqui eu posso clicar em adicionar OtoaYouto Eu posso clicar no quadro e pressionar Shift A. Quando eu pressiono Shift A, ele adicionou Então, aqui, temos que defini-lo como layout vertical porque vamos projetar o site de cima para baixo. Então, para essa lacuna vertical entre objetos, farei de um a 20, o que significa que teremos um espaço entre duas seções como 120. Então, o padrão horizontal será 140, o que significa que o conteúdo só estará disponível nesta seção. Vamos adicionar a margem de preenchimento da extremidade superior como 20. OK. Agora está pronto. Primeiro, vou apenas aumentar esse design e adicionar uma imagem de fundo à seção de heróis. Vamos criar um triângulo vermelho, eu pressiono o triângulo vermelho, clico assim, depois clicarei neste IgnotoLayout, porque vamos adicionar Então, agora vou fazer WTs 1.440 e vamos fazer alturas 800. OK. Vamos colocar isso assim. Agora vou adicionar a imagem para adicionar a imagem, clico aqui, clico nesta pequena seta para baixo em forma de dedos e clico em Imagem (vídeo). A partir daqui, vou escolher a Imagem 04, então clico em Abrir. E agora vou clicar no retângulo e essa imagem será adicionada assim Então, agora, se eu quiser, posso definir o corte e ajustar a posição. Então, vamos ajustá-lo assim. OK. Agora vamos verificá-lo no modo de visualização, para que fique assim. Na próxima etapa, precisamos adicionar cores de sobreposição Sem adicionar cores de sobreposição, não poderemos adicionar texto porque isso afetará a legibilidade da página inicial Para adicionar sobreposição, basta clicar nesse preenchimento e clicar em AddFll e aqui podemos aumentar O que vou fazer é adicionar o gradiente. Radiante significa que em um lado, podemos adicionar cores mais escuras e do outro lado, podemos adicionar cores mais claras Então, vamos fazer isso. Portanto, o tipo radiante será linear. Podemos mudar a posição assim. Então, para este, vou definir a cor clara na parte superior e a cor escura na parte inferior. Então, vamos clicar aqui. Então, aqui está a cor da luz. Vamos definir como 70, e aqui temos a cor escura. Então, temos que aumentar a cor escura. Ah, e a partir daqui, eu vou fazer 100. Então, podemos ajustar essas cores. Então, no topo, vamos torná-lo brilhante, vamos adicionar 25 e aqui, vamos torná-lo como 80. Sim. E se eu quiser, posso fazer assim. Então, vamos aumentar um pouco mais. OK. Agora, ficará assim. Então, basta adicionar um gradiente linear e, se quisermos, podemos alterar essa opacidade para baixo e torná-la mais clara Vamos fazer com que seja como em. Vamos clicar nesse I para aumentar nossa grade de layout e ela ficará assim. Agora nosso plano de fundo está bom, na próxima etapa, temos que adicionar o conteúdo. Então, vamos fazer isso na próxima lição. 51. Menu de design: Olá, pessoal. É hora de criar o menu. Antes de criar o menu, vamos criar uma moldura para toda a nossa seção de heróis. Para fazer isso, basta clicar no quadro e clicar aqui. OK. Então, o que eu faço é definir a largura como recipiente de preenchimento e vamos definir a altura como 800 porque 800 é a altura desse fundo. Agora, essa moldura é maior que o fundo. Então, para corrigir isso, lembre-se: adicionamos 20 alinhar verticalmente a moldura em nossa estrutura doméstica Então, vamos defini-lo como zero. Quando eu o defino como zero, esse quadro se encaixa perfeitamente no plano de fundo. Agora vou mudar esse nome como herói. OK. Então, o que eu faço é adicionar o layout automático a esse quadro de herói, selecionar o quadro e pressionar Shift A. Para o layout, definirei o layout vertical e selecionarei o alinhamento superior central como posição e poderemos alterar essas coisas posteriormente Em seguida, removerei o preenchimento horizontal e o definirei como zero. Em seguida, vamos clicar no desvanecimento individual. Ícone. Então aqui, vamos defini-lo como na parte inferior, vamos torná-lo zero. Tudo bem. Agora é hora de criar o menu. Não vou criar esse tipo de menu. Vou criar um menu diferente. Então, vamos começar. Primeiro, para criar o menu, clicarei no quadro e clicarei aqui. Em seguida, definirei com um recipiente de preenchimento e vamos clicar em Preencher e adicionar cor de preenchimento. Vamos adicionar a cor branca, mas ela não apareceu porque temos que colocar essa imagem acima da seção do herói desta forma. Ok, agora está aparecendo. Agora eu clico na moldura e vamos definir altura como 130 Ok, muito melhor. Podemos alterar esses tamanhos enquanto eles estão projetando. Em seguida, adicionarei o canto como 20. OK. Agora, neste quadro, criaremos nosso menu e ele ficará muito melhor do que esse menu normal, então vamos criá-lo. Primeiro, clicarei no quadro e pressionarei Shift A para convertê-lo um layout automático ou adicionar um layout automático a esse menu. Em seguida, toco duas vezes na moldura e mudo seu nome para menu principal. OK. Agora, vamos alterar as propriedades. Precisamos de um layout horizontal porque vamos criar um menu da esquerda para a direita como este menu , então não precisamos de preenchimento horizontal, torne-o zero e não precisamos de preenchimento vertical para torná-los Então, por enquanto, vamos manter o espaço horizontal entre os objetos como dez. Em seguida, definirei uma linha à esquerda no centro. Em seguida, vamos adicionar nosso logotipo. Você se lembra da lição sobre componentes Convertemos esse logotipo em um componente. Podemos acessar diretamente e criar uma instância desse logotipo usando esta guia Assert. Eu clico em ASes e aqui, clico em Afirmações locais e aqui nosso logotipo Basta clicar nele e clicar em Inserir Instantâneo e depois colocá-lo assim. Vamos aos arquivos. Agora que essa instância ou esse logotipo está fora da nossa moldura, vamos adicioná-la menu principal arrastando-a como OK Agora é maior, então temos que mudar o tamanho para mudar o tamanho. Podemos verificar a folha de adesivos. Na verdade, vamos pressionar Command X ou Control X para cortá-lo e vamos colocá-lo aqui assim. Então eu vou arrastá-lo até aqui. Então, podemos diminuir o tamanho desse texto. É 84, então vamos diminuí-lo e aumentá-lo assim. Vamos 40 55 e temos que mudar esse tamanho de texto assim. Vamos fazer com que seja como 42. Agora, o que temos que fazer é mudar isso entre os tamanhos. Vamos mudar isso como seis e, em seguida, vamos mudar isso com isso. Então, vamos mudar. Vamos pressionar comando ou controle, depois alterar o tamanho dessa forma e colocá-lo no centro, selecionar esses dois textos e vamos colocá-lo no centro e aqui no centro. O logotipo ainda é maior. Eu? Vamos verificar o logotipo no modo atual. Ainda é um pouco maior, vamos diminuir o tamanho, primeiro, vamos diminuir esse aumento do texto para cerca de 50. OK. Então, vamos mudar isso para 35. Vamos colocar como 36. OK. Agora aqui, clique no meio. Vamos mudar para zero, assim. E então eu clico no componente principal e pressiono o comando. Se você usa o Windows, pressione Control e diminua seu tamanho desta forma. OK. Agora a noz está ficando pequena. O motivo é que ele está configurado automaticamente para abraçar, então basta alterar este site para 120 Acho que o adicionamos como um a 20. Vamos ver, 120 será perfeito. E agora vou colocar esse logotipo novamente no assento da estrela. Eu apenas seleciono e pressiono Command X no Windows Control X, depois venho aqui e colo assim e coloco assim. OK. Agora, novamente, vamos ao menu e clicamos no quadro do menu, e agora vamos adicionar preenchimentos horizontais 20. Agora ele se encaixa perfeitamente. Vamos ver o design e ficará assim. Se quisermos, podemos aumentar o tamanho desse logotipo, mas ele fica melhor. Agora temos que adicionar itens de menu Para adicionar itens de menu, podemos clicar em T e clicar assim. Depois, adicionarei um texto como esse e, em seguida, vamos ao mapa do nosso site. Primeiro, copie o texto e clique aqui. Eu obtive as propriedades desse texto enquanto o copiamos. Portanto, o Ipress Control está configurado para desfazer a alteração e eu apenas digitarei madeira B. E então eu vou clicar nesse texto e clicar aqui, clicar em Tipografia, e vamos clicar nos botões OK. Agora, o que vou fazer é duplicar isso quantas vezes uma, duas, três, três vezes Então, vamos duplicá-lo. Controle C, Controle V. Oh, vá lá, nós gostamos disso. Então, vamos adicionar esses outros textos. Temos blocos, então basta clicar aqui e adicionar o Bloco. Então, temos nossos fornecedores. Então, vamos aqui e adicionar nossos fornecedores. Vamos ver se o texto está correto ou não. Adicionar à barra de URL do Google Chrome é bom, então temos que adicionar contato. Vamos adicionar um contato. OK. Conteúdo. Tudo bem, ótimo. Agora, o que precisamos fazer é selecionar todo esse item de menu e pressionar Shift A para criar um AutoAayoutFrame Agora, aqui está esse quadro, então vou renomeá-lo como itens de menu e pressionar Enter OK. Agora vamos para a configuração de layout automático do novo item, então vamos colocar entre os lados como 20, e colocaremos todas essas lacunas horizontais e verticais como zero Parece que está perfeitamente alinhado ao centro. OK. Então, esquecemos a casa. Por que esquecemos a casa? Vamos duplicar e mudar para Início. OK. Agora vou mudar essa cor de preenchimento doméstico para azul. Ok, agora o que temos que adicionar são os detalhes de contato da clínica. Então, eu quero adicionar o número de contato aqui. Então, vamos adicionar esses detalhes. Então, por enquanto, vamos clicar no quadro do menu principal e, no layout automático, vamos adicionar tamanhos como 60. OK. Agora vai ficar assim. Então eu verifico o design a partir daqui, mas podemos fazer melhor. Então, provavelmente na próxima lição, faremos mais coisas. Antes de eu ir, vamos clicar nesta moldura inicial e você se lembra da última vez que ocultamos a grade de layout, clique neste ícone de exibição para torná-la visível novamente. OK. Agora vai ficar assim. 52. Elemento de design nos chame: Olá, pessoal. Agora é hora de criar um número de contato para nós aqui. Para fazer isso, precisamos gerar um número de contato falso. Eu vou para o GPT e adicionarei comandos como criar um número de contato falso nos EUA e dar para adicionar ao lado direito do menu Portanto, forneça um texto claro para adicionar seu presente. Ok, isso parece bom, mas eu não preciso de tempo disponível. Eu só preciso adicionar uma mensagem de texto para ligar para nós. Vou adicionar um comando como se eu não precisasse abrir apenas um número de contato com tipo CTa que leva o CDM à ação Vamos ver, é assim, mas eu ainda não gosto disso. Eu direi que não vou gostar de nos ligar 24 horas por dia, 7 dias por semana e adicionar o número de contato abaixo, mas ligar para dois, quatro, sete deve ser melhor do que isso Vamos ver. Ok, chegue a qualquer hora. Digamos que me dê três sugestões. Em uma versão curta. Ok, vamos adicionar isso, ligue para nós 24 horas por dia, 7 dias por semana e, em seguida, adicione o número. Então, para fazer isso, vou até a estrutura inicial, e aqui é o lugar em que queremos adicioná-la. Então, vou pressionar T e clicar aqui. Em seguida, adicionarei o texto. Vamos copiá-lo. Aqui está o primeiro texto. Eu apenas colo e vamos pressionar o Comando C e o comando V para obrigá-lo e depois passar esse texto assim Agora o que eu vou fazer é no Style, primeiro, vou clicar aqui e mudar a tipografia Vamos definir a tipografia de subhding. Então, aqui, vamos definir isso como uma tipografia de subtração. Então eu sempre seleciono esses dois elementos e pressiono Shift A para adicioná-los ao layout automático. Em seguida, vamos mudar a posição para o layout vertical. Então, vamos colocar entre os lados seis. Ok. Agora, aqui, eu quero que essa classe seja um pouco menor e que esse número seja maior. Eu clico em Conc las 247 e vamos alterá-lo para o tamanho do botão. Isso é melhor. Depois vou clicar aqui e vamos destacar o estilo dessa tipografia do número, depois vamos colocá-la Agora está muito melhor. Agora, o que eu preciso é de um ícone de telefone aqui. Vamos fazer isso também. Para adicioná-lo, precisamos ter um ícone. Vamos pegar o ícone da biblioteca Figma. Aqui, temos ações. Basta clicar nele e, a partir daqui, clicarei no plug-in e no Widget E a partir daqui, podemos obter o ícone do pontosom. Acabei de pesquisar o fontsom Agora, basta clicar neste ícone do pontosom e acho que já o instalei, já o instalei Então, vamos descobrir o ícone e adicioná-lo. Vamos pegar o código do ícone. Vamos pesquisar como se fosse um telefone. Ok. Temos um ícone. Eu apenas clico neste e ele é adicionado assim, então vou apenas selecionar o ícone e colocá-lo dentro da nossa moldura desta forma. Ok. Então, o que vou fazer é selecionar esses dois itens e Pest Shift A para criar molduras diferentes Aqui está o primeiro quadro que criamos para a seção numérica ou a seção de fonte, e aqui está o segundo quadro. Dentro do segundo quadro ou dentro do segundo layout do noto, temos Claus 247 e esse Em seguida, seleciono o primeiro quadro e altero o layout para o layout horizontal. Então, obteremos esse tipo de resultado. Ok. Agora eu quero criar um fundo azul em torno desse ícone. Para fazer isso, seleciono o ícone e pressiono Shift A e o torno Atayou, depois clico em Align Primeiro, adicionamos o Outlayou e depois o transformamos em um centro de linha. Em seguida, clicarei no ícone de adição na cor do campo. Então aqui, na verdade, eu posso clicar diretamente nesse estilo azul como este. Então, o que eu vou fazer é adicionar 20 por 20 assim. Agora, não mudou de acordo com as mudanças para corrigi-lo, vou mudar isso para abraçar o conteúdo Agora vamos fazer isso em dois. Dois pequenos. Vamos fazer com que seja 15 por 15. Agora vou mudar os cantos para 20. Na verdade, ainda é pequeno, mas talvez possamos corrigi-lo, então o que vou fazer é adicionar traçado a essa camada de layout automático para fazer isso. Agora eu clico no layout automático, clique aqui e eu posso e aqui, vamos selecionar nossa cor como azul. Em seguida, clico nesse estilo de desanexação e, a partir daqui, selecionarei a cor azul claro Isso vai funcionar. Depois vou aumentar o tamanho para dez e vamos colocá-lo do lado de fora, na verdade, vamos colocá-lo dentro e mudaremos mais o design. Ok. Agora vou entrar no quadro e selecionar o vetor. Então, aumentarei esse tamanho vetorial para 41 por 41. É 41 por 40. Está tudo bem Agora vou clicar no vetor e alterar a cor de preenchimento para a cor branca. Agora, vamos mudar para 30 32 por 32. Assim. Se fizermos isso 32. Assim. Agora está muito melhor e espero que tenhamos o espaço E. Aqui temos seis como espaçamento. Agora vamos corrigir o Alignu porque isso envolve esse quadro Para corrigir isso, basta clicar no menu principal e alterar esse apresentador automático 62 Agora, basta ajustar de acordo com o espaço que possui Ok. Agora temos um menu completo como este para que possamos clicar no quadro do menu principal e mudar esquerda e para a direita para que possamos fazer seis. Ok. Vamos ver. São como dois a menos. Vamos fazer com que seja como 50. Ok. Agora, aqui está o nosso menu. Parece que são dois compactos. Então, vamos corrigir isso primeiro, podemos reduzir o tamanho dessa fonte para 20 desta forma, depois vamos mudar esse valor para 15, 60, depois vamos clicar no item de menu e vamos fazer entre o tamanho 30. Vamos ver. Agora está muito melhor e nos vemos na próxima lição. 53. CTA da seção de design herói: Olá, pessoal. Agora é hora de criar essa seção. Vamos começar. Primeiro, eu vou aqui e clico no texto, e eu apenas adiciono texto aqui , então vamos adicionar texto como texto de herói. Em seguida, devemos adicionar esse texto dentro. Já está dentro da seção de heróis. OK. Antes de fazer isso, na seção do menu principal, vamos renomear os detalhes desse quadro Este quadro será Ligue para nós e será o ícone de chamada e esse quadro será vamos adicionar um número. Bom. Agora vamos criar o texto da seção Hero ou o texto do CtA. Para fazer isso, eu pressiono o texto T ou Clec aqui e clico Então, vamos enviar um texto como Hero. Agora vou minimizar essa seção do menu principal porque estamos prontos. Assine isso e agora, a partir daqui, vamos selecionar o texto e depois ir para Tipografia e dizer cabeçalho ou selecionar o texto do cabeçalho assim OK. Em seguida, vamos adicionar o cabeçalho que é gerado usando o GPT Aqui está a manchete. Eu apenas copio. Então, pode gerar conteúdo sozinho usando o GPT, ou você pode verificar a seção de recursos lá Você verá um arquivo de texto nesse arquivo de texto Você pode obter o conteúdo que usamos neste site. Vamos adicioná-lo assim. Agora vamos adicionar o sub adingT add subtítulo, vou clicar em T. Desculpe . Sim, vou clicar em T e clicar em curtir aqui. Então, vamos adicionar um texto como esse. Então vamos adicionar esse texto, copiá-lo, adicioná-lo assim. Tudo bem. Agora vamos para a tipografia e alterá-la para subtítulo. Ok, agora temos o subtítulo e o título. Na verdade, se quisermos, podemos adicionar outra linha de texto e adicionar o texto do tipo parágrafo, mas isso é para a reação CtA cod. Portanto, a ação do Cd deve ser clara. Ok, agora o que podemos fazer é criar o botão. Então, precisaremos de mais de um botão. Então, vamos criar um botão e torná-lo um componente. Para fazer isso, vou até nossa planilha Stiger e vamos duplicá-la e chamá-la de botão Agora eu pressiono T, e aqui vou dizer, mas sim. Able, então vou selecionar a tipografia como botões. OK. Agora eu mudo o caminho A para adicionar o layout automático a esse botão. E então, a partir daqui, adicionarei a cor do campo. Vamos adicionar a cor do campo como essa cor azul. E então vamos selecionar o texto desse botão, alterá-lo para branco ou, e selecionar o quadro. Nesse quadro, alterarei o raio do canto Então, para cama horizontal, adicionarei 20, vamos adicionar 30 é maior Vamos adicionar 20 e a parte superior e inferior serão 15. Aqui está o botão. Agora podemos obter diretamente a instância desse botão. Para fazer isso, vou até AsSETS e aqui irei às bibliotecas e clicarei aqui. OK. Agora vou converter isso em um componente. Antes de fazer isso, renomearei esse quadro como VTN. Em seguida, clicarei no botão criar componente e ele se tornará um componente. Agora vou para o nosso design e aqui vou clicar em afirmações e aqui temos o botão, então eu clico nele e clico em Inserir Instantâneo Agora vou para os arquivos, então esse botão está fora do quadro. Vamos adicioná-lo ao quadro do herói. Basta adicioná-lo assim. Agora vamos alterar esse rótulo para solicitar um agendamento. Não vou adicionar a parte de hoje. Vamos adicioná-lo como solicitar um compromisso. Então, quando eu verifico, parece muito pequeno. Então, vamos torná-lo maior. Para torná-lo maior, você pode ir aqui e clicar no texto. No texto, clicarei nesse meio alinhado e agora clicarei aqui, então o preenchimento horizontal será 30 preenchimento superior e inferior será 25 É demais? Vamos fazer. Ok, vamos ver como fica. Ok, muito melhor. Clique aqui e vamos fazer alterações a partir daqui para que possamos ver claramente o que podemos fazer assim. Para esta seção de heróis, devemos ter um botão maior para criá-la. Eu clicarei no componente e, a partir daqui, clicarei nele na variante. Ao clicar nele, podemos criar uma variante do nosso componente padrão, o que significa que ele tem todas as propriedades do nosso componente, e podemos alterar essa propriedade conforme quisermos. Então, vamos mudar isso como se a esquerda e a direita fossem 35 e a parte superior e inferior fossem 25 Sim, isso será melhor. Ok, então eu clico nele. Agora eu clico no botão e, a partir daqui, mudarei o nome para o botão de cabeçalho semelhante e pressiono OK. Agora vamos ao nosso botão e, a partir daqui, podemos alterar a propriedade. Atualmente, é o padrão. Então, se eu clicar no cabeçalho, ele mudará para a variante ou a variante que criamos. Ok, vou selecionar todos eles e pressionar Shift A para adicionar o layout automático, então vou renomeá-lo como CtA Ok, então aqui, vou entre o Japa 220 e a partir daqui, vamos colocar assim, daqui, vou colocar assim OK. Então eu quero que isso seja adicionado ao final desta seção de heróis. Então, vamos tentar fazer isso. Então, atualmente, aqui está a seção de heróis. Dentro da seção de heróis, temos o menu, mas esse CtA está fora dessa seção de heróis Então, se eu fechar a seção do herói, o CtA não fechará, então temos que adicioná-lo dentro da seção do herói desta forma OK. Agora, o que podemos fazer é clicar em selecionar a seção do herói e clicar em uma linha no canto superior esquerdo partir daqui, vou colocá-la entre os lados e, em seguida, definirei a altura dessa seção do herói em 800. Depois disso, adicionarei a adição inferior como 20. Parece que 20 é muito pequeno. Vamos fazer com que seja como 60. OK. Está muito melhor agora e, na verdade, vamos fazer com que seja 40. OK. Agora vamos ver a aparência desse design. Ok, aqui está nosso design. Para melhorar isso, podemos adicionar um subtítulo maior Vamos tentar adicionar um maior. Na verdade, se escolhermos esse subtítulo na opção dois, será Então, vamos tentar adicioná-lo assim e, para corrigi-lo, selecionarei o CTa e selecionarei o tamanho do CTa como recipiente de abraço, e aqui, vamos selecioná-lo como preenchimento Na verdade, ainda precisamos diminuí-lo Vamos colocar assim. OK. Agora vamos ver o design. Vai ficar assim. Vamos mudar o raio do canto para a linha 15. Vamos tentar fazer isso. Eu só clico aqui e vamos mudar 20. Não 20, 15. Vamos fazer isso com este, dois, e veremos como isso afetou o lado. Está muito melhor agora. E eu clico no fundo e vamos aumentar a escuridão do fundo. Eu clico em linear e aqui vou aumentar a opacidade, como se fosse unreno, aqui isole a seção do herói e, na parte inferior, vamos fazer OK. Agora vamos ver o design. Agora vai ficar assim. Podemos fazer algo assim, e será muito melhor agora. 54. Design sobre seção: Olá, pessoal. Agora é hora de criar o resumo sobre nós. Então, vamos fazer isso. Primeiro, temos que gerar o conteúdo, então eu vou para o GPT, e aqui vou contar para gerar um resumo sobre nós com título, título e parágrafo com um parágrafo com Então, estamos prontos para esse comando. Então, agora, quando dermos esse novo comando, ele gerará a seção. Vamos adicionar mais informações, agora é hora de gerar uma seção de resumo sobre nós com título e botão Vamos pressionar Enter e vamos ver, eu tenho três opções. Agora eu quero dizer que quero adicionar dois botões em nossa estrutura, temos dois botões. Vamos Ok, vamos ler essas três opções. OK. Gosto desta primeira opção de título , parágrafo e quatro botões Adicionarei um botão para saber mais e o próximo botão para fornecedores de torres de alimentação Ok, vamos fazer isso. Então, aqui está o arquivo de texto em que eu adiciono todas as informações que gerei com a IA, então adicionarei resumo a este título e a este parágrafo. Em seguida, teremos que adicionar botões para saber mais e adicionar o botão Saiba mais e conhecer os fornecedores de torres Saiba mais sobre os botões e o segundo serão os fornecedores de MO. Agora vamos começar o design. Agora que estou em nosso arquivo Figma, como primeira etapa, clicarei no quadro e clicarei aqui Em seguida, definirei Fame com esse preenchimento e adicionarei alturas Vamos somar como 600. Ok, agora temos a seção. Então, o que vou fazer é pressionar Shift A para adicionar o layout automático. Acabamos de adicionar o layout automático a esse quadro e eu renomearei esse quadro como resumo OK. Agora, como primeira etapa, temos que adicionar uma imagem e vamos adicionar essa imagem. Para adicionar a imagem primeiro, clicarei no triângulo do contrato e clicarei aqui. Ok, nossa altura foi alterada. Vamos clicar em um quadro de resumo qual já adicionamos o layout automático. Então, vamos adicionar essa altura como 600. Ok, agora também devemos remover o preenchimento horizontal e também o acolchoamento vertical Então, aqui, vou definir o item entre o tamanho 20. OK. Agora vou aumentar esse tamanho de imagem assim. Isso. Vamos ver quantas colunas temos? Um, dois, três, quatro, cinco, seis. OK. E para este lado, temos um, dois, três, quatro, cinco, seis. OK. Na verdade, vou diminuir esse tamanho para. Vamos definir essa largura como 520. OK. Agora vamos adicionar a imagem. Para adicionar a imagem, eu clico aqui e clico no vídeo da imagem. Ok, a partir daqui, temos que selecionar a imagem, então deixei esse IMG zero, três imagens e apertei enter Então aqui eu clico no retângulo assim. OK. Agora, o que eu faço é adicionar radice de canto como 20, assim Vamos ver isso no design, para que fique assim e vamos tentar adicionar uma imagem diferente. Eu clico nesse triângulo vermelho e clico aqui, clico nos vídeos de imagens, e vamos adicionar esse tipo de imagem porque eu não gosto dessa cor de imagem. OK. Agora Ok, parece assim. OK. Agora teremos que adicionar esse tipo de informação. Vamos adicioná-los para adicioná-los para fazer isso, eu tenho que criar dois tipos de texto. Vamos gerar esses textos usando o chat GBT. Digamos que uma ação relacionada ao IC. agora preciso adicionar dois textos para adicionar ao redor das imagens, por exemplo, 100% K, temos especialistas como esse. Digamos que me dê três opções do meu inglês está bem. Vamos ver o que isso gera. É muito longo. Digamos que seja muito longo. OK. Gosto dessa primeira opção, então vou copiá-las e colocá-las em nosso documento assim. Ok, acabei de adicionar texto semelhante ao redor das imagens. OK. Agora vamos ao nosso arquivo e vamos criar esses textos mais Ist e nosso primeiro texto será 100% caótico. Vamos criar outro texto e colocar isso assim para obter essas informações. E agora eu crio outro texto como esse, então eu vou. Desculpe, vamos criar outro texto. Então eu vou colocar o texto aqui e 100 por aqui. Então, o que vou fazer é clicar nesse texto e, na tipografia, vou adicioná-lo como Então, para este, adicionarei isso como subbedingo Agora, para esse especialista confiável, adicionarei legendas. Vamos ver se essa fonte funcionará. Sim, parece que vai funcionar. Temos espaço aqui. Acabei de cantar aquele espaço, e agora tenho que adicionar esses textos como este para adicioná-los, vou selecionar dois e pressionar Shift A para adicionar o layout automático. Em seguida, clicarei no layout vertical e o definirei como meio. Então, por aqui, vou colocar o item entre seis, assim. Talvez vamos diminuir para zero. Ele zero será perfeito. Parece que K é muito pequeno, então vamos ver outro texto daqui 100%, vamos copiar este e vamos tentar colocar isso Ok, parece melhor do que apenas K. Sim, vamos adicioná-lo assim Então, o que eu vou fazer é talvez tentar tipografar em botão, o botão está muito fraco. Vamos mudar para parágrafo. Ok, o parágrafo é muito melhor. Sim. O parágrafo está bom. tamanho do parágrafo agora é o que precisamos fazer é adicionar cor e adicionar cor de fundo. Vamos adicionar cor de fundo a esse quadro, selecionar o quadro e renomeá-lo como 100% K, tag ou algo assim Vamos fazer isso assim. Em seguida, clico em mais pode ser preenchido e, por aqui, adicionarei Y. Em seguida, reduzirei os cantos para 20, e agora vou clicar em x e clicar nesse sinal de mais Agora vou adicionar sombra projetada e clicar aqui. A partir daqui, definirei X zero, y zero e vamos tornar a transparência como 15, desfoque será 15 OK. Agora eu tenho que adicionar almofada horizontal Vamos adicionar almofada horizontal como seis, muito melhor e preenchimento vertical OK. A partir daqui, vamos configurá-lo como dois. Ok, 12 é melhor. Tudo bem, acabamos de criar uma peça. Agora, o que eu tenho que fazer é selecionar o elemento que eu criei, então eu clico neste IgnooToayout, e agora eu posso colocá-lo assim Vamos colocá-lo aqui. Vamos colocá-lo aqui. Temos que adicioná-lo fora disso sobre summariection. Para fazer isso, eu o seleciono e vamos adicioná-lo. Vamos primeiro adicioná-lo aqui. OK. Agora, o que eu tenho que fazer é derrubá-lo assim. OK. Agora temos essa seção. Vamos colocar assim, assim, vamos colocar assim. Então, temos essa parte confiável de especialista e, para esta, teremos que adicionar um logotipo. Vamos adicionar o logotipo. Para adicionar o logotipo, clico aqui e vou para conectar o widget San Em seguida, clique nos ícones do Fontosm aqui, pesquisa não é boa Temos enfermeira. Vamos adicionar essa enfermeira. Basta clicar aqui. Vamos colocá-lo fora desse quadro, basta clicar nele e adicioná-lo a um resumo como este. Em seguida, selecionarei esses dois itens e pressionarei Shift A. Agora, adicionarei o layout automático a oito. Em seguida, clicarei nesse layout vertical e o definirei como uma linha, no meio, ok, então aqui não precisamos desses dois ALT de telefone e moldura de enfermeira. Recebemos esses dois quadros quando adicionamos o ícone, então eu apenas os removo. Agora eu tenho que aumentar esse tamanho. Vamos aumentá-lo assim. Vamos adicioná-lo assim, será melhor. Então, para isso entre os tamanhos, vamos adicioná-lo como seis. Agora vamos ver esse. Neste, adicionamos 12 e seis como o tamanho intermediário. Vamos clicar nesse quadro e aqui, vamos renomear esses dois elementos de confiança . Primeiro tago, então eu virei aqui e mudarei a cor do campo Certamente a cor do campo é essa cor branca. Então eu vou aqui e, de fato, posso adicionar um efeito como este Na verdade, já adicionamos efeito a essa guia de 100% de cuidado, então podemos simplesmente clicar nela e, no efeito, pressionarei esse estilo de aplicação e pressionarei o ícone de adição. Em seguida, adicionarei Perfect, 01 e pressionarei. OK. Agora, aqui, posso clicar nessa tag de especialista enferrujada e, a partir daqui, clicarei nela e clicarei em EFFXs como este Então, o que eu tenho que fazer é adicionar almofadas verticais e horizontais como esta Então, vamos mudar esse tamanho para 20. OK. Na verdade, vamos adicionar esse padrão horizontal a dois e o padrão vertical será 220. Ok, é muito melhor. E então eu vou mudar cor dessa enfermeira para, vamos mudar para azul. OK. Parece bom. Agora eu clico aqui e clico neste layout do Igno Auto. Depois disso, terei que colocar assim. Vamos fazer aqui. OK. Na verdade, vamos colocar este aqui assim e este no meio assim, entre a linha de tamanho e aqui, adicioná-lo como 60, 50, 50. Tudo bem, certo. Agora vamos ver o design, para que fique assim. E sempre tentamos criar uma versão minimalista, então não tente adicionar muita coisa. Então, agora é hora de criar o texto. Então, primeiro, pressionarei T e adicionarei esse tipo de texto. Em seguida, vamos adicionar o texto que copiamos daqui. Está em nosso conteúdo. Eu apenas copio e venho aqui. Em seguida, cole e eu mudarei a tipografia para um cabeçalho assim Então, vamos sair desse tamanho para consertá-lo. Eu clico aqui e configuro isso para encher o recipiente assim. OK. Agora, o que eu tenho que fazer é aumentar isso entre tamanhos como este. Vamos aumentar para cerca de 90. Vamos aumentar cerca de 90, não 690. OK. E agora o que temos que fazer é adicionar resumo para fazer isso, eu pressiono T e crio um texto como este, então eu tenho que destacar essas duas seções e pressionar Shift A. E agora temos uma nova moldura de layout automático adicionada aqui, então eu mudo esse layout horizontal para layout vertical, e dentro disso, eu trarei esse cabeçalho para cima e este estará na parte inferior. Então, vamos mudar esse quadro para 22 sobre o resumo Ok. Então, aqui vou definir o tamanho intermediário para 20 e este texto será um parágrafo. Agora, vamos clicar aqui, vamos clicar em nosso arquivo de texto de conteúdo da web e eu apenas copio este parágrafo assim, então vamos colocar esse parágrafo e eu vou alterar esse conteúdo do abraço para preencher, não preencher contêiner de conteúdo, preencher contêiner, então ele será adicionado assim Vamos ver no design real, ficará assim e, o tempo todo, esqueço de mudar a cor do preenchimento. Então, vamos trocar o preenchimento. Clique aqui e clique neste preto porque essa não é a cor preta escura. Isso é um pouco leve. Vamos mudar a cor de preenchimento para essa cor escura selecionada em nossa paleta de cores OK. E agora, a partir daqui, temos que colocar isso no meio para que possamos selar um resumo e mudar sua posição para alinhar o centro esquerdo desta forma Agora temos que adicionar dois botões. Além disso, parece que essa imagem é muito grande, então vamos diminuir sua altura. O comando Iface no Windows deve ser controlado Então eu vou alterá-la, tipo, vamos mudar para 500 assim, e então eu clico duas vezes na imagem e vamos definir a imagem assim. OK. Então eu clico aqui e coloco isso aqui. Ok, agora está muito melhor porque não temos muito conteúdo para adicionar aqui, então agora ficará assim. E agora vamos vir aqui e adicionar nossos dois botões. Para adicionar dois botões, podemos usar os botões que criamos como componente. Então, vamos fazer isso, fazer aquilo. Aqui, vou até AsSETS and asserts, clique aqui. Em seguida, temos esse BTN, clique nele e a propriedade será padrão porque o botão do cabeçalho é maior que o botão padrão Vamos adicionar o botão devolve e clicar em Inserir Instantâneo. Então vamos para o arquivo, e agora temos que adicionar esse botão dentro deste sobre resumo t. Não, sobre texto resumido. Então, vamos adicioná-lo assim. OK. Agora vamos mudar o rótulo do botão. Clique aqui e o rótulo do botão saberá mais. Vamos adicioná-lo assim. Ok, agora vai ficar assim, então teremos um botão aqui também. Vamos criar esse botão. Nesse caso, é esse. Então, para fazer isso, vou criá-lo como uma variante desse botão principal. Para fazer isso, irei ao nosso componente principal aqui. Você se lembra das últimas aulas, nós criamos esse botão. Então, vamos criar uma variante. Para criar uma nova variante, clicarei no componente BTN e clicarei nesse ícone de adição para adicionar uma variante OK. Agora, aqui precisamos criar esse tipo de botão. Criá-lo é fácil, então vamos fazer isso. Então, aqui, primeiro, removerei a cor de preenchimento e, em seguida, clico nessa etiqueta e altero a cor de preenchimento para azul. Em seguida, selecionarei a variante e mudaremos o nome dessa variante para BTN secundário, assim Acho que as palavras estão corretas. Vamos ver. Agora, as palavras estão erradas. Novamente, vamos mudar a palavra assim, secundária tn, presente agora eu clico na variante e aqui vou mudar isso da esquerda e da direita para 20 e manter a parte superior e inferior como 20 Então, o que eu tenho que fazer é adicionar o ícone. Adicione o ícone, eu clico aqui e vou para Fonosm e a partir daqui, vou digitar como Ok, essas flechas não estão bem vendidas. Então, vamos adicionar esse tipo de seta, clicar nela e descobrir onde adaptar Ok. Ele se adapta aqui, basta pressionar o Comando X para marcá-lo, depois clico aqui e colo o Comando V para colar assim. Ok, agora dentro dessa variante e entre o tamanho será seis, vamos mudar essa cor para a cor azul. Ok, vamos diminuir um pouco o tamanho assim. OK. É muito pequeno. Vamos pressionar. Vamos continuar assim. E agora, se quisermos, podemos alterar esse rótulo um pouco mais porque a largura do ícone é maior, então vou manter esse estilo ou separar o estilo e depois alterá-lo para negrito Bold ficará bem. Tudo bem. Agora temos um laboratório como esse. Então eu venho aqui e agora o que eu tenho que fazer é ir para*** em Asats Eu clico no BTN e, a partir daqui, seleciono o BTN secundário e clico Em seguida, vou colocá-lo dentro desse quadro que tem layout automático, o nome do quadro é sobre o texto resumido. Aqui está nossa aposta em nosso botão. Vou apenas arrastar e soltar como aqui. Eu não vim. Vamos tentar fazer isso de novo. Eu adicionei e agora vou mudar a posição do botão assim. Agora vou ver esses dois botões e pressionar Shift A para criar um novo quadro e aqui vou defini-lo como layout horizontal. Ok, o tamanho intermediário será 220, e agora vou alterar esse quadro conforme definido pelo BTN. Acabei de renomear o nome desse quadro para TNS e agora preciso alterar esse texto O texto será enviado para o nosso documento. O texto foi atendido. Os provedores copiam, vêm aqui e colam assim. OK. Agora, vamos ver isso no design. Vai parecer que sim. Isso é muito grande, então vamos mudar o tamanho. Eu simplesmente vou para a variante e vamos reduzir o peso, selecioná-la e trocá-la semivl Médio. Vamos ver, vamos ver, meio funcionará bem. Então, vou aumentar um pouco mais esse ícone. É muito grande. Vamos ficar com isso. OK. Talvez vamos fazer com que esses dois não sejam médios ou semiv Muito melhor. Tudo bem. Agora acabamos de criar o resumo A. 55. Seção de serviços de design, parte 1: Olá, pessoal. Agora temos que criar a seção de serviços. Vamos fazer isso. Primeiro, vou aqui e insira gB, vamos dizer que agora é hora de criar seções de serviços. Forneça-me os serviços mais importantes que prestam clínica familiar e garanta mais de oito serviços nesses vícios. Preciso que você siga esta pequena descrição do nome pmtvis, a descrição do empréstimo e também me dê o título das manchetes do título das manchetes Ok, está gerando Mmm. Agora devo dizer que a pequena descrição é muito curta. Vamos acrescentar que a pequena descrição é muito curta. Me dê uma pequena descrição com até 150 caracteres. Vamos tentar isso. É melhor. Aqui temos os detalhes, essa será a descrição do empréstimo, e eu colocarei todos esses detalhes no arquivo porque podemos usar essa pequena descrição. Na página inicial e em uma página, podemos usar esse formato Então, dessa forma, isso será perfeito. Então, vamos ao nosso documento e eu coletarei todas as informações. E aqui temos que definir o conteúdo da página inicial, assim. Em seguida, adicionarei uma nova seção. Esta será a seção de serviços. Ok, para servir uma seção, vamos adicionar esses detalhes assim, vou copiar todos esses detalhes assim. Em seguida, colocarei e criarei outra seção chamada conteúdo da página e adicionarei o conteúdo que ela gerou antes, esse é o conteúdo, e vou copiá-lo para uso posterior. Ok. Agora, aqui temos uma manchete Isso nos gerou uma manchete. Vamos ver se é bom contar bem, você pode me dar três versões, três opções de escolha para o título do título Vamos essa. Vamos colocar essa como nossa manchete e eu a colocarei aqui Ok. Na verdade, vou colocar isso no Google Doc. Agora vamos começar a projetar. Primeiro, vou para o arquivo Figma e aqui, como fizemos antes, temos que criar um quadro, e renomearei esse quadro como nosso s. Depois mudarei com o recipiente de preenchimento, e aqui, digamos que seja 600 Ok. Agora, o que podemos fazer é criar esse tipo de design. Para fazer isso, primeiro clicarei no texto e esse texto será o título Vou fazer com que pareça um título e depois duplicarei o texto duplicado por alguns , vamos duplicá-lo apenas duas vezes Na verdade, eu esqueço de adicionar o layout automático a esse quadro de serviços, então vamos fazer isso. Eu pressiono Shift A e então temos que mudar a altura em 600. Estamos na seção de serviços e, a partir daqui, definirei esse CO porque não precisamos de preenchimento horizontal ou vertical, vamos adicioná-los como C e, em seguida, selecionarei esses dois itens e pressionarei Shift A para criar um novo layout automático, e vou torná-lo um layout vertical, e aqui vou mudar isso para sng Vs assim. Ok. Então, vou apenas mudar isso basta tipografia para alterá-lo Vou clicar aqui e vamos fazer disso um subtítulo, depois clico aqui e vamos transformá-lo em um parágrafo Ok. Então, o que vou fazer é mudar a cor do campo. Clique aqui e altere a cor desse campo para preto e altere a cor desse campo Ok. Agora, vamos colocar o item entre os tamanhos, 20, tudo bem, tudo bem. Parece que é muito grande. Parece que o item entre os tamanhos é muito grande, mas vamos falar sobre o conteúdo real. Aqui está nosso título aqui, então teremos a descrição como esta. Ok, então vou definir esse texto com dois contêineres como este. Por enquanto, vamos continuar assim e eu esqueço uma coisa. Você pode dizer o que é isso? É o título, então eu esqueço de adicionar o título Vamos adicionar um título. Primeiro, isole nosso layout automático de serviço e vamos transformá-lo em layout vertical Então, vamos pressionar T e adicionar um texto como esse. Em seguida, irei ao nosso documento ou ao GPT. Em nosso documento, podemos pegar as manchetes, copiá-las e vamos encarar isso aqui Ok. Então, vamos mudar a gravidade do erro de digitação para o cabeçalho e a cor de preenchimento será essa cor preta Ok. Agora, selecionarei o layout automático desse serviço e definirei o alinhamento no centro superior como o alinhamento Então aqui eu vou fazer esse espaço como 20, certo. E aqui, vamos tentar adicioná-lo em dois, então agora eu quero adicionar isso no meio, então vou definir esse alinhamento tipográfico como centro Agora temos essa parte primeiro, vamos ajustá-la como quisermos. Eu seleciono o único serviço atlayou e vamos adicionar efeito. Já temos efeito, então vou apenas selecioná-lo e depois adicionar largura a esse único serviço para fazer isso, vou aumentá-lo assim. Na verdade, vou colocar algo assim, mas não é permanente. Mas, no entanto, eu seleciono novamente os serviços individuais e, em seguida, vamos adicionar os paddin 20 e 20 esquerdo e direito desta forma Agora, se verificarmos o design, não veremos o efeito, então vamos adicionar a cor do campo. Quando eu adiciono uma cor de campo como branco, podemos ver o efeito claramente. Então o que eu faço é mudar esse rádio de esquina 20. Ok, até agora tudo bem. Agora, o que vou fazer é adicionar um ícone como neste. Vamos fazer isso. Para fazer isso, vou até aqui e vamos encontrar ícones sobre cuidados pediátricos Vamos abrir o Fantosom. Clique aqui, clique em fontosom se você não sabe sobre o nome do ícone do pontosom, basta pesquisar no Google como autosom pediátrico, agora podemos ver que tem ícone de crianças, então vou copiar a parte Então, vamos adicioná-lo. Na verdade, não está aparecendo, mas temos um filho. Vamos ver o que podemos fazer. Vamos ver o ícone da infância. Não, nós só temos um filho. Vamos pegar essa criança. E não há problema em adicionar esse tipo de ícone. Layout Figma, mas em essência, podemos ter um ícone melhor e eu vou te mostrar como obter um ícone melhor Aqui está nosso ícone. Eu apenas seleciono apenas o vetor e vou tocar duas vezes nesse único serviço e colocar o ícone assim e vamos remover os quadros desnecessários. E aqui, vamos tornar isso um pouco maior assim. Antes de fazer isso, vou colocar essas duas seções e pressionar Shift A. Depois, elas acabaram de ser adicionadas a um novo layout automático Vamos renomear esse layout automático como sexo e aqui temos o layout automático vetorial e de serviço único e , em seguida, o layout automático de serviço único da ilhota e clique no layout horizontal como Tudo bem Agora vou colocar isso entre os tamanhos dois e três, como antes. Então aqui, vou clicar nele e vamos mudar essa cor para azul. Você se lembra da nossa regra 603010? Então, para Segan, vamos ver, na verdade aplicamos a regra 603010 Nesse caso, temos branco como 50 e preto como 30 e esse azul dez. Mas eu já disse que a regra dos 60, 30, dez é só uma regra. Então, podemos quebrá-la e toda vez que criarmos uma seção, teremos que quebrá-la e aqui temos 60 como preto e 30 como branco e dez como essa cor azul. De volta ao trabalho e aqui, vamos clicar aqui para conter propriedades e vamos transformá-lo em seis. Em seguida, pressionarei Shift A para adicionar layout automático a esse ícone e, em seguida, alterarei o ícone do nome. Em seguida, adicionarei à esquerda e à direita como 20, 20. Na verdade, temos problemas com o tamanho do ícone. Então, vamos voltar e aqui vou adicionar 60 como, 60 como largura fixa, e vamos tentar aqui. Vou adicionar 20 por 20 assim. O motivo é que fixamos uma única camada de serviço. Então, para corrigir isso, criarei um novo layout automático ou adicionarei layout automático a esse único serviço e, em seguida, alterarei os itens do serviço. Em seguida, vou trocar isso por para encher o recipiente. Agora podemos obter o tamanho exato, hoje, um, dois, três, quatro, cinco, defina a altura como esta e aqui vou adicionar essa altura como recipiente de enchimento, e vamos centralizar esse ícone assim, e acabamos de definir com 120, acho que será melhor. Ok. E aqui vou reduzir os cantos, fazer com que sejam 20, e depois adicionarei um traço como este. Então, vamos mudar a cor do traçado para azul e aumentar seus óleos para, na verdade, podermos fazer esse tipo de design. Então, vamos fazer isso. Primeiro, tenho que descobrir que o tamanho intermediário é 20. Vamos adicionar esse mesmo estilo de design aqui. Para fazer isso, adicionarei cor de preenchimento e cor azul. Em seguida, clique no ícone e a cor do ícone será branca e, em seguida, teremos que adicionar Etroke para que a cor do traçado fique azul claro Vamos pegar a cor azul clara daqui assim. Ok. Ok. Agora vamos ver, vamos descobrir o tamanho do traço. É sete aqui e tem o tamanho de sete. Ok. Agora ficará assim, mas podemos adicionar mais altura menos 22. É adicionado como dez, dez é melhor, então agora criamos uma única seção de serviços e ela ficará assim no design. E aqui temos um problema. Temos que resolver esse problema. Na próxima lição, vamos corrigi-los. 56. Seção de serviços de design, parte 2: Olá, pessoal. Então, eu tenho uma ideia melhor para esse ícone. Vamos fazer isso. Primeiro, selecionarei o ícone e, aqui, vamos fazer esse padrão horizontal como 15 e o padrão vertical como 15. Em seguida, removerei essa cor de preenchimento. Em seguida, copiarei essa cor Etroke e a adicionarei à cor de preenchimento Em seguida, removerei o traço para. Ok, agora vou selecionar o ícone vetorial e vamos mudar o ícone vetorial para azul. Vamos manter o ícone vetorial azul. Vamos mudar o ícone vetorial para a cor azul. Mude assim. OK. Vamos ver esse design. Ficará assim e esse efeito não será visível no lado esquerdo, então vamos corrigi-lo. Para consertá-lo, vou até nossa estrutura inicial e aqui selecionarei a seção de serviços. Então eu clico neste IgnooToayout. Depois disso, vou aumentar 20 fixel aqui. Atualmente, a largura é de 1.160, então vou torná-la 1180 ou 70 Na verdade, temos que fazer 1.200 porque temos que adicionar os 20 extras de ambos os lados Agora, basta clicar em nossa estrutura de serviço e pressionar tudo e agora posso ver o tamanho que ela tem até a borda da estrutura inicial. Vamos reduzir para 1020 assim e, neste lado, será 1020 Então, dentro desse serviço de horário, podemos adicionar preenchimento esquerdo e direito ou preenchimento horizontal como 20 E agora, se verificarmos o design, ele se alinhará perfeitamente e não será afetado pela sombra ou pelo FA Ok, agora por aqui, vou fazer isso como 60 porque está muito próximo, então agora está melhor e agora temos outra pergunta. Ou seja, se adicionarmos uma nova seção, vamos adicionar uma nova seção como esta, ela será adicionada dentro desta seção. Para corrigir isso, vou apenas criar uma moldura vazia e , em seguida, definirei a largura como recipiente cheio e a altura será 600. Em seguida, renomearei esse quadro para nossos serviços BG assim Então, se criarmos uma nova seção, ela estará abaixo desse quadro. Agora esse é nosso primeiro serviço ou serviço único, e esse é um objeto repetido, que significa que podemos convertê-lo um componente e reutilizá-lo Se verificarmos aqui, temos itens repetidos como esse, que significa que podemos criar o componente disso e usá-lo na página. Vamos fazer isso. Para fazer isso, clicarei nesse único serviço e clicarei nesse componente de criação. E agora vou cortá-lo daqui e vou até nossa folha de adesivos, depois coloco dentro da folha de adesivos assim Então eu vou pegar esse texto e vamos renomear esse texto como elemento OK. E agora, para esta seção, basta clicar nos itens de serviço. Então, agora temos que adicionar esse elemento a essa seção para fazer isso, vou até Assens e clicarei aqui, e aqui temos um único serviço Basta clicar nele e clicar em inserir instantâneo como este e agora vamos para o arquivo e aqui, vamos colocá-lo dentro desses itens de serviço Nós podemos fazer isso assim. OK. Agora posso selecionar esta seção de item de serviços, depois ir para asserts e clicar aqui, clicar aqui e clicar em Inserir Instância e ela será inserida assim Então eu vou fazer isso por mais duas vezes assim. OK. Agora eu vou para Pis in Pis, aqui estão as seções. Eu vejo todos eles e simplesmente arrasto isso aqui. OK. E nos itens de serviço, vou mudar o layout para o layout horizontal. Na verdade, removerei dois desses itens por enquanto e, em seguida, seleciono o layout automático dos itens de serviço e clico nesse layout horizontal, e ele ficará parecido Parece que está muito perto, vamos colocá-lo entre o tamanho 20 e agora ele se encaixa perfeitamente. OK. Agora, o que posso fazer é duplicar esse item de serviço dessa forma Ok, novamente, vou ver esses dois layouts de itens de serviço e pressionar Shift A para criar um grupo diferente e aqui vou renomeá-lo como conjunto de itens de serviço e aqui vou alterar o tamanho intermediário para 20 assim Agora ficará assim. Agora temos que mudar o conteúdo. Vamos mudá-los. Eu abro nosso documento e vou alterá-lo rapidamente desta forma. Vou colocar isso assim e vamos mudar o jejum. OK. Agora, acabamos de criar quatro de nossas categorias, e meu plano é que, quando passarmos o mouse sobre essa categoria, a imagem do logotipo seja destacada Na verdade, podemos alterar essa imagem do logotipo para melhor. se removermos a cor de preenchimento e adicionarmos o traçado, vamos mudar a cor para aqui e para azul e aumentá-la um pouco para nove. Vamos ver se parece que não está bom. Mas e se definirmos como dois? Agora está muito melhor e adicionaremos um ícone de linha a esse ícone. Dessa forma, isso será muito melhor do que esse design por enquanto, vamos mantê-lo assim. E sim, acabei de selecionar o design do componente e você pode fazer o mesmo. OK. Se quisermos, podemos adicionar a cor do campo com azul claro, como um azul muito claro como esse e não tão visível, mas vamos mantê-lo assim. Então temos que mudá-los. 57. Seção de serviços de design, parte 3: Olá, pessoal. Temos um problema aqui. Então, se eu tentar mudar esse ícone, vamos tentar fazer isso. Eu vou para ações, plug-ins e widget, depois fonte tsm. Então vamos mudar esse ícone de saúde da mulher, então vou pesquisar como mulher. Ok, clique nele. Agora temos o ícone. Aqui está o ícone. Vou recortar e remover essa moldura, depois clicar aqui e tentar colá-la. Quando tento colá-lo, A, ele sempre passa fora desse componente. Então, se eu quiser adicionar isso dentro do componente, eu posso fazer isso. Tenha uma solução rápida, mas depois de fazermos essa solução, essa instância não será mais uma instância do nosso componente principal, o que significa que, se mudarmos o design disso, isso não afetará nossa categoria aqui. Então, vamos tentar fazer isso. Eu clico na instância e aqui, clico em mais ações, e aqui vou clicar em desanexar instância Quando eu clico em Desanexar instantâneo, ele não funcionará mais como um componente É apenas uma moldura que adicionamos ao layout. Então, agora eu posso adicionar um ícone aqui. Então, para fazer isso, eu posso simplesmente cortar o ícone daqui, clicar aqui, colar assim, e aqui está. Então, vamos tentar adicionar esse ícone dentro desse ícone. OK. Agora, vamos verificar o tamanho desse ícone. São 60. Então, agora vou mudar esse ícone com isso. Vamos clicar nessa proposta de restrição. E agora vamos mudar o lado para 60. 60 é muito grande. Vamos colocar assim. Em seguida, removerei esse ícone assim. OK. Em seguida, clicarei nesse ícone e mudarei a cor do campo para azul. Agora, esse tamanho do ícone é 120. Vamos ver o tamanho real do ícone. Sua largura 120 e altura é 110, vamos ver a altura, a altura deve ser 110, assim. OK. Então eu posso aumentar isso como eu quiser. OK. Agora vamos fazer o mesmo com este. Vamos tentar encontrar o ícone como fregan, não temos esse tipo de ícone, então vamos ver aqui. Vamos adicionar esse ícone de hospital a E quando criarmos o site usando o Word como elemento, adicionaremos um ícone melhor. Então, aqui, vamos clicar na instância desse componente, clicar aqui e clicar na instância desanexada, depois clicar aqui e marcá-la, depois selecionar esta seção e colá-la aqui Removerei esse ícone e, em seguida, definirei esse plano fundo com a altura de 1.110, assim, e aumentarei esse tamanho em 60 OK. Em seguida, mudarei a cor do campo para azul. Ok, agora temos essa revista familiar. Vamos descobrir o ícone da família na pesquisa de fontes, desculpe. Vamos pesquisar como família, família, vamos ver família. Não temos um ícone de fontosum familiar. Vamos encontrar um ícone diferente ou vamos encontrar algo relacionado a ele neste ícone de proteção. Eu clico no ícone, recorto e excluo esse quadro. E aqui, primeiro, vou selecionar o item de serviço e clicar em desanexar instância e clicar aqui, colocar este ícone, remover este, então temos que definir a altura como 1.100 Desculpe, 110. Então, vamos aumentar o tamanho desse ícone para seis. OK. Então vamos mudar a cor do campo Ok. Agora temos quatro categorias, quatro serviços, mas temos oito serviços, então vamos adicionar esse tipo de botão deslizante, que significa que ele mudará automaticamente para as próximas categorias em 5 segundos. Vamos fazer isso ou quando alguém clicar nesse ponto, ele irá para o próximo conjunto de categorias. Então, vamos clicar aqui e clicar em Ellips e não aqui, então eu vou entrar no nosso serviço, e então vou adicionar Ellipse dentro dele e então vou adicionar Ellipse Então agora deveria ser, vamos adicioná-lo como aqui. Ele deve estar dentro desta seção de serviços, mas fora desse conjunto de itens de serviços, vou colocá-lo aqui. E agora vamos diminuir o tamanho para cerca de 20 e vamos mudar a cor como azul. Parece que não temos Espace, então vamos aumentar o Espace para 700 desta seção de serviços Vamos somar 700 e aqui temos 60, mas podemos adicionar menos de 60, então vou selecionar esse conjunto de itens de serviço e Ellips e pressionar Shift A para adicionar um layout automático, e aqui posso fazer com que 2020 não seja bom Vamos fazer com que seja como 30. OK. Agora, o que vou fazer é criar mais três elipses e selecionar todas elas e pressionar Shift A e torná-la horizontal e o espaço será 20 Em seguida, retire essa cor e eu a mudarei para uma cor clara Para essa cor. Ok, e clique neste, separe-o nesta cor clara como esta OK. Agora vamos ver o design para que fique assim. E então adicionamos isso aos nossos serviços BG, altura é 600, mas vamos fazer com que seja 700 assim. OK. Agora criamos isso sobre um resumo e nossos serviços, depois temos que criar nossa seção de provedores. Vamos criá-lo na próxima lição. 58. Gerar conteúdo para nossos provedores: Olá, pessoal. Agora temos que criar nossa seção de provedores. Em nosso provedor, teremos a imagem e o nome do provedor, rolo e uma pequena descrição. Vamos criá-lo. Primeiro, temos que gerar o conteúdo. Eu vou para o JGBT e aqui vou dizer que agora é hora de gerar nossa seção de fornecedores Me dê cinco fornecedores. Vamos adicionar como médicos com nome, função e descrição suave. Vamos criar um empréstimo e também uma descrição do empréstimo. Então, aqui, vamos trazer isso assim porque precisamos de uma descrição do empréstimo para os fornecedores. Então, vamos apresentar e ver o que obtemos. OK. Aqui temos os detalhes. Vou apenas copiar todos eles, e vamos ao nosso arquivo de conteúdo e, em seguida, vamos ver esse conteúdo como este. Você poderá abrir esse arquivo de conteúdo no bloco de notas Wordpad Então, vamos adicionar esses detalhes. Além disso, você verá imagens de cada médico em nosso arquivo de imagem. 59. Crie nossa seção de provedores: Olá, pessoal. Vamos criar esta seção de nossos fornecedores. Ok, agora vou falar sobre o design, e aqui temos o conteúdo, no entanto, não temos um título. Então, vamos gerar o Título dois. Você pode me dar um título para nossa seção de fornecedores? Me dê três opções. As escolhas estão erradas, eu acho. De qualquer forma, eu gosto desse, então vou copiá-lo e, na verdade, vamos selecionar esse segundo. Vou copiar isso e vamos encarar isso aqui. Então eu vou dizer um título como este. Agora vamos ao Figmfle e aqui vou criar uma moldura e definir os tamanhos das molduras com o recipiente de enchimento Oi, 600. Temos que aumentar o quadro inicial, clicar no quadro inicial e pressionar o comando no Windows, pressionar control e aqui aumentar o tamanho. Em seguida, nesta seção, pressionarei Shift A e aqui mudarei o nome para apresentador do nosso provedor OK. Agora, aqui, vamos adicionar o layout como layout vertical e começar do centro superior. OK. Agora, aqui não precisamos deles entre os tamanhos e aqui vou adicionar o tamanho intermediário como 60. Pelo que me lembro aqui, adicionamos os 60. Agora vamos criar o texto. Eu pressiono T e vamos criar esse tipo de texto e vamos aqui copiar esses tanques e vir aqui neste texto assim, então vou mudar a tipografia para cabeçalho e clicar no texto e vamos configurar com um recipiente de preenchimento Ok, então o alinhamento será o centro. OK. Agora parece bom. Agora, a altura da seção do provedor foi alterada, então vamos mudar a altura novamente para 600 assim. OK. Agora, o que precisamos fazer é criar essa seção. Para criar essa seção, vou apenas criar um retângulo como este Então, vamos colocar esse retângulo desse lado. Então, um, dois, três, quatro, depois aumente assim e , digamos, altura e também aquele tamanho assim. Ok, então temos que adicionar nome, rolo e uma pequena descrição. Então, vamos adicioná-los. Então, primeiro, eu clico em T e defino isso como nome, então, novamente, eu pressiono texto e defino isso como rolo, e novamente, pressiono T e adiciono uma pequena descrição como esta. OK. Agora aqui, clique no nome e vamos alterar o tipo para subd e também aqui, uma pequena descrição será um parágrafo e a função será adicionar texto do botão para rolar OK. Agora vou selecionar todos esses três itens e colocá-los abaixo do retângulo Em seguida, selecionarei todas essas informações e pressionarei Shift A e um quadro e mudarei esse nome para provedor. Então eu vou colocar isso entre o tamanho 20, assim. Agora que esta seção é pequena, vamos aumentá-la desta forma e agora, no provedor, colocarei roll como o nome principal no meio e na descrição pequena, pois também parece que o tamanho intermediário é muito longo, então vamos fazer com que seja melhor. Agora, o que precisamos fazer é adicionar uma imagem aqui. Vamos adicionar a imagem, clique aqui e clique no vídeo da imagem e aqui, veremos a imagem do provedor e vamos adicionar essa imagem e clicar aqui assim. Agora eu seleciono a moldura do provedor e aqui vou adicionar a cor de preenchimento ao branco, e então eu vou aplicar e vou adicionar esse efeito assim. Então, o que vou fazer é mudar os cantos dessa imagem. O acima será dois e será dois, depois o fundo será dois e dois. Vamos ver se na verdade não, eu acima não estava nos cantos direitos, então temos que clicar na imagem e reduzir os cantos dessa imagem. Só precisamos reduzir os cantos superiores dessa forma. OK. Agora, a partir daqui, terei que adicionar um pouco de espaçamento para adicionar a dispersão, basta clicar aqui e vamos Ok, mas não precisamos aplicá-lo a toda essa seção. Só precisamos aplicá-lo a esses três itens. Vamos destacar esses três itens. Na verdade, teremos que adicionar o botão. Vamos adicionar o botão para adicionar o botão, vou para Assens e aqui temos o BTN, você verá esse botão secundário e clicará em Depois vou recortar e arquivar, e aqui, vou colar assim. OK. E neste botão, teremos que fazer algumas alterações para fazer essas alterações, podemos criar outra instância ou adicionar alterações aqui. As formas fáceis criam uma variante diferente. Vamos criar uma variante. Vou aumentar o tamanho da folha de adesivos dessa forma e clicar na variante Na verdade, podemos clicar aqui e depois clicar na variante de, em seguida, vamos remover esses preenchimentos assim, assim OK. Agora, vamos renomear essa variante como link de cartão, assim OK. Agora, vamos até aqui e clique no botão, e vamos alterá-lo para o link do cartão. Tudo bem. Agora vou selecionar todos esses quatro itens e pressionar Shift A, e vamos renomear e fornecer descrição Forneça uma biografia, depois configurarei um recipiente de enchimento e aqui adicionarei uma margem horizontal de seis, como esta. OK. Agora, o que eu tenho que fazer é adicionar espaço na parte inferior. Para fazer isso, vou clicar aqui e aqui, vou adicionar espaços 20 Ok. Agora, se verificarmos, ficará assim no design. Agora, se quisermos, podemos converter isso em um componente. Então, vamos clicar no item e clicar no componente para criar um componente. OK. Em seguida, vou cortar esse componente e acessar o Style heat e adicioná-lo ao elemento desta forma. Eu tenho que estilizar o calor e colá-lo assim. OK. Agora, vamos voltar aqui, e então eu clico em ASRs no ASRS, temos o componente Basta clicar nele e clicar em Isa Instance. OK. Agora, o que podemos fazer é inserir arquivos e colocá-los em nossa seção de provedores, então vamos fazer isso assim. OK. Agora, o que podemos fazer é duplicar isso Para duplicá-lo, selecionarei o provedor e pressionarei Control C e control V desta forma e vamos destacar essas duas seções e pressionar Shift A e, em seguida, vamos fazer com que seja um layout horizontal como este E, novamente, vou duplicar este assim. OK. Agora vou mudar o nome desse quadro para prods e aqui alterar o tamanho intermediário para 20 OK. Agora vamos adicionar os detalhes a essa função, vou mudar essa função para a cor azul. Venha aqui e clique aqui, depois mude a cor do campo para a cor azul assim. Ok, vou afetar os itens, e aqui, vamos adicionar os detalhes, e então podemos alterar o resto das informações. Então eu simplesmente venho aqui. Aqui estão os primeiros detalhes, copie. Mude seu nome. Então, novamente, venha aqui e copie a breve descrição como esta e defina a breve descrição desta forma. Aqui vou definir a largura como recipiente de enchimento e definir gravidade do erro de digitação para alinhar o laboratório , então vou renomear esse rótulo para Em seguida, renomeie-o mais ou menos como perfil de visualização e teremos que adicionar o rolo Vamos adicionar o. Vamos adicionar o rolo assim. E eu vou mudar essa função de telefone para, vamos mudar para parágrafo. Para mudar isso, vou aqui e o texto da função será um parágrafo. Dessa forma, não se parecerá com o link. Então, agora, se formos ao design, ele ficará assim, e vamos continuar adicionando os detalhes. A partir daqui, copiarei o nome e colocarei o nome aqui, depois venho aqui, copiarei o rolo. Em seguida, adicione o rolo assim e, em seguida, clique na breve descrição. E, na verdade, neste aqui, eu mudo a partir daqui. Não vamos mudar isso desse jeito. Vamos mudar isso a partir daqui. Dessa forma, poderemos torná-lo efetivo para os itens da página. Então, vamos fazer isso por este. E essa. Essa é a vantagem de ter um layout automático como esse. Sem layout automático. Essa é a vantagem de ter componentes. Quando eu os altero, isso afeta o item. Então eu vou aqui, vamos mudar para perfil. Na verdade, podemos mudar isso a partir daqui. Então nós mudamos isso, isso muda. Sim. E aqui, temos que mudar a imagem, clique aqui doutor Michel vamos encontrar essa foto e aqui está ele, clique assim, então eu continuarei Ok, vamos adicionar outros detalhes do médico. Aqui estão os detalhes, e vamos colocar assim. Então vamos adicionar o rolo. Vamos adicionar uma breve descrição como essa. OK. Agora, vamos mudar a foto assim. Na verdade, é melhor mudar essa imagem do médico com esse médico de acordo com o nome, mas vamos continuar assim. Então, veremos alguns problemas, então vamos corrigi-los. O primeiro problema é que essas seções não serão iguais e temos cinco médicos aqui, aqui, temos cinco médicos, mas temos apenas espaço para três médicos, então teremos que adicionar um controle deslizante aqui Temos alturas diferentes das caixas para corrigi-la, vamos verificar o tamanho que queremos adicionar, deve ser 615 Vamos usar nosso componente e fazer com que ele tenha uma altura de 615 e podemos consertá-lo facilmente dessa forma Agora, se formos desenhar , ficará assim, mas agora precisamos adicionar essa sombra à visível à esquerda e à direita. Lembre-se, da última vez que o corrigimos, então, para corrigi-lo, selecionarei esta seção, nossa seção de provedores, e depois clicarei neste ignotoayo e, em seguida, terei que adicionar 40 a Vamos adicionar 40. Quando eu adiciono 40 a 1.160 , serão 1.200 Então aqui vou adicionar Padins 20 assim. Então eu vou ter que colocá-lo no centro. OK. Agora vamos ver se está perfeitamente visível. Aqui, temos outro problema. Esse perfil de visualização não é uma linha, então, para corrigi-lo, vamos descobrir a descrição pequena mais longa Acho que é esse. Vamos descobrir quanto é 96. Vamos fazer com que seja como 100. Nós só viemos aqui e clicamos aqui, então transformamos essas alturas em cem. Agora veja o que acontece. Então, vamos inventar esse texto assim. Eu apenas seleciono o texto e adiciono esse alinhamento no topo da tipografia Agora vamos ver o design. Agora ele estará perfeitamente alinhado. Até agora, não temos nenhuma dúvida, e agora temos que adicionar três pontos como este para fazer isso, basta clicar aqui e mudar o nome para pontos de slide e agora vamos clicar em Criar componente E corte, vá aqui no elemento, na verdade, nos estilos do elemento, basta adicioná-lo. E agora vamos vir aqui e ir para asserts in asserts. Vamos clicar em nosso ponto deslizante, clicar em Inserir instância e colocar isso dentro da nossa recepção Em nosso serviço, eu seleciono em nosso serviço e depois colo assim, e ele deve estar dentro desse quadro assim, ele estará perfeitamente alinhado Então, não precisamos criá-lo do zero. Podemos simplesmente acessar os ASEDs e clicar no ponto deslizante e clicar em Inserir instância e cortá-la pressionando Command X ou Control X e vir aqui Em seguida, temos que adicioná-lo nesta seção de nosso provedor. Agora vou ter que selecionar essas duas seções e pressionar Shift A, e então vou colocá-las no centro. Vamos ver o espaçamento. Eu acho que deveria ser. Na verdade, é 30, então vamos adicionar, vamos selecionar este e vamos adicionar o item em bits como 30. OK. Agora teremos que aumentar um pouco mais essa seção de nossos fornecedores, então vamos aumentá-la. Não este, selecione os fornecedores. Vamos aumentar essa seção dessa forma. E o que aconteceu com isso? Mãe, hmm. Não precisamos aumentar esse quadro 31. Vamos selecionar esse quadro 21. Vamos fazer com que seja como um contêiner de fornecedores. OK. Em seguida, vou definir sua altura como recipiente de abraço E agora está perfeitamente aqui. Aqui, eu farei o mesmo. Na verdade, eu só preciso mudar isso para o nosso contêiner de serviços. OK. Agora, só precisarei alterar essa seção de nosso provedor desta forma. Vamos ver quanto custa na verdade, vamos aumentar esse tamanho para 820 ou podemos simplesmente selecionar esse contêiner do nosso provedor e verificar qual é a distância entre essas duas seções Então, vou diminuir seu tamanho para 20 assim e aqui podemos fazer o mesmo. É 54, vamos diminuí-lo e diminuir mais 20. Perfeito. E então teremos que mudar o tamanho da mudança do serviço BG. Serviço SLEto BG, perfeito. Agora temos que adicionar nossos provedores BG também, porque agora, se adicionarmos vamos adicionar uma elipse como essa, ela aparecerá aqui porque ignoramos o layout automático desta seção de provedores Vamos clicar em Con frame e criar uma moldura. Essa moldura será um contêiner de preenchimento e a altura será 823 E a altura será 823. O que aconteceu? Aqui. Então, teremos que sedar esta seção de provedores e vamos falar sobre isso desta forma para o provedor BG, onde está nosso provedor Ok, aqui está nosso provedor, é por isso que gostamos do nosso provedor G, e então eu vou colocá-lo aqui assim. OK. Agora vamos ver o design. O design ficará assim. OK. E na próxima lição, vamos criar essa seção de pré-visualização. 60. Alterar o arranjo de seções: A seguir, temos que criar esta seção de revisão. Mas se verificarmos nosso site, aqui temos padrões semelhantes. Aqui temos serviços, depois temos nossos fornecedores e ambas as seções são iguais e ambas as seções têm controle deslizante Mas se adicionarmos esta seção de revisão, essa seção de revisão também terá um controle deslizante É por isso que meu plano é criar uma seção de contato c depois desta seção dedicada ao nosso provedor. Após a seção de contato, podemos adicionar a seção de revisão e, em seguida, adicionar esse rodapé Para esta seção de contato, vou escolher esse tipo de design porque ele manterá a consistência do nosso site. Em seguida, criaremos uma página separada para esse formulário e adaptaremos o botão desse feed a esse formulário. Ok, agora na próxima lição, vamos começar a criar essa seção de contato. 61. Seção de contato de design: Olá, pessoal. Vamos criar a seção de contato. Então, vamos ao JAD GPT e digamos que precisamos ter uma seção de contato rápida com número de telefone, localização e botão para solicitar uma consulta Você pode gerar essas informações e torná-las acionáveis Vamos ver, me dê três opções e um título para a seção dois Ok, eu gosto da opção dois, então vamos copiar o conteúdo e começar a criar a seção. Aqui, vou adicionar esses detalhes. É uma seção de contato rápido. Ok, agora vamos começar o design. Para fazer isso, vou até nosso quadro e seleciono o quadro. Vamos pressionar o comando e aumentar o design assim. OK. Então, o que vamos fazer é, em uma seção como essa, fazer isso primeiro, clicar no quadro, clicar aqui. Em seguida, configurarei para encher o recipiente e, digamos, para 600. OK. Agora, aqui, meu plano é adicionar imagem no lado direito e adicionar texto no lado esquerdo. Então, vamos fazer isso. Para fazer isso, eu pressiono T e crio esse tipo de texto, e antes de fazer isso, eu tenho que converter esta seção em layout automático ou adicionar layout automático a este quadro, então eu apenas pressiono Shift A e, em seguida, alterarei nome desse quadro para contato WIC e, nessa configuração de quadro, definirei o preenchimento esquerdo e direito ou o desbotamento horizontal e zero e fadina vertical zero então vamos configurá-lo para uma linha no canto superior esquerdo e a altura será 600. Agora, aqui, eu seleciono o texto e clico aqui e o seleciono como cabeçalho. Então, vamos copiar o título. Então aqui, aqui está o título, eu apenas copio e colo aqui, então temos que adicionar esse conteúdo Podemos adicionar esse conteúdo como caixa de ícones. Vamos fazer isso para fazer isso. Primeiro, terei que criar uma caixa de ícones. Vamos pressionar e vamos pressionar T e adicionar texto como este. Por enquanto, vamos alterar essa seção de conteúdo rápido como layout vertical. E vamos colocar isso assim. Em seguida, vou mudar o texto para sublinha. OK. Agora, aqui vou adicionar esses recursos, depois duplicarei esse texto e vamos transformar esse texto parágrafo e também terei que alterar a cor de preenchimento para essa cor preta, e temos que fazer isso aqui também aqui OK. Em seguida, alterarei esse texto para nos ligar para assistência imediata ou informações como esta, depois duplicarei esta seção e a colocarei aqui e agora adicionarei o número de telefone Acho que esse é o número de telefone adicionado na parte superior. Vamos ver, é o mesmo. Basta pressionar o comando de um telefone Mac e controlar uma fonte do Windows e adicionar o texto a esta caixa de pesquisa e aqui ele encontra um conteúdo semelhante e agora vou adicioná-lo aqui, depois é só clicar aqui porque não precisamos mais disso. Em seguida, vou transformar esse cabeçalho em, vamos transformá-lo em cabeçalho, mas mudaremos o tamanho da fonte posteriormente. Agora, o que vou fazer é adicionar o ícone para adicionar o ícone, vou aqui e vou conectar o widget San e clicar no ícone cFontSM e, a partir daqui, vamos pegar um ícone como pressionar aqui e agora temos Eu apenas corto e removo essa moldura ALT e venho aqui. Em seguida, basta colar. Eu apenas colo dentro desse conteúdo selecionado e pressiono shift A para adicionar Otolao Então vamos ver o tamanho desses ícones. Então é 12110. Vamos fazer o mesmo tamanho. Escolha aqui e vamos definir com 120 e altura 110. OK. Então vamos ficar no meio. Ok, agora aumente o tamanho desse ícone para fazer isso, seleciono o ícone, clico nas proposições de restrição e, em seguida, mudarei para 60 assim OK. Agora, o que eu tenho que fazer é adicionar uma borda a esse ícone. Então, vamos fazer isso. Para fazer isso, na verdade, posso ir até aqui e verificar a fronteira. Aqui está a borda, então está dentro do tamanho dois. Então, vamos adicionar aqui, traço azul reeleito, tamanho dois, e aqui o canto é dois OK. Agora vou agrupar essas três seções. Selecione-os e pressione Shift A, e então vou definir isso com o recipiente de preenchimento D. Na verdade, eu tenho que selecionar este e configurá-lo com um recipiente de enchimento e fica bem. Então terei que mudar a cor do preenchimento. Vamos mudar para azul assim. Em seguida, selecionarei esses dois itens e pressionarei Shift A para adicionar autoa e, em seguida, alterarei layout automático para o layout horizontal Então eu vou entrar aqui e aqui selecionar o vetor e colocar o ícone acima e selecionar o quadro, em seguida, definir o alinhamento do quadro à esquerda Agora, o que temos que fazer é diminuir esse tamanho de fonte porque parece muito grande, vamos reduzi-lo para reduzi-lo na tipografia, vou separar o estilo e, aqui , vamos diminuir o Na verdade, vamos manter esse tamanho original. OK. Além disso, temos que adicionar a seção de localização e o botão que a chamada solicite um agendamento. Antes de fazer isso, adicionarei uma imagem aqui. Então, vamos fazer isso primeiro. E antes de fazermos isso, podemos adicionar um nome a esta seção. Portanto, o nome desta seção será reachus, e aqui teremos o ícone, e aqui teremos o ícone de imposto. Ok, agora vou adicionar a imagem para adicionar a imagem, clicarei em Disputa de contrato e selecionarei Então, vamos descobrir que o tamanho da imagem é 52500. Então, vamos fazer com que seja 52050520 com 500 s i, então o canto será OK. Agora vamos adicionar a imagem. Então, para adicionar a imagem, selecione o rec wrangle, clique aqui e clique em Imagem Aqui, selecionarei essa imagem com cinco cliques aqui e podemos adicioná-la assim mesmo. Então eu preciso colocar esta seção no lado esquerdo e esta imagem no lado direito para fazer isso, eu posso facilmente selecionar essas duas seções e pressionar Shift A, e então eu posso simplesmente selecionar toda essa seção de contato rápido e alterar o layout para o layout horizontal. OK. Agora, dentro desta seção, terei que selecionar o texto e vamos criar texto com um recipiente de preenchimento, e agora tudo ficará bem. E para o espaçamento, adicionarei como item entre os tamanhos Não, não, não é isso. Vou adicionar este item entre os tamanhos, 20, assim. OK. E aqui mudamos o tamanho para 20 assim. Vamos fazer com que seja 60 entre o tamanho dessas duas seções. 60. Ok, agora muito melhor. Agora vou criar esta seção rápida de conteúdo e, se quisermos, podemos definir o alinhamento à esquerda ao centro desta forma Agora podemos continuar o trabalho. Como segunda seção, duplicarei essa seção de alcance desta forma e aqui podemos adicionar entre o tamanho 20 Antes de fazermos isso, vamos adicionar conteúdo a esta seção. Para fazer isso, abrirei o arquivo. A partir daqui, temos que adicionar a seção de localização, copiar a localização da clínica e colocá-la aqui. Em seguida, copie a localização real. Em seguida, adicionarei esse local assim. E para esta seção, não precisamos desses números. Vou simplesmente removê-lo. E aqui vamos copiar esse texto e colocá-lo abaixo do local. Duplique o texto do local e selecione-o no ritmo do texto, copie-o desta forma Então, vamos tentar adicionar um link aqui. Link, eu tenho que ir para Assets in AsSETS, clique aqui e clique em Tn e o link será o link do cartão O link do cartão ficará bom. Clique em Inserir instância e aqui nossa instância e eu apenas recortarei e clicarei aqui, depois colarei e apenas recortaremos o texto e colaremos esse texto. Podemos encarar o texto aqui dentro, mas é muito longo. Temos que adicionar uma versão curta desse link para fazer isso, eu irei para esse GPT Ok, aqui temos as três opções. Então, em três opções, copiarei essa esialização de find us e adicionarei aqui desta forma OK. Agora temos que mudar o ícone aqui para mudar o ícone. Vou clicar aqui e clicar em plug-ins e widget e aqui, clicar no ícone Fon tsm e aqui pesquisar o ícone do mapa de localização, clicar aqui e adicionar o ícone à tela e recortar o Eu não preciso dessa moldura, então entre nesta seção de ícones e cole o ícone, remova esse ícone. Então vamos ver o tamanho do ícone, é 60. Vamos fazer com que esse ícone tenha o tamanho de seis P. Em seguida, mude a cor para azul. Até aí tudo bem e agora o que temos que fazer é adicionar o botão. Vamos ver o texto do botão, o texto do botão será uma solicitação de agendamento e, para adicionar esse texto do botão, não usarei esse tipo de design. Vou apenas criar um texto e vamos adicionar esse tipo de texto por enquanto, e vamos copiar a solicitação de compromisso. Em seguida, terei que adicionar isso a essas seções, como: Ok, agora, para este quadro 20, vou renomeá-lo conforme os detalhes do conteúdo Em seguida, renomearei esse local exclusivo. OK. Então vou duplicar os tanques assim e eles não aparecerão aqui porque o tamanho desta seção é 600 Vou apenas mudar para 700. OK. Agora, na verdade, podemos selecionar esses dois itens e pressionar Shift A e alterá-lo entre o tamanho e 220. Então eu posso adicionar essas tomadas dentro desse quadro. OK. E vamos renomear esse nome de quadro para uma caixa de contato como esta. OK. Então, vamos começar a criar esta seção. Isole o texto desta solicitação de compromisso e duplique-o, depois venha aqui e eu copiarei esta parte Podemos copiá-lo daqui assim, depois vir aqui e colar assim. OK. Em seguida, vou para ASEDs em Ativos, clique em BTN e clique em Vamos descobrir o BTN que é bom na verdade, vamos padronizar o BTN e clicar em Instância e aqui vou adicionar o texto, o que será o texto Agendas , depois renomearei Então eu corto esse botão e vou para arquivos dentro de arquivos, vou destacar isso e colocar o botão assim. Isso deve estar fora desse rápido caderno de contatos A. Deve estar dentro. E esse botão também deve estar dentro deles. Em seguida, selecionarei três opções como essa e pressionarei Chief A para fazer um sulco E agora vamos adicionar detalhes. Para tipografia, selecionarei a legenda para teste, selecionarei o parágrafo e o botão Na verdade, se quisermos, podemos adicionar um ícone aqui também. Então, se adicionarmos um ícone , será perfeito. Então, vamos adicionar um ícone. Primeiro, vou renomear esse quadro 20 para solicitar um compromisso, e vamos criar um ícone do zero ou podemos simplesmente copiá-lo daqui Vamos copiá-lo daqui. Espero que você entenda como criar um ícone. Se não, deixe-me dar os comandos para que eu mostre como fazer isso. Agora, o layout de solicitação de agendamento tem uma vertical , mas precisamos que seja horizontal. Então, para fazer isso, primeiro eu seleciono esses três itens e pressiono Shift A, e aqui vou mudar isso como estágios. Então temos o ícone. Então, eu seleciono esse compromisso de solicitação e o altero para o layout horizontal. E então temos que mudar a posição do ícone dessa forma. Ok, então selecione-o e clique nesta perna à esquerda. OK. Agora, o que temos que fazer é, na verdade, tornar esse texto como conteúdo de preenchimento e clicar aqui e também alterá-lo para preencher o recipiente, e aqui temos que criar esse conteúdo de abraço Não, não, não abrace o conteúdo. Deve ser um contêiner de preenchimento e esse layout de texto deve ser um contêiner de preenchimento como este. Aqui temos duas camadas de seção, mas se tiver apenas uma seção , será ótimo. Vamos mudar outra opção que o JGBT nos dá. Vamos tentar este, copiar, vir aqui e substituir esse texto assim. OK. Agora está muito melhor. Aqui ainda temos problemas. Eu salgo o texto e vamos alterá-lo entre os itens até dez. Agora está muito melhor. Agora, o que precisamos fazer é mudar esse ícone. Vamos mudar isso, vá até aqui, clique no plugin e no widget e clique no ícone do antosm A partir daqui, vamos pegar esse tipo. Isso cortará o vetor a partir daqui, selecione este ícone e cole dentro, clique aqui para removê-lo e seguida, defina a altura da lata para seis, na verdade, o ícone será 60 e clique em preencher e clique na cor azul. Agora parece muito próximo, então vamos fazer isso como gêmeo, não 20, 30. A partir daqui, vamos fazer isso como 30 assim. A partir daqui, teremos que mudar esse tamanho para dez. Então vamos mudar essa visita agendada. Posso digitar o link do cartão e agora ela ficará perfeita Agora temos que adicionar alguns detalhes a essa imagem. 62. Seção de revisão de design: Olá, pessoal. Agora vamos criar essa seção de pré-visualização. Ok, vamos ao nosso design. A partir daqui, como primeira etapa, criarei uma moldura e aumentarei isso com recipiente de enchimento e a altura será 600. Em seguida, pressiono Shift A dois no layout automático. Então aqui eu mudo esse nome para revisar. Em seguida, removerei a margem esquerda, a margem direita, acolchoamento horizontal e as dores verticais Em seguida, adicionarei um texto, predefinirei um texto como este Então, vamos transformar esse texto em um cabeçalho assim. Então, novamente, tenho que selecionar esta seção de revisão e alterar a altura para 600. OK. Agora vou mudar essa posição para alinhar o centro superior assim Ok, vamos aqui e vamos gerar, digamos que agora eu queira gerar conteúdo para a seção de revisão. Me dê cinco avaliações com o nome do paciente. Em seguida, também me dê o título do apresentador da seção de revisão Aqui eu preciso de três sugestões. Dê-me três sugestões para o título, não para o título do helicóptero, pelo menos, o que nossos pacientes estão dizendo, vamos copiar Com a confiança de famílias como a sua. E vamos adicioná-lo a esta seção. Vamos fazer uma seção de revisão. Em seguida, cole o título aqui. Vamos fazer com que seja como um título de linha. Então, aqui teremos que adicionar a avaliação. Copie todos eles e venha aqui. Escreva-os assim. OK. Eu vou dizer isso. Ok, agora vamos ao design aqui e vamos primeiro adicionar o título em que famílias como você confiam e depois adicionar assim. Ok, agora eu tenho que criar esta seção de revisão. Ok, vamos fazer isso. Primeiro, eu crio um texto e esse texto será o nome, e antes de fazer isso, selecionarei esta seção de revisão e vamos alterá-la na camada horizontal, e então esse título estará no topo E aqui temos o nome e depois a revisão. Ok, nome e avaliação. Agora, o que vou fazer é selecionar o nome, alterar seu tamanho para sub din e clicar em revisar e alterar a tipografia OK. Agora virá aqui e clicará em Elipse e criarei a elipse Quando eu criá-lo, pressionarei Shift. Portanto, a forma ficará perfeitamente alinhada assim. OK. Agora eu seleciono todas essas seções e pressiono Shift A. Então, novamente, seleciono somente esses dois itens e pressiono Shift A para adicionar um layout automático diferente. Em seguida, seleciono o quadro principal e o faço como layout horizontal. Então eu vou colocar esse Ellips no topo assim. OK. Na verdade, esse padrão não funcionará, então removerei esse quadro para removê-lo, seleciono o quadro e depois vou aqui, depois seleciono o quadro e aqui vou selecionar remover layout automático, e então coloco isso dentro assim e depois removerei esse quadro e precisamos agrupar a foto do revisor e o nome Eu apenas seleciono essas duas seções e pressiono Shift A, e então vou fazer o layout horizontal e definir uma linha no centro esquerdo. Em seguida, seleciono o quadro principal. Em seguida, vou fazer isso como um layout vertical, e aqui vou configurá-lo para alinhar no canto superior esquerdo OK. Agora temos o design e, a partir daqui, selecionarei esse layout automático principal para alinhar no canto superior esquerdo e clicar aqui, depois criarei esse contêiner de preenchimento e alterarei o texto para alinhar ao centro OK. Agora, aqui, eu seleciono a moldura. Vamos renomear essas paradas. Esta será a caixa de pré-visualização, e esta será Avata Avata como OK. Agora vou selecionar a caixa de revisão e aumentar seu tamanho para assim, assim. Agora vamos adicionar detalhes reais e depois adicionar estilo. Então eu vou até esse arquivo de texto e vamos pegar esse nome e adicionar o nome aqui. Então, vamos copiar a avaliação desta forma, copiá-la e acompanhar a revisão desta forma. Em seguida, defina com o preenchimento contido desta forma. OK. Agora, vamos também definir a imagem. Eu apenas seleciono essa elipse e clico aqui, depois clico em Imagem Então, aqui teremos os revisores Avata. Então, aqui, eu seleciono a foto e coloco assim. OK. Então, o que vamos fazer é selecionar a caixa de revisão. Na caixa de revisão, definirei a cor do campo como nossa cor branca e, em seguida, adicionaremos os efeitos que já salvamos. OK. Agora eu seleciono as avaliações, e aqui vou definir a esquerda e direita e a parte superior e inferior como seis. Não, não essa. Não é a seção de revisão, temos que selecionar a caixa de revisão, e seu padrão horizontal será seis e o padrão vertical será seis, assim. Novamente, temos que mudar os cantos para 20 assim. Na verdade, vamos na parte superior e inferior , pois ficará mais bonita. Agora, esse lado interno será 22. Aqui, o tamanho será dois. OK. Em seguida, seleciono o texto e altero a cor do campo para essa cor preta. Eu tenho que fazer isso para a seção. E aqui, vamos fazer isso no final, mas agora temos que adicionar ISAs. Para adicionar essas cinco estrelas, selecionarei a caixa de revisão e mudaremos isso para o que aconteceu. Vamos fazer esse layout horizontal como. Para adicionar os IAs de avaliação, clicarei aqui e clicarei no ícone Pontosm, e aqui vou pesquisar e aqui temos estrelas Eu só clico nessa estrela e venho aqui, corto, retiro a moldura. Em seguida, selecione esta caixa de revisão e, dentro dessa caixa , pressionarei a estrela e aqui vou adicioná-la assim. Então eu vou mudar sua cor para essa cor dourada. Em seguida, selecionarei a estrela e a duplicarei por cinco vezes. Então eu seleciono todos eles e vamos selecionar todos eles. Eu apenas pressiono Shift e seleciono todos eles e, em seguida, pressiono Shift A para adicionar ao layout, depois mudarei a posição para o layout horizontal e, aqui, alterarei o item entre os tamanhos. Vamos fazer com que seja como seis. Ok, perfeito, e vou manter o tamanho como o tamanho das estrelas, mas se você quiser, basta selecioná-lo e alterar a largura e a altura. OK. Agora, veja, agora podemos simplesmente duplicá-los a partir daqui ou podemos criar um componente Para este, vamos apenas duplicar isso como está. Eu simplesmente clico na caixa de revisão e pressiono Comando C e o comando B, assim, então eu seleciono essas duas caixas de revisão e pressiono Shift A e faço o layout horizontal Então, o tamanho intermediário será 20 assim. Sim, temos que aumentar isso de um ponto. Temos que fazer o mesmo aqui assim. Ok, na verdade, vamos aumentar a altura, vamos aumentar a altura. Vamos aumentar pela linha 440. Vamos fazer o mesmo aqui, 440, assim. Em seguida, adicionarei isso entre os tamanhos 60 e, em seguida, duplicarei novamente. Quando eu o duplico, ele sai desse quadro, mas está tudo bem porque vamos fazer isso como um controle deslizante Ok, bom. Vamos aumentar a altura também. Vamos tentar aumentar a altura para 4.040 2.440 assim. Vamos fazer isso aqui também, por 40 e aqui 440 OK. No entanto, não temos avaliações muito maiores, então talvez não precisemos delas como 440, mas vamos mantê-las como 300 Sim, 300 vai ficar bem. Então, veja o problema de não termos um componente, ajustamos manualmente a altura desses designs. Agora, o que vou fazer é, se verificarmos o design, ele ficará assim, então terei que alterar o conteúdo e também corrigir essa borda, não mostrar nenhum problema para corrigi-la como fizemos antes de selecionar esta seção de revisão e adicionar a altura de 1.200 Em seguida, adicionarei patins horizontais para os dois lados e resolverei o problema dessa forma. aqui temos um problema. Se você verificar a demissão, ela ficará assim, mas terá mais espaço para consertá-la a partir daqui Vou clicar aqui e fazer o zero como o lado da dor e vamos definir com 1.180. OK. Agora é perfeitamente que sim. Agora, se virmos, ficará assim. OK. Agora, na próxima etapa, temos que adicionar três pontos. Para fazer isso, vou até Assets, clico no ponto lateral, clico em inserir instância e vamos colocar. Vamos cortar e ir para os arquivos. E aqui dentro, eu vou pressioná-lo assim. Depois, basta pressionar esses dois itens e pressionar A para adicionar o layout automático aqui, farei com que seja 220 e o layout automático será uma linha centralizada assim. Agora, vamos ajustá-la manualmente porque essa seção é muito longa, então precisamos ajustá-la manualmente. Para ajustá-lo manualmente, removerei esse quadro, não, precisamos ajustá-lo, vou apenas selecionar os itens e clicar em Ignotolayout, e vou ajustá-lo manualmente desta forma Então serão 20. OK. Bom. E agora temos que adicionar um plano de fundo a essa seção de revisão dessa forma, então a seção de revisão será 600, mas não precisamos que seja 600. Então, vamos fazer com que contenha e façamos com que seja como 500. Vamos ver, vamos ver, vamos diminuir o tamanho assim. Então vamos selecionar este e a altura é 492 e onde está a moldura que adicionamos. É isso mesmo. Vamos fazer a altura 492 e será um contêiner gratuito. Agora vamos renomear essas coisas. Aqui, vou mudar isso para conjunto de avaliações e não precisamos desse quadro, então vou apenas selecionar todas as avaliações e adicioná-las à revisão e vamos mudar o layout para um layout horizontal como este. Em seguida, revisarei este quadro e aqui vou alterar esse quadro para revisar G e esse quadro será um laboratório ou os mesmos dados do mesmo dia, mesma tag da, e este terá 24 barras, sete tags, todos esses textos, temos que mudar a cor de preenchimento para essa cor preta assim Agora vamos adicionar a arma real. Vamos abrir o arquivo e temos David, copiar o texto e testá-lo assim. Vamos adicionar a imagem. Então aqui temos outra análise. Vamos adicioná-lo aqui e substituir esse texto. Agora mude essa imagem assim. Agora vamos ver isso no design. Eu ficarei assim, para que possamos diminuir o tamanho dessa caixa. Faremos isso no design do elementor. Agora, vamos manter isso assim. Agora temos a seção. Agora só temos que criar a seção puta. No próximo vídeo, vamos criar a seção Puta 63. Seção de rodapé de design: Olá, pessoal. Agora só nos resta criar essa seção de rodapé Então, quando eu criar a seção de rodapé, vou criá-la na cor escura, e aqui vou adicionar o logotipo, e aqui vou adicionar um resumo da clínica, e aqui vou adicionar um identificador de mídia social Depois disso, aqui vou adicionar links úteis. Então, deste lado, adicionarei esses líderes de contato. OK. Vamos começar. Primeiro, vou aumentar o tamanho da moldura e vamos adicionar uma nova moldura, e vamos fazê-la com um recipiente de preenchimento, e ele vai fazer 500 por enquanto, e depois vou adicionar layout automático a ela , então pressionarei Shift A, acabei de adicionar o layout automático e, em seguida, o layout automático. direção será o layout horizontal e aqui definirei o preenchimento horizontal como zero e o preenchimento vertical como Então o que eu faço é adicionar fundo preto. Se apenas mudarmos essa cor de preenchimento para a cor preta, ela não será definida para o tamanho desta moldura, o que temos que fazer é clicar aqui, clicar no retângulo e clicar assim, então definir com preenchimento e altura será 500 Ok Agora vou clicar nesse Igno Autoayo desse retângulo. Então eu posso ajustá-lo como eu quiser assim, ajustá-lo assim e aqui eu vou ser adicionado fora desta moldura desta forma. Então, não na seção de revisão, fora do quadro como esta, e devemos clicar em IgnotlaPut desta forma O que aconteceu? Sério Ok, agora tudo bem. Aqui, o retângulo está aqui. Vou colocar o retrângulo e não no topo, depois adicionarei o Itroclor Sem Itrol ou cor de campo. A cor do campo será essa cor preta. Agora a cor do nosso campo é a mesma, então temos que adicionar nosso logotipo como primeira etapa. Vamos para nossa folha de estilo. Aqui está nossa folha de estilo e aqui está nosso logotipo. Esse é o nosso logotipo, mas precisamos do logotipo branco. Crie um logotipo branco, basta colocar o logotipo e, na propriedade, posso clicar nele no botão da variante e posso clicar nele no botão da variante e criar uma seção de introdução da variante aqui Vou mudar essa cor para definir a variante e alterar o nome da variante para logotipo branco Tudo bem. Agora, novamente, acesse o site e aqui vou adicionar o logotipo, vá para assert Assets. Teremos o logotipo JB, clique nele, e aqui o logotipo branco ardósia, clique nas inserções e, em seguida, recorto os arquivos TG dentro da moldura, coloque-os e vamos mudar o nome da moldura para totalmente Agora, o que eu tenho que fazer é selecionar a seção de rodapé desta forma, então teremos que adicionar a margem superior pois está apenas na margem superior 60, 60 é muito marcha. O kit 30 será bom e o tamanho do item, vou torná-la zero por enquanto Então eu vou ter que criar um texto. Eu pressiono T nesse tipo de texto e, em seguida, de Ty para falar, vou alterá-lo para texto de parágrafo e a cor de preenchimento, vamos mudar a cor de preenchimento para essa cor branca Esse texto deve estar dentro do rodapé assim. Agora vou ver essas duas opções e pressionar Shift A e depois mudarei esse layout para vertical. Aqui, preciso colocar esse logotipo sobre o texto. Neste quadro, teremos que alterá-lo entre o tamanho e as duas extremidades. Agora, a seguir, vamos adicionar um resumo aqui, vamos ao hart GPT, e aqui, digamos, agora eu preciso de um resumo, não, não, eu preciso criar a seção put, DiutertonMe Vamos ver que tipo de detalhes o GPT gerará Ok, eu gero os detalhes assim. Ok, e bom. Ok, temos todos os detalhes, mas eu preciso de um resumo. Então, digamos que eu precise de um resumo para limpar em 150 caracteres. Copie, recebi uma mensagem. Vamos adicionar aqui. Coloque uma seção, algumas aqui, altere esse texto assim, então eu vou configurá-lo para preencher e conter. Agora, o que eu tenho que fazer é mudar essa coluna de tamanho quatro. Ok, temos que adicionar identificadores de mídia social aqui, temos link de mídia social, terei Facebook, Twitter, Facebook, Sam, Twitter e link. Vamos adicionar a etiqueta que vou colocar aqui. Agora vou clicar aqui e clicar na fase de pesquisa de Fontas Neste ritmo, eu posso aqui, basta selecioná-la, remover esta parte e selecionar na interseção, ritmá-la assim Coloque-o abaixo desta moldura. Vamos fazer desse quadro uma soma limpa como essa. Agora, basta pressionar Shift A para adicionar o layout automático. Em seguida, clicarei no ícone vetorial e mudarei a cor do campo para branco para que possamos claramente o que aconteceu aqui. Então, aqui, vamos renomear esse saracebe e aqui vou defini-lo como uma linha enviada e aqui vou mudar para abraço e a altura será o conteúdo do abraço E agora podemos mudar a pátina horizontal e vertical 20 para maior, ok E agora o que eu faço é usar a cor do campo. Vamos adicionar essa cor azul como campo e depois rádio 20, vamos aumentá-la em 20. Então, vamos diminuir os cantos para nove. Vamos aqui. Nada mal, mas podemos aumentar esse Facebook basta clicar no I 2542 Agora está tudo bem, agora o que eu tenho que fazer é duplicar esta folha de impressão, vamos selecionar esses dois ícones e pressionar Shift A para adicionar o layout automático e vamos torná-lo um layout horizontal E entre o lado B 20. E agora vamos mudar esse ícone vetorial. Vamos adicionar um link fino. Vamos adicionar o tweeter X Twitter C. Não temos um novo ícone do Tita? Parece que não temos um novo ícone do Twitter. Por enquanto, vamos adicionar esse antigo e, no elemento, podemos adicionar o real rapidamente aqui e colá-lo assim. Em seguida, removerei esse Facebook, selecionarei o ícone do Twitter e clicarei na proposta da cepa C e alterarei com 505250, é um pouco grande e diminuirei Seis estão bem agora para encher alto, vamos fazer um recipiente de enchimento alto. Com serão dois por muito pequenos. Vamos fazer isso. Só precisamos de dois. Vamos verificar a largura aqui com 65 77. Podemos facilmente 657 curtir isso. OK. Agora, precisaremos alterar essa cor de preenchimento para a cor branca. E vamos duplicar isso novamente e aqui vamos adicionar o ícone vinculado Nós vinculamos, basta selecionar o ícone vinculado, e não precisamos desse quadro e clique aqui, clique dentro desse vetor e coloque o link aqui. Agora devemos aumentar esse ícone vinculado que corresponde a outro. OK. E agora vamos adicionar o Instagram. Acesse Font tsm S Instagram. Aqui, pegamos o ícone e mudamos o Instagram, removemos a moldura do Instagram e clicamos aqui, colamos assim. Então, vamos aumentar esse tamanho para mudar a cor para branco. Ok, agora isole esse conjunto e vamos mudar entre o tamanho e dois OK. Agora vamos ver a aparência e ela ficará assim. Então, se parecer muito fraco, podemos simplesmente reaumentá-lo alterando o máximo de 60, tornando-o como 65 65 Sim, 65 65 funcionará bem. Agora, veja, agora vai ficar assim. E aqui temos um branco. Vamos mudar isso assim. OK. E agora vamos mudar a outra seção. Na verdade, posso acrescentar que realmente vejo a seção de fotos e está a 30 m de um preenchimento horizontal E agora vamos renomear essas seções, resumo da clínica e aqui Então, mídia social. Em seguida, temos que adicionar links úteis. Vamos usar links úteis para fazer esse tipo de ST e, aqui, vamos adicionar esse tipo de tanque e alterá-lo para substituir a sub . Se não temos sub aqui, vamos julgar rapidamente temos sub aqui, vamos julgar Então comece aqui, vamos adicionar texto aqui. Em seguida, temos que adicionar nosso link rápido. Eu duplicarei o t, soltarei as duas seções e pressionarei Shift A e alterarei o layout para o layout vertical E aqui vou mudar o texto para botões, e então podemos adicionar detalhes como casa, e essa casa será preenchida na cor azul porque esse é o link selecionado. Depois, vou apenas duplicá-los e vamos ao mapa do nosso site e copiar o blog dessas seções. Em seguida nossos provedores, nosso provedor, nossos provedores, provedores, contatarão sobre o contato e, em seguida, solicitaremos um horário de atendimento, não precisamos nossa solicitação de serviço e solicitaremos uma consulta. E então vamos adicionar a página de termos e condições. Ok, agora eu apenas seleciono esses links e pressiono Shift A, e vamos mudar entre o tamanho 12 e selecionar esse quadro. E aqui, vamos adicioná-lo como 30. OK. Então eu vou mudar essas cores para apenas selecionar todas elas e mudar suas cores para Y. Ok. E aqui, por enquanto, vamos somar 60, mas obviamente mudaremos esse tamanho. E agora vamos adicionar nossa seção de localização. É a nossa localização. Cópia de contato. E aqui, vamos criar outro texto, pressionar o texto e alterar a tipografia para subdin novamente, pressionar Dye text e, a partir daqui, copiar esses detalhes Primeiro, teremos o número de telefone, o número de telefone em um número de telefone como este, depois terei que selecionar essas duas seções como essa e pressionar Shift A e depois alterar a posição para o layout vertical. E aqui vou apertar o T e clicar aqui, e aqui vamos mudar o tamanho da fonte para Parágrafo. OK. Agora vamos adicionar os detalhes. E-mail. Sim. Sim. Duplique este no e-mail Vamos duplicar isso algumas vezes. Basta adicionar essas barragens e, novamente, teremos horas. Tudo bem. Agora, aqui temos problemas, se adicionarmos assim? Vamos adicioná-lo assim. OK. OK. E agora vou selecionar todos esses itens e pressionar Shift A para adicionar um grupo, e esse tamanho intermediário será Datel All right Agora temos essas três seções, e eu apenas seleciono a seção de rodapé e vou alterá-la entre os lados para Otto e ela se ajustará de acordo com o espaço que ela tem E aqui está esse design. Teremos que aumentar isso um pouco assim e agora diminuir o tamanho do quadro para caber no rodapé Agora, o que precisamos fazer é uma seção de direitos autorais. Então, vamos fazer isso também. Para fazer isso, na verdade, podemos usar esse quadro. Então, para fazer isso, eu apenas aumento o tamanho desse retângulo. Vamos fazer um retângulo como uma filmagem, intervalo B. Agora, aqui, vou adicionar o texto onde eu fiz com que ele adira, então eu apenas adiciono à seção a. E nesta seção de rodapé, vamos renomear essas coisas para que possamos entender facilmente Então, esses serão os anéis rápidos de link fraco, e aqui estará o tanque. Por enquanto, temos aqueles que informam onde está o contato. Esta será tinta Esta será a informação de contato. OK. Agora teremos essas três seções. Eu apenas pressiono Eu apenas seleciono essas três seções e pressiono Shift A para fazer o putter set, e então eu vou colocar um e nesta seção Poa, vou alterá-lo para o layout vertical E agora o texto vai para o final e aqui vamos defini-lo como preencher e conter. O tamanho interno é 60, tudo bem. Agora, aqui vou mudar esse tipo de gravidade para tipografia de barcaça e mudar sua posição para o centro Agora isole a seção puta na seção de rodapé no preenchimento vertical, clicarei aqui e definirei esse zero OK. Agora, o que vou fazer é adicionar um layout a esta seção. Acabei de mudar A e depois adicionarei 30, 30 a 2020, ok. Agora, aqui, vamos adicionar os detalhes dos direitos autorais. Aqui temos direitos autorais e direitos autorais. Não, sem direitos autorais. Escrevemos um 2024, 2024, assim. Agora o que eu posso fazer é adicionar um traçado, clicar em Traçado e aqui vou mudar essa cor para a cor branca e clicar nesta. Não este, clique neste. Vamos selecionar apenas a parte superior e ficar assim, então eu só tenho que selecionar o puta VG e aumentar seu tamanho assim OK. Agora temos uma seção semanal de design puta Então eu coloco um conjunto, tenho que definir que a largura conterá algo errado Aqui, eu vou fazer isso 30. Agora, vamos fazer com que seja 60. E no conjunto de espuma, terei que adicionar esse tamanho intermediário ao Otto assim Agora, está tudo bem, e aqui não vamos 60, é como 30. Ficará assim. OK. Agora, na verdade, esses ícones são muito grandes. Vamos remover isso e depois vamos tentar adicionar 56 por 60. Vamos primeiro remover o layout horizontal e vertical aos 66 , e não precisamos de um preenchimento . Vamos alterá-lo para 56 por 50. Continue assim para todos esses itens Novamente, vamos fazer isso fifo. Agora está assim e ela está bem. Agora precisamos selecionar a página inicial e pressionar comando ou controle e colocá-la assim OK. Agora aqui está o design do nosso site. 64. Design sobre página parte 01: Olá, pessoal. Agora , temos que criar o registro de nossos provedores e páginas de contato. Criamos a página inicial com sucesso e agora temos essas pequenas tarefas. Para obter conteúdo para a página, podemos usar nossos concorrentes Na verdade, só precisamos ter uma ideia de como nossos concorrentes criam suas páginas sobre e que tipo de conteúdo elas são usadas. E ao obter essas coisas, podemos criar nossa própria página sobre. Se acessarmos o arquivo de requisitos de design do site, podemos ver a inspiração do design. A partir daqui, abrirei a conta desses concorrentes, basta clicar duas vezes aqui e copiar e colar na nova guia e farei isso para todos esses concorrentes. Site como este. OK. Agora, aqui, vamos ver as páginas sobre. Primeiro, temos este site e aqui temos Autink e esta página sobre só tem esta seção E se formos aqui, podemos ver a página? Não, aqui não temos nenhuma página sobre, então podemos ignorar esse design. E se formos aqui, teremos cuidados urgentes. E aqui temos sobre a página. Então, nesta página sobre nós, temos nossa história, e aqui temos nossa missão e valores. Então, se descermos, poderemos ver nossos profissionais médicos e um painel de médicos, e podemos adicionar essa seção na página de nossos provedores e, a partir daqui, podemos obter esta seção e nossa seção de missão e valor. Se formos aqui, aqui temos uma seção e nesta seção sobre, temos conteúdo sobre a clínica e aqui temos Y Joss e Riax & Enjoy, então temos detalhes Então, ao verificar se isso é difícil, podemos ter a ideia de que o que temos que adicionar em nossa página Sobre. E, em nossa opinião, meu plano é criar esse tipo de seção e criar uma seção para nossa missão. Vamos fazer isso. Para fazer isso, vou até o design Figma, e no design Figma, colocarei esse design e vamos criar uma nova moldura, e a moldura será desktop e eu a colocarei ao lado da nossa página inicial e depois mudarei o nome para nossa página inicial e depois mudarei o nome Em seguida, pressionarei Shift A para adicionar layout automático e, no layout automático, farei com que seja um layout vertical e, aqui, o tamanho intermediário será de um a 20, e o preenchimento esquerdo e direito será 140 e o padrão superior e inferior será zero OK. Agora temos que adicionar esse layout de grade. Se marcarmos aqui, não temos nenhum estilo de grade, mas se clicarmos aqui e aqui, já criamos o layout da grade, então eu posso simplesmente clicar nele e clicar neste ícone de adição. Então eu posso criar um estilo para esse layout de grade. Vamos que S é como a grade principal, isso. Ok, agora se eu for para A e clicar aqui, podemos ver o layout da grade principal. OK. Agora, o que vamos fazer é adicionar esta seção. Portanto, podemos simplesmente copiar essas seções daqui sem criar do zero, porque agora temos uma página inicial clara e obtemos a aprovação de nossos clientes Então, quando tivermos aprovado o design, podemos simplesmente copiar o conteúdo daqui. Vamos copiar esse menu para copiá-lo. Eu posso simplesmente selecionar esse herói e pressionar Command C e colá-lo assim. OK. Agora, verifique se você está no layout automático da página definido de forma semelhante à configuração do layout automático da página inicial Se for semelhante, você não terá problemas. E agora, para a página A, não precisamos desse botão ou não precisamos desse tipo de espaçamento. Vou reduzir a altura da seção do herói para 600 assim. Então aqui temos esse texto em branco, mas não podemos vê-los. Vamos adicionar uma imagem de fundo para que possamos vê-la claramente. Vou clicar no retângulo e clicar aqui. Então vamos fazer alturas 600 e eu vou clicar neste IgnooToLayout Então eu posso colocá-lo aqui sem problemas como esse. OK. Agora vou colocar isso assim antes de fazer isso, tenho que adicionar a imagem. Então eu já criei a imagem. Você pode verificar essa imagem na seção de recursos. Vamos adicionar essa imagem. Clique aqui, clique no vídeo da imagem. Ok, aqui. Vemos imagens, o primeiro projeto e uma página, e aqui temos a imagem. Basta clicar em Abrir e clicar aqui para adicioná-lo. Então, o que eu posso fazer é deixar isso para trás. Mas quando eu o coloco para trás, não vejo esse tipo de cor preta. Então, se formos para a página inicial, e aqui temos uma cor linear que tem 80% da opacidade Então, aqui eu tenho que adicionar essa sobreposição linear a esta página sobre Então, vamos fazer. Faça isso primeiro, eu clico neste ícone de adição. E aqui, vamos ver a configuração. É zero e 84, e a cor ficou preta. Então, vamos adicioná-lo. Primeiro, temos 80 como opacidade e se eu clicar aqui e clicar em Linear e aqui aqui temos 84 Então vamos ver 84, zero, e aqui temos 24. Vamos adicionar esses detalhes a 24. OK. Agora está bom, mas esse mesmo estilo não combina com o daqui porque essa imagem do médico não está aparecendo, então vamos ajustá-la conforme vemos, podemos eliminá-la. Podemos deixar isso aqui assim. OK. E aqui podemos reduzir a opacidade dessa forma e é muito melhor Ok, agora não precisamos desse botão, então exclua o botão. Aqui temos que adicionar o texto. Para adicionar o texto, temos que gerar o texto e, para gerar o texto, podemos usar o GPT Eu abri o HGpt e vamos pegar nosso aviso. Aqui temos o primeiro aviso, copiamos o aviso e depois colamos a frente. Você é redator de conteúdo. Você é redator de conteúdo e quero que escreva conteúdo para cerca de uma página do site da JB Family Clinic Então aqui estão as informações. Então, vamos adicionar nossas informações sobre a clínica familiar JB, na verdade, aquelas informações que temos no conteúdo do site Se verificarmos o conteúdo do site, aqui temos o conteúdo do site. Vou apenas copiar esse conteúdo assim. Talvez seja suficiente copiarmos o conteúdo para cá. Vou apenas copiá-lo e depois no GBT, eu vou para eles. Na verdade, temos conteúdo para criar um resumo do empréstimo das categorias. Então, agora eu quero dizer que, na verdade, aqui dentro, digamos, eu quero uma seção. A primeira seção é sobre nós e a segunda seção é nossa missão e valores. Ok, agora apresentador vai gerar o conteúdo, e vamos ver, ok Agora devo dizer que quero título sobre a página e o subtítulo Precisa de subtítulo para cada seção. E, na verdade, não precisamos de subrit para cada seção. Só precisamos dele para manchetes. Ok, aqui temos o título. Vou apenas copiá-lo e vir aqui e clicar aqui, depois colar o título assim e vamos vir aqui. E coloque o subpdin assim. Talvez precisemos de mais detalhes sobre o substituto porque isso é muito baixo. Então, digamos que o subdin precise de mais informações. Vamos copiar este. Talvez seja muito conteúdo, mas vamos ver, talvez caiba. Sim. Cabe aqui. E agora temos que criar esse tipo de seção. Então, eu apenas copio a seção e colo assim. E não vamos adicionar esse tipo de conteúdo à página sobre. E aqui, vamos fazer isso entre o tamanho, pois, entre o tamanho 90 funcionará. E aqui, vamos acrescentar sobre o conteúdo, e aqui vou copiar a linha como manchete de medo como essa E vamos copiar esse conteúdo. Primeiro, copiarei e colarei assim, e depois duplicarei E aqui temos essa seção, basta colar essa seção e, na verdade, aqui, vamos fazer com que seja 60, porque quando fizermos 60, ela terá mais espaço. OK. Agora, aqui não aprendemos mais. Podemos adicionar essa solicitação de conteúdo à sua consulta e aqui não precisamos desse botão. Está bem? Agora temos sobre o conteúdo e temos que mudar essa imagem. Antes de mudarmos a imagem, vamos criar a próxima seção. Para criar a próxima seção, vou apenas duplicar esta e aqui vou mudar nome desse conteúdo para cerca de três camadas, e aqui teremos nossa missão, eu acho, nossa missão e valores, basta copiá-la, testá-la aqui, e o que temos que fazer é colocar essa seção em primeiro lugar e essa imagem, em segundo lugar, assim Aqui vamos adicionar essas informações, basta copiar nossa missão e valores, colocar assim. Então aqui não precisamos de sublinha, coloque isso assim Vamos remover esse botão. Não precisamos desse botão. Vou remover este também, e aqui temos que adicionar nossos valores fundamentais. Na verdade, vamos adicioná-lo para adicioná-lo, podemos adicioná-los como uma lista. Então, o que podemos fazer é criar um novo texto dentro do resumo, como aqui, não dentro deste. Ok, aqui temos uma subdivisão vamos adicionar nossos valores fundamentais assim Então aqui disse isso como subdin e agora vou duplicá-lo e alterá-lo de texto para parágrafo e aqui o que temos que adicionar são esses detalhes primeiro, vou copiar esses textos e meu plano é apenas copiar esse texto e meu plano é apenas copiar esse Não precisamos de tantas informações porque o usuário conseguirá entender isso facilmente se adicionarmos um texto simples como esse e eu selecionarei a elipse e criarei uma elipse como vamos torná-la E agora vamos mudar essa cor de preenchimento para azul e destacar esses dois itens e pressionar Shift A, selecionar o layout horizontal e aqui colocá-lo no centro e o tamanho intermediário será 12. Assim, talvez seis, seis estejam muito perto. Será baseado. OK. Agora vou copiá-lo algumas vezes assim. Agora vou adicionar essas informações assim. Novamente, vamos adicionar os detalhes. Então, temos atenção personalizada. Agora vou copiar esse texto e colar na parte inferior. Aqui temos um problema. O problema é que, se continuarmos nossa missão, o tamanho é menor que o texto. Então, o que podemos fazer é clicar aqui e clicar no conteúdo e ele aumentará assim. Então aqui vamos copiar esse texto e colocar o texto assim. OK. Agora, temos nossa seção de missão e valor. E acho que aumentar essa imagem para 600 será baseado. 605 20 está bem. Talvez 520 fique bem aqui, vamos fazer a altura 600 assim e agora temos que mudar essas imagens 65. Design sobre página 02: OK. Agora, vamos adicionar essas imagens. Primeiro, clico nesse triângulo vermelho ou na imagem. Clique aqui, clique em maglah Videos e em uma pasta de página no arquivo de imagem, você pode ver sobre nós a imagem da nossa missão, basta clicar nela e colocá-la assim Então, em nossa missão, você pode fazer o mesmo assim. OK. Agora temos sobre nós e nossas seções missionárias. Em seguida, na pasta de conteúdo do site, podemos ver que há oito categorias a serem adicionadas. Então, vamos adicioná-los. É bem simples. Vou aumentar isso em relação ao tamanho da página, e aqui podemos simplesmente copiar esta seção do jeito que está basta copiá-la e colá-la assim. Na verdade, sele a página e cole-a assim. Por que não está adicionando O, algo errado. Porque adicionamos esse Ignotolayo, então eu simplesmente o desmarquei e ele se encaixa perfeitamente E aqui temos que mudar essa largura. Então, aqui temos uma largura de 1001 60, então temos que fazer com que essa largura seja a mesma Então, para fazer isso, podemos facilmente remover esse preenchimento esquerdo e direito dessa forma, depois ele se ajusta automaticamente e aqui, podemos simplesmente fazê-lo encher o recipiente e ficará assim . Aqui não precisamos desses ícones de carrossel Isso será menos assim. OK. Agora temos que adicionar o conteúdo. Então, vamos fazer isso. Primeiro, aqui, temos que adicionar uma pequena descrição como esta, depois vou duplicá-la, e aqui temos que adicionar a descrição do empréstimo desta forma OK. E nessas tomadas, teremos que mudar a tipografia, vamos mudá-la como um botão, botão não vai funcionar Talvez vamos mudar para parágrafo e, em seguida, e se adicionarmos sublinhado Adicionar sublinhado não é profissional e talvez vamos parágrafo e tornar esse meio normal assim Vamos aumentar o tamanho até 2021, assim. E agora eu posso, entre o tamanho 20, mas vamos fazer com que seja como 15. 15 funcionarão bem. Ok, temos a primeira categoria e temos que fazer o mesmo para as categorias, e vou apenas copiar esse texto daqui e colocá-lo aqui assim. Em seguida, coloque os tanques a descrição do empréstimo desta forma e aqui podemos fazer esse mesmo tamanho e fazer o alinhamento no canto superior esquerdo do alinhamento. Vamos fazer o mesmo aqui desta forma Vamos continuar e agora temos esse terceiro com esta pequena descrição, copie uma pequena descrição daqui. Adicione uma curtida aqui, depois copie a descrição do empréstimo, a descrição do empréstimo e apenas copie, basta clicar neste item e clicar em Copiar propriedade e clicar aqui e vir aqui e clicar em Colar propriedade Aqui entre os tamanhos 15 e também temos que fazer isso aqui 15. OK. Agora, então temos que adicionar este. A pequena descrição, vamos copiar o texto daqui e colar assim , colocar e colar assim. OK. Agora, novamente, aqui, propriedade passada , na verdade, temos que copiar a propriedade novamente copiar propriedade, colar propriedade. Ok, então faça com que seja igual ao item. Agora temos esta seção e temos mais quatro pela frente, e vamos adicionar esses quatro itens no design real. E agora, o que temos que adicionar é esse rodapé. Então, podemos simplesmente copiar esse rodapé e colocá-lo aqui. Na verdade, acho que copie o rodapé e o rodapé VG e cole assim Na verdade, o que podemos fazer é selecionar esses itens. Clique em criar componente e o nome do componente será rodapé Agora, o que podemos fazer é ir para ASSRs, e aqui temos o rodapé , arrastar e soltar assim Ou podemos simplesmente clicar aqui e clicar na instância do Istat como esta Então vamos fazer os tamanhos de um a 20 e colocar assim. Ok, criamos com sucesso a página sobre. 66. Página de blog de design: Olá, pessoal. Agora é hora de criar a página de bloqueio. Meu plano é criar postagens de blog como essa. Vamos começar. Primeiro, vou criar uma nova moldura. Na verdade, podemos simplesmente duplicar essa página sobre e remover esse conteúdo Precisamos apenas do conteúdo do cabeçalho e aqui vou mudar para bloquear. Agora vou até o GTP rígido e pergunto se quero bloquear o título da página e uma pequena descrição Aqui temos o título. Vou apenas copiar e colar e aqui temos uma pequena descrição, cole assim. Ok. Agora vou usar esse tipo de design, então posso simplesmente copiar esse design e editá-lo. Vou até as multas e aqui copiar nossos fornecedores e clicar aqui e colar assim, depois vou colocar assim e daqui, vou remover esse Ok, e agora vou fazer os tamanhos intermediários, um, dois e fazer com que a esquerda e a direita sejam iguais assim. Ok. Agora, aqui não precisamos deste, basta removê-lo e não precisamos ver o ícone do perfil para removê-lo e aqui, vamos remover este, dois e aqui, removê-lo também. E vamos ver nosso design novamente. Aqui temos o título e uma pequena descrição, depois a data da publicação do artigo. Então, vamos adicioná-los para. Ok, aqui devemos ter a data. Vamos ao Chat GDP e me pergunte o artigo do blog, sructblogist Deve incluir uma pequena descrição do título e a data Ok, aqui temos o título. Eu apenas copio o título e colo assim. Em seguida, pequena descrição, copie a descrição e cole assim, então aqui precisamos copiar esse título e colocar o título neste título, não no título. É a data. E a próxima coisa é que eu quero isso como dois a dois porque três por três não terá muito espaço, mas três por três está bem. Sim, três por três está bem. Vamos manter o três por três assim. Mas se quisermos, podemos simplesmente aumentar isso e adicionar dois por dois. Dois por dois será maior. Vamos fazer três por três e aqui temos o próximo. Na verdade, não precisamos adicionar conteúdo para cada um, então vou colar isso por três vezes antes de você fazer isso, vamos remover esses dois e copiar e colar três vezes. E aqui não precisamos desses dois itens, basta removê-los. E agora vou mudar essa imagem. Acho que já temos as imagens, então ok, clique na imagem e clique aqui e temos a página do blog, basta copiar o texto de lá e também vamos fazer o mesmo por aqui. Sim. Agora, só temos que duplicar isso pela segunda vez desta forma e aqui temos que alterar essa altura para um conteúdo como este Então, vamos torná-lo um pouco maior assim. Ok. E aqui talvez tenhamos que aumentar essa parte como 640 e vamos fazer o mesmo com isso, na verdade é 645 Vamos fazer o mesmo aqui. Ok. Agora a parte do bloco parece boa, vá para ASRs e temos que adicionar o rodapé Vamos adicionar o rodapé assim. Vamos torná-lo um e aqui reduzir isso assim. Agora temos um bloco de cerca de dez páginas em bloco. Agora temos que criar a página de contato. 67. Crie paginação para blog: Nosso problema na página do blog. Acho que você tem 100 postagens de blog em seu site. Se alguém acessar esta página do blog, ela carregará toda a postagem do blog. Há duas maneiras de resolver isso: a primeira é adicionar uma função que carrega apenas a postagem quando alguém navega pelo site. Precisamos usar JavaScript e PHP para fazer isso, ou podemos adicionar uma paginação, que significa que podemos carregar apenas seis postagens por Se alguém quiser ver mais aqui, temos uma paginação e podemos clicar na segunda e na terceira página para verificá-las , então vamos criar uma Para fazer isso primeiro, vou criar um quadro e vamos aumentar esse tamanho do quadro até aqui porque adicionamos esse layout automático de atribuição de conteúdo Agora, aqui podemos adicionar a paginação. Para fazer isso, vou criar uma nova moldura, e ela aparece aqui porque nossa moldura entre o tamanho ou entre o espaço é de um a, aqui, de um a 20. Selecione esse arquivo. Aqui está um e eu adicionarei a largura como recipiente de enchimento. Ok. Agora, aqui podemos clicar em IgnooToayout e colocá-lo aqui, então temos que fazer Em seguida, criarei um retângulo criado aqui e, na verdade, vamos adicionar layout automático a esse quadro e defini-lo como layout horizontal e, aqui, vamos remover esses detalhes à esquerda e à direita Vamos fazer com que seja um zero e o quadro não deve ser fixado com o quadro deve ser assim e aqui, vamos criar conteúdo no meio e agora eu quero adicionar a seta esquerda direita, primeiro, vamos adicionar a seta esquerda. Eu clico aqui e na fonte tsm, vamos pegar essa seta e eu vejo, aqui temos a seta Eu removo isso e clico aqui. Ok. Agora eu não preciso, na verdade, eu não preciso desse. Agora eu posso simplesmente clicar nessa seta e pressionar Shift A para adicionar ayo e, em seguida, colocá-la no meio E vamos adicionar as pátinas esquerda e direita 30, e a parte superior e inferior também como 30 Isso é muito grande, talvez gêmeos sejam do tamanho. Ok. Agora vou adicionar o raio do canto como Vamos fazer com que seja l dois. Ok. Agora temos que adicionar a cor de fundo. No preenchimento, vamos adicionar a cor de fundo. Na verdade, podemos adicionar essa cor azul clara e os cantos são muito grandes. Vamos fazer com que seis sejam perfeitos. Aqui temos que aumentar a altura desse ícone e vamos fazer ícone 202-20-3203 funcione bem e eles devem ser 15 e isso deve ser 15 . Aqui, vamos mudar a cor do campo para branco até agora, E o ícone é um pouco maior, vamos fazer com que seja 15. 15 será perfeito e agora vou duplicar isso e depois girar assim e vamos fazer em tamanhos pequenos C Agora o que eu tenho que fazer é adicionar números. Vamos somar os números. Primeiro, clico nos tanques e adiciono texto como aqui, então vamos adicioná-lo como um e, na tipografia, vamos fazer o texto como sub Em seguida, pressione Shift A para adicionar layout automático e adicionar 15 à esquerda e à direita. Eu não trabalhei. Eu não trabalhei, então vamos adicionar a cor do campo. Então, vamos adicionar essa cor de campo. Então, temos que aumentar isso. Posso deixar detalhes à esquerda e à direita como este e aqui 15, aqui, 15, talvez vamos transformar a esquerda e a direita em 20, não vai funcionar, talvez vamos aumentá-los manualmente. Os cantos estarão dentro e aqui a cor será branca. Vamos fazer isso também como 45, 52, será o mesmo que esses dois itens e aqui mude a cor de preenchimento para branco e a cor de teste será a cor de teste será essa cor preta e vamos adicionar uma pequena borda. Traço, as cores do traçado, vamos tornar isso e isso melhor do que antes e vamos duplicá-lo Agora, aqui temos dois e a fase dois, vamos fazer isso como Vamos fazer o último como dez. Ok. Agora, aqui temos que fazer isso na cor azul porque esse será o item selecionado. Então, para fazer isso, defina os tanques, torne a cor do texto azul e a cor de fundo será essa cor azul clara. Sim. Isso vai funcionar. Aqui, vamos mudar essa cor para essa cor preta aqui, alterá-la para a cor preta e seguida, copiar esse estilo de traçado aqui, vamos esquecer isso aqui, basta clicar com o botão direito do mouse e clicar na propriedade copiar e aqui vem e clicar na propriedade de colar. Faça o mesmo aqui. Agora vou colocar isso aqui. A geração da página ficará assim. Podemos fazer isso à esquerda e à direita como azul aquilo. Então, aqui também podemos tornar esses números azuis porque eles podem ser clicados em azul desta forma Aqui, basta adicionar três pontos e fazer assim. Aqui vamos transformar essa cor em preto. E agora temos a paginação e essa paginação mudará no design, mas isso fará com que o cliente verifique o design, podemos explicar o recurso podemos explicar 68. Design entre em contato conosco, parte 01: Olá, pessoal. Agora temos aqui o link de nossos provedores. Para nossos fornecedores, não precisamos de uma página separada porque aqui temos nossos fornecedores dedicados. Então, quando alguém ou visitante clicar em nosso link de provedores, vamos fazer com que essa pessoa reaja à página inicial Agora, o que precisamos criar é contato. Para criar uma página de contato, como fizemos antes, podemos verificar o site de nossos concorrentes e ver suas páginas de contatos. Aqui temos o endereço do formulário, endereço do formulário, telefone e horário de funcionamento, aqui temos mapa e vamos para o próximo para este, não vemos a página de contato. Vamos ver. Não temos uma página de contato separada, mas aqui temos horário comercial e os detalhes no rodapé Então, neste site, temos locais e em locais, temos os detalhes da localização e neste site, ele tem página de contato e nessa página de contato, temos o formulário e a localização do escritório e horário comercial, depois outras informações. Vamos usar um botão semelhante ao nosso site também. E vamos ao HagiDB e digamos que precisamos de um título e uma pequena descrição para a página de contato Então diga que agora precisamos de localização, horário de funcionamento. Acho que, na verdade, temos a localização e abrimos agora. Sim, temos esses detalhes, então não precisamos dessas informações e acho que podemos continuar. OK. Então, primeiro, vou até o letreiro do figo Muddy Podemos simplesmente duplicar um desses. Vamos duplicar o bloco e colocá-lo assim. Em seguida, remova esta seção, removendo isso porque não precisamos dela aqui, precisamos adicionar esse rodapé dentro do blob desta forma Agora, aqui, vamos mudar o quadro Nenhum contato copie o título, pressione o título, copie as descrições, a descrição assim, então vamos fazer esse tipo de formulário. Vamos pedir, gerar contato, solicitar formulário f. Nome completo, e-mail, telefone, assunto da mensagem. Ok, essa é boa. Então, vamos criar o formulário e podemos usar o design semelhante a este. Então, primeiro eu crio uma moldura e vamos fazer a moldura com uma largura de tração como essa, depois vamos fazer com que a altura da moldura como 800 seja como 800, depois pressione OK, então vamos remover aqueles desnecessários, duh Não precisamos de nenhum desses e, entre os tamanhos, vamos fazer com que seja 20, e aqui vamos criar o formulário. Vamos criar um texto como esse e digamos que dê um título ao formulário como este. Vamos copiar este título o título, alterar o tipo de subtítulo gravito, subtítulo é muito sm é muito grande, talvez vamos manter o tamanho da roupa de cama e tenhamos que mudar a moldura para 800 assim roupa de cama e tenhamos que mudar a moldura para Agora, aqui, temos que criar o texto. Por enquanto, vamos criar um texto assim. Em seguida, nome completo, copie esses ts e primeiro temos que criar quadros diferentes. Vou destacar esses dois itens e pressionar o botão Ao para criar um layout automático e torná-lo um layout vertical. E esse tamanho de layout será como vamos mantê-lo aqui. A altura será 800 assim, depois coloque-a em cima e aqui entre o tamanho 20 ficará bem e agora eu pressiono Shift A e depois mudarei a altura para encher o recipiente e a altura será talvez 45 e mantenha-a assim e depois à esquerda, vamos fazer com que seja seis e, em traçado, vamos mudar essa cor. Na verdade, já tivemos o melhor traçado aqui, copie essa cor e a cor do traçado será essa e o raio do canto será seis, vamos fazer isso com 55 Temos que mudar a cor de preenchimento desse nome completo, na verdade, são dois aqui, está bom. Acho que estamos bem, então crie o próximo campo de texto. Vamos copiar o campo de texto do endereço de e-mail e colar assim e depois o número do telefone, copiar o texto e obter isso passando e soltando o dragão assim. Então, novamente, vou copiá-lo algumas vezes. Então, temos um assunto que não deve ser opcional. Na verdade, não precisamos do assunto aqui, então vamos copiar a mensagem. Vamos adicionar o assunto de qualquer maneira. Vamos tornar o assunto opcional dessa forma. OK. Então, o que precisamos adicionar é o método de contato preferido, e este é o menu suspenso. Então, vamos adicionar assim e aqui temos que adicionar um ícone suspenso como este, não é bom, não é bom. E com isso, fazer com que pareça que seis é muito ruim. Agora vamos posicionar, se não, no layout e colocá-la aqui, depois mudar a cor para essa cor de texto. Isso é bom. Agora, o que temos que adicionar a essa data de consulta preparada é opcional. Vamos fazer isso. Como você soube de nós? Vamos torná-lo opcional, na verdade, e aqui podemos duplicar isso, se fosse assim Em seguida, faça o upload do documento. Vamos fazer o upload do campo do documento para adicionar um anexo, as pessoas possam fazer upload anexos, como relatórios médicos. Observe que essa caixa de seleção, como separamos adicione termo e condição e política de privacidade, se quiser, você pode adicionar esse texto. Na verdade, não criamos o botão de mensagem. Vamos criar o botão de mensagem. Não é botão, campo de mensagem. É obrigatório e, aqui, temos que mudar isso. Na mensagem, temos que aumentar um pouco para 150 tudo bem, e definir a ponta para cima e para cima, vamos fazer com que seja como seis no preenchimento e, novamente, temos que mudar isso OK. Agora está tudo bem e aqui temos que adicionar um botão para que possamos copiar esse botão e vir aqui, provar o botão, não aqui. Temos que selecionar esse quadro e colar o botão. Vamos aumentar o quadro com isso e aqui alterar esse texto para subenviar o poema está pronto Agora, o que precisamos fazer é adicionar o horário comercial e outros funcionários. Vamos fazer 69. Design entre em contato conosco, parte 02: Ok, aqui temos que adicionar os detalhes de contato. Se formos para a página inicial, podemos ver aqui os detalhes de contato, então podemos simplesmente copiá-los e colá-los diretamente na página de contato, desta forma. Agora vamos editar essa seção. Primeiro, vou diminuir essa altura assim que se ajusta ao design e também precisamos da localização e não precisamos dessa, então vou removê-la e aqui vamos fazer assim. Então vou colocar isso como uma linha à esquerda no centro. Agora, aqui podemos ajustar isso assim e, na verdade, o que temos que adicionar é que, na verdade, não precisamos desse ícone de poeira fina e agora o que precisamos é do nosso horário de funcionamento, vou apenas duplicar este e, se formos até o rodapé, temos o horário de funcionamento aqui, então vou copiar isso e vir aqui e vamos mudar o local da clínica para funcionamento e aqui temos o texto De segunda a sexta, das 8:00 às 17:00. Agora temos que mudar esse ícone, vamos Para mudar isso, vou até os ícones de barra do pons.google.com e, aqui, vamos pesquisar o horário de funcionamento, talvez o horário. Talvez o relógio funcione. Vamos adicionar esse tipo de relógio e aqui temos que diminuir seu tamanho assim e descobrir o tamanho do ícone. O tamanho do ícone é 106 por 106. Vamos mudar o tamanho para 100. Vamos fazer com que seja 100. Ok, vamos torná-lo maior. Agora, vamos manter isso e clicar em ENG para baixá-lo e aqui, vamos clicar no ícone e aqui nos vídeos NV, depois adicionar o ícone Como se fosse realmente maior e a cor não estivesse certa, então vamos pegar nosso código de cores assim. E vamos aqui e mudar o código de cores e mudar esse medidor. Avalie, vamos mudar para 200 e clicar em PNG para baixá-lo e vir aqui Novamente, clique em CJ Image. Passe por isso assim. Ok, perfeito. Agora temos detalhes e detalhes do NAs abertos e, em seguida, quero adicionar um mapa aqui. Vou apenas criar uma nova moldura e fazer com que o tamanho da moldura seja 500 e copiarei esse endereço. Na verdade, é um endereço falso, vamos tentar. Basta acessar o Google e pesquisar o endereço. Eu não acho que realmente exista uma localização como essa, então aqui está. Agora, pressionarei o comando Shift e obterei a captura de tela da foto no Mac e, se você trabalha no Windows, pode acessar a ferramenta de recorte ou o Snipe intol e obter a captura Snipe intol e Agora, vamos lá. Vou clicar neste botão de vídeo e vamos aqui e colocá-lo assim. Agora vou diminuir o ajuste. Na verdade, eu tenho que diminuir esse tamanho assim para caber nele ou posso aumentá-lo e torná-lo visualmente melhor e vamos lá. Agora, o que precisamos fazer é adicionar o rodapé para adicionar o rodapé, posso ir para Ativos e entrada, clicar em Inserir Instância e adicioná-la assim, assim Em seguida, aumente um pouco da moldura como esta. Ok. Agradável. 70. Design sobre nós, página 01: Olá, pessoal. Agora vamos criar uma página no elemento Wordpress do Pro. OK. Aqui está o nosso design Figma, então eu vou para o painel do WordPress, e agora vamos para a página R. Ok, aqui, vamos clicar em Nova página e o nome da página estará acima. Vamos copiar esse título como título. E aqui, vamos colar e clicar em Editar com o elemento de tudo certo. Agora, o que precisamos fazer é criar o site e, se verificarmos o elemento ou o site, teremos uma seção semelhante à seção de heróis, essa seção da página inicial é semelhante à seção sobre, o que significa que podemos usar essa seção da página inicial para criar uma seção Quero dizer, a seção de heróis da página inicial. Então, vamos fazer isso. Além disso, essa seção de heróis da página sobre a página do blog e da página contato sempre se repete. Vamos criar isso como um modelo, o que significa que podemos usá-lo repetidamente em nossas páginas Earl. Agora, por enquanto, vou publicar esta página sobre e aqui abrirei o painel do WordPress em uma nova janela e, a partir daqui, irei para o modelo e salvarei modelo aqui, irei para a seção e, na seção, clique em adicionar nova seção aqui, vamos selecionar o tipo de modelo e a seção de aprovação e vamos adicionar o nome. Vou adicionar o nome como seção de herói para subpáginas e clicar em criar modelo Vou simplesmente remover essa biblioteca porque não precisamos dela. Agora, se verificarmos a seção sobre o herói da página a sessão principal do herói da página inicial é bem semelhante Podemos simplesmente copiar esta seção da página inicial. Vamos fazer isso. Novamente, abrirei o site em nova janela e clique aqui em Editar com elemento de, clique com o botão direito do mouse e clique em Copiar e vamos para a seção de modelos, seção de heróis para modelo de subpágina e clique com o botão direito do mouse e clique em colar E simplesmente cola assim. Agora, o que precisamos fazer é remover coisas desnecessárias. Primeiro de tudo, se formos aqui, não, não aqui, se formos para o design Figma, podemos ver a altura A altura é 600, então vamos selecionar o contêiner e aqui ele tem 800. Eu apenas faço com que seja 600 e aqui não temos o botão, então vamos remover o botão e excluí-lo. Agora, a imagem de fundo. Aqui temos essa imagem de fundo. Vou clicar na imagem de fundo e em Exportar, alterá-la para JPEG e clicar no botão Exportar Agora vamos ao pequeno png.com e diminuamos o tamanho desse arquivo dessa imagem de capa Agora eu clico no botão JPEG para baixá-lo aqui, vamos aqui em estilo container Vamos mudar essa imagem. Clique na imagem e aqui temos a imagem que acabou de ser carregada. Aqui, vamos adicionar o texto alternativo ou o texto antigo e clicar em Conselecioná-la, acabou adicionada desta forma e não precisamos fazer nada e agora clique em Publicar Agora temos esse modelo e, se formos para a página A e clicarmos no ícone dessa pasta, podemos ver nosso modelo na seção Meu modelo. Atualmente, não temos a seção de heróis para o modelo de subpáginas, então vou repetir a página. Quando eu a colar novamente aqui, temos a seção de heróis Eu posso simplesmente clicar em Inserir e clicar em Aplicar. Simples assim, basta adicionar. Agora só temos que mudar o texto. Veja, esse é o poder do elemento ou modelo. Vamos ao design do Pigma e copiemos o título. Venha aqui, coloque o título aqui e a descrição, copie a descrição e cole essa descrição assim. Bom. No entanto, se verificarmos a descrição, aqui há um espaço pequeno como este. Vamos fazer isso, podemos adicionar R aqui, temos que aumentar isso e vamos adicionar R aqui. Então vamos adicionar R aqui e, novamente, temos que adicionar R após essa tomada. Vamos aqui, vamos adicionar B assim. Ok, muito bom. Agora eu clico em C publish para salvar. OK. Agora vamos para a próxima seção. Esta seção também é semelhante a esta seção. Podemos simplesmente copiar esta seção da página inicial e adicioná-la aqui Vamos fazer. Aqui está nossa página inicial e eu clicaremos nesta seção , clicaremos direito do mouse e clicaremos em Copiar Em seguida, em uma página, clique aqui e clique em Colar. Clique com o botão direito e clique em Colar. OK. E por aqui, não precisamos dessa caixa de imagem, então vou selecioná-la e excluí-la. Não precisamos desse. Basta selecioná-lo. Exclua-o. OK. Agora está muito bom e talvez tenhamos que mudar algumas coisas que verificamos aqui, não temos dois botões. Só temos um botão. Vamos remover esse subbotão e, se verificarmos o tamanho da fonte, o tamanho intermediário é 60, e clicarmos no contêiner principal e na lacuna da coluna 60, não precisamos fazer nada e simplesmente copiar o texto primeiro desta forma, depois copiar o segundo texto, copiá-lo para aqui depois copiar Vou clicar neste texto e clicar em Condo Bigate e aqui vou apenas adicionar esse texto e aqui temos que adicionar o botão de solicitação de agendamento, vamos adicioná-lo E depois de projetarmos completamente este site, criaremos ações para esses botões. Por enquanto, vamos adicionar uma tag de hash a esses links e agora temos que alterar essa imagem No estilo de imagem, não temos nada. Então, vou clicar nessa imagem e clicar em Exportar e o tipo de arquivo é PEG, depois ir para Ti PNG, adicionar a imagem e colocar no rádio o tamanho do arquivo assim, depois vir aqui. Escolha uma imagem na imagem como esta, copie o texto antigo desta forma e clique em Ocultar e ela acabou de ser adicionada desta forma e não temos nada para fazer Agora temos que ir para a próxima seção e criar a próxima seção também é bem fácil. É assim que, quando criamos a página principal, podemos simplesmente copiar o conteúdo de lá. Então, posso clicar com o botão direito do mouse nesta seção sobre e clicar em Condupl agora, o que posso fazer é clicar no contêiner e clicar nesse contêiner dentro do contêiner principal e colocá-lo assim Agora, vamos mudar o texto. Aqui, vamos mudar esse texto primeiro desta forma, depois vamos copiar esse texto e depois o texto. Novamente, temos que adicionar sumin aqui, então copie o título do tum, duplique e cole Agora, um bloco, vamos mudar esse texto para usado, assim. Em seguida, temos que adicionar a lista de substitutos. Vamos clicar em Adicionar elemento e na lista de pesquisa. A lista de ícones funcionará, adicione-a assim. E aqui vou remover os itens e manter apenas um item e depois clicar neste texto para editá-lo, copiá-lo e colá-lo. Agora clique neste ícone e temos esse círculo. Clique em inserir para inseri-lo e vá para estilo sobre estilo, a cor do ícone é a cor primária e vamos ver o tamanho do ícone. O tamanho do ícone é 16 por 16. Faça com que não seja 60, 16. A lacuna veja a lacuna, aumente, pressione e a lacuna é oito, faça a lacuna oito e no texto, vamos mudar a cor para essa cor de tipografia Vamos ver que esse texto é tipográfico para que possamos manter os estilos de texto tipografia ou OK. Agora, o que eu tenho que fazer é duplicar esses itens por vezes e adicionar o conteúdo Basta copiar o conteúdo, basear o conteúdo aqui e copiar o conteúdo Aqui, então copie este conteúdo e copie este, passe-o. Agora, vamos alterar o tamanho intermediário aqui, o espaço entre eles. Vamos ver o espaço entre e é 20. Vamos criar espaço entre 20. OK. Bom. Agora temos que adicionar esse copiar/colar que tem esse sabor e não precisamos do botão, exclua o botão. Ok, agora, vamos ver. Agora temos que adicionar essa imagem para que a imagem, exporte-a como JB EG, clique no botão exportar nossa missão de Exportar para exportá-la Em seguida, em PNG minúsculo, adicione o PNG assim. Em seguida, clique em JPEG para baixar esta imagem e agora vamos até cerca, clique nesta imagem e clique em escolher imagem aqui, vamos apenas adicionar a imagem COVID, passe assim. Agora clique em selecionar bom. Agora, o que temos que fazer. Agora temos essa categoria com a descrição do empréstimo. Então, vamos fazer isso. É muito fácil porque já temos essa seção na página inicial, mas há algumas mudanças, mas precisamos apenas desse design. Então, vou copiar a seção inteira daqui e ir para a página e colar o conteúdo, e aqui não precisamos desse. Exclua porque não há nenhum botão aqui, ok. Agora, aqui, vamos copiar o título. Acho que o título é o mesmo que esse. OK. OK. Agora não precisamos desse recurso de carrossel Na verdade, podemos corrigir isso facilmente com grade, não com colunas. Então, vamos tentar. Eu clico em adicionar elemento e adicionarei uma grade como esta na configuração da grade, também definirei a massa da coluna e a linha será duas e as lacunas serão 20 assim. Então, o que posso fazer é adicionar essas estrelas. Primeiro, temos a verdadeira grade, vamos colocar essa grade na parte superior, então vou clicar aqui e adicioná-la assim. Então, a partir daqui, vou ver a caixa de imagem e adicioná-la assim na grade, removerei a margem e os preenchimentos e agora vamos adicionar essa aqui Então, novamente, temos este, depois este e agora temos que aumentar a contagem de linhas da grade. Clique em concreto, vá para o layout e altere a linha para três linhas e adicione-as desta forma. Agora acho que adicionamos o carrossel Dt I will mother, clicamos aqui, clicamos em Condolete e também não precisamos desse, então vou OK. Agora, isso está perfeitamente alinhado e não precisamos fazer nada Simplesmente aparece assim e agora temos que editar o conteúdo. Clique na caixa da imagem e em um estilo, altere o alinhamento vertical Topo. E agora vamos adicionar esses detalhes extras. Primeiro, temos o texto na descrição, vamos adicioná-lo assim e adicionar o BR, acho que deveria funcionar e adicionar outro BR, ok, bom. E agora esse texto deve aumentar um pouco para fazer isso. Podemos simplesmente adicionar a tag B dessa forma. Acho que não está funcionando. B. Não está funcionando, não poderemos usar a caixa de imagem porque temos essa linha extra, então temos que criar isso a partir do scribe ou podemos usar CSS, mas adicionar CSS é a maneira mais fácil Vamos adicionar o CSS e ver o que podemos fazer. Então, primeiro copiarei esse texto e substituirei esse texto e, como fiz antes, adicionarei duas linhas de quebra de BRO como essa e aqui adicionarei uma nova tag chamada span. Esta é uma tag HTML e uma extensão flash para fechar a tag span, e aqui adicionarei o subtítulo da caixa de categorias igual à classe class OK. Bom. Agora, isso é um SMLC classe HTML que acabei de criar, então vou copiá-la e clicar em publicar e aqui vou para o web design personalizado dos EUA ou vou para o painel do nosso site e aqui temos a aparência e clicarei em Personalizar Na personalização, podemos adicionar ESS adicionais. Para adicionar ESS adicional, posso copiar o CSS novamente e vir aqui, adicionar pontos porque é uma classe e colchetes como esses, então adicionarei o tamanho da fonte como vamos ver, vamos ver O tamanho da fonte é 20, 20 x. Acho que isso deve funcionar agora. E vamos até a página sobre e reprimir isso e ver se funcionou ou não Ok, está funcionando. Este texto é maior que o texto da janela para confirmá-lo, vou abrir esta nova janela e dar uma olhada, certo, vá para o Inspec e esta No Inspec, temos span e aqui temos nossa classe CSS. Se eu realmente tenho o mesmo tamanho, não , é do mesmo tamanho, então não precisamos fazer isso. Esses dois itens dizem que este deveria ser 21. Aqui, eu tenho que fazer 21 assim e clicar em Publicar. Agora, se eu verificar a partir daqui, devemos ver o Teste 21, clicar aqui e aqui temos 21 e ver com a diferença, legal. Agora podemos fazer o mesmo com o resto desta caixa de imagem. Clique aqui e cole este texto e vamos para aqui espaçar o conteúdo real, então para obter o conteúdo real, vou para o nosso arquivo de texto de conteúdo e em texto a partir daí. 71. 0708 design sobre a página parte 02: Eu tenho as categorias com descrição pequena e longa. Então, primeiro nós já criamos, e depois temos a saúde da mulher, copie o texto e aqui está interessante Acho que sentimos falta disso. Então, vamos para a página inicial. E na página inicial, sim, simplesmente ignoramos a mulher, mas podemos fazer isso porque podemos obter a forma perfeita com esses seis itens. Então, vamos ignorar isso. Então, vamos fazer esse exame de saúde e cuidados preventivos. E em uma pequena descrição, adicionarei esta na descrição do empréstimo, aqui temos a descrição do empréstimo. Ok, então temos cuidados pediátricos. Então, para o tratamento periátrico, eu tenho que copiar essa descrição e colar assim, depois copiar o texto, o texto Na verdade, adicionamos o mesmo texto ao primeiro item, então temos que alterar o primeiro item e alterar os detalhes do primeiro item dessa forma, ritmo assim. Agora temos esse quinto ícone. Vamos aqui, andando assim, copiando o texto. Você pode não ver a parte que eu copio no texto porque eu a abro na minha segunda janela desta forma. Então, novamente, copie todo esse texto e vá para o subord mental, temos sua descrição OK. O último. Vamos copiar o formato daqui e colá-lo. Agora, fique assim, copie este, cole assim. OK. Agora, o que temos que fazer é colocar essa imagem no topo, como alinhamento vertical, no topo, e temos que fazer isso para um item, mas podemos simplesmente escrever e clicar em copiar e escrever e colar esse tipo Ah, não está copiando, então vamos clicar aqui e copiar. Em seguida, clique aqui e cole esse tipo. Nada aconteceu. Vamos ao estilo. Sim, eu aconteceu, mas não pareceu. Vamos aqui e fazer assim. Ok, clique em publicar e vamos conferir no design. Eu ficarei assim, o que significa que criamos com sucesso a seção de descrição do designer. Agora temos que projetar a seção de blocos. 72. 0709 design request frame: Agora, em nosso design FICMA e no site, se alguém visitar o site e clicar neste botão de chamada à ação, devemos ter uma página para solicitar agendamento Então, vamos criar essa página para que ela tenha um formulário de solicitação de agendamento e uma pequena descrição. Então, vamos ao nosso bate-papo do GPT e dizer que não precisamos. Digamos que eu precise criar, copiar o texto daqui. página e ela devem ter título, o subtítulo e solicitação Vamos executar esse código e aqui temos os detalhes. Tudo bem Aqui estão os detalhes, e aqui está a pequena descrição, e temos todas as informações. Então, vamos aqui e podemos simplesmente pegar o quadro do formulário de contato para criar este, então vou duplicar o Eu sou assim Então aqui, vamos mudar o título, copiar e colar. Em seguida, no subtítulo, copie a sublinha e cole assim. Agora, aqui podemos adicionar uma pequena descrição. Vamos copiar essa primeira parte e adicioná-la assim. Em seguida, copie este texto e eu duplicarei esse texto, pressione, arraste e solte assim Vamos adicionar esse conteúdo. E aqui, vamos mudar esse texto para o sol subdding. Será um parágrafo e aqui não a altura, a largura será um recipiente de preenchimento como este. E aqui não precisamos dessa seção e não precisamos dessa seção, precisamos apenas dessa moldura e eu aumentarei a altura da moldura. Na verdade, posso alterar a altura para metade do conteúdo e isso mostrará que Earl aqui vou apenas aumentar isso para assim e, para este formulário, vamos centralizar esse formulário Vou fazer com que seja o centro e essas tomadas devem ser centradas assim Neste botão também deve estar no centro assim. Então, dessa forma, adicionar centro na verdade não parece bom. Então, aqui, temos um enorme Espace. Para este Espace, podemos adicionar imagem porque essa será a maneira mais fácil de remover o espaçamento E. Vou selecionar aqui e adicionar essa imagem assim e vamos diminuir a imagem. Então, vamos adicionar essa imagem com isso. Vamos aumentá-lo assim. E se quisermos, podemos adicionar esse texto aqui. Vamos recortar o texto e colá-lo aqui. Na verdade, temos que adicionar um quadro a esses dois itens, então pressione Shift A e torne-o um layout horizontal. Em seguida, coloque aqui esse texto acima, selecione o texto e coloque-o acima. Então, a largura será a metade, não a metade. Vamos ajustar o texto manualmente dessa forma. E quanto ao tamanho intermediário? O tamanho intermediário é bom para dois. E também esse texto deveria estar aqui, coloque-o acima assim e agora parece que está bom, e agora o que temos que fazer é relacionar o taco e colocar o taco no Vamos fazer um, 220 assim, e depois diminuir o tamanho. E aqui, vamos mudar essa imagem. Ok, na seção de recursos, encontre a pasta de imagens. Ok, agora eu clico aqui e seleciono a imagem do vídeo. Então, aqui nas imagens, você verá o primeiro projeto e a página de solicitação de agendamento. E aqui temos uma imagem, clique em Abrir e adicione-a assim Ok, agora nossa página de solicitação de agendamento foi criada e aqui vamos alterar o título desta página para solicitar agendamento. Ok. 73. Comprando hospedagem e domínio: Olá, pessoal. Agora é hora de comprar um domínio e hospedá-lo pois precisamos do domínio e hospedagem para hospedar nosso site WordPress. Então, primeiro menos escolha o domínio. Existe um site chamado taldls.com. Neste site, você verá todas as promoções e ofertas dos provedores de domínio e, a partir daqui, poderá comprar um domínio que selecione o melhor Hostin e obtenha um domínio mais barato Aqui, você verá um filtro. Aqui, vou pesquisar nosso nome de domínio como web design personalizado, e aqui tenho que clicar em verificar se você não é um robô. Ok, aqui temos os domínios disponíveis e, a partir desse filtro de preço, colocarei como $1 e vamos ver que tipo de domínio temos por $1 Aqui, temos domínio dot S personalizado de design web 4099. Nome Jeep Então, vou escolher este na nave espacial. Podemos obter o domínio XYC de pontos por Então, aqui, basta clicar em Name Jeep e ele será redirecionado para o nome E aqui eu posso pesquisar o nome do domínio. Então, vamos copiá-lo daqui e colá-lo. Em seguida, clique em pesquisar. Não precisamos do.com. Precisamos de pontos. Então, aqui podemos ver o ponto s, na verdade, podemos adicionar o ponto S. Ok. Agora, aqui está por um dólar 2,98. Eu apenas clico em adicionar ao cartão e ele é adicionado ao cartão. Agora clico em Finalizar compra e aqui posso adicionar o código promocional Então, vou aqui e vamos descobrir o código promocional. Este especial de 99 é o código promocional. Então eu apenas copio e colo aqui, clique em aplicar. Ok, agora eu tenho que entrar na conta Name Jeep, na verdade eu já tenho uma conta Name Jeep Se você não tiver uma, clique em Criar conta gratuita e siga as etapas. No meu caso, clicarei em login e aqui adicionarei meu nome de usuário e senha. Ok, acabei de entrar na conta do Namechp e aqui, adicionarei o código promocional, copiarei daqui e colarei assim Clique em aplicar, e agora temos o subtotal como 0,99, e eu vou desmarcar todas essas coisas, então remova-as Não precisamos de nenhuma dessas coisas. Agora eu posso clicar em Confirmar pedido. Antes de confirmar o pedido, vou acessar namjb.com e vamos atualizá-lo Em seguida, podemos selecionar o host clicando neste host e clicando em Hospedagem compartilhada. E no Name GP, podemos obter este pacote iStella and I Stellar plus para projetar e desenvolver No pacote ISTLLA, teremos recurso de e-mail e teremos GB, SSD No ITLlarPlus, teremos domínio ilimitado. No entanto, há um limite, mesmo que seja ilimitado, nunca é ilimitado. Acho que é só um truque de marketing. No entanto, aqui, temos correio ilimitadas e temos esse recurso de autobup Esse recurso de autobup é muito poderoso, e minha recomendação é escolher essa conta iTellarPlus se você for usar o nome de servidor barato para o nome de servidor barato Portanto, atualmente há uma oferta da Black Friday. É por isso que o valor é tão baixo. No entanto, o Namecheap ainda é 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, o que 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, basta pesquisar no Google se vamos para o domínio B dot XYZ, 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. 74. 0102 nova instalação do wordpress: Olá, pessoal. É hora de instalar o WordPress. Eu vou para o painel C e no painel C, temos o instalador de aplicativos soft tacular Basta clicar nele e aqui temos o Wordpress e, a partir daqui, basta clicar em Instalar. E agora aqui eu tenho que selecionar os detalhes. Primeiro, selecionarei TTPs e, sem essa parte www dot, apenas TTPs como protocolo, depois selecionarei o nome do domínio Então aqui está o nosso nome de domínio e aqui vou escolher a versão mais recente do Wordpress e não vou adicionar nenhum diretório Vou apenas instalar o WordPress na pasta raiz e aqui podemos alterar o nome do site e a descrição do site. Mas vamos mudar esses ITA enquanto projetamos o site. Por enquanto, vamos manter essas coisas como estão. E aqui temos que adicionar nome de usuário e senha de administrador. Eu adicionarei esses detalhes e também adicionarei uma senha. Lembre-se seu nome de usuário e senha, pois você deve usar esse nome de usuário e senha para fazer login no Wordpress e, a partir daqui, mudarei este e-mail do administrador para e-mail de trabalho porque atualmente esse e-mail não está funcionando. Ok, role para baixo e aqui eu não preciso de nenhum plugin extra. Remova os plug-ins extras e agora clique neste botão Instalar e ele começará a instalar o wordpress no site. Ok, o Wordpress foi instalado com sucesso e, a partir daqui, posso clicar neste URL e ir para o site do WordPress no URL administrativo, posso acessar o Wordpress assim. A partir daqui, basta clicar em não, não quero tentar um processo de configuração do ET, e aqui está nosso painel do WordPress. Para acessar o painel do WordPress, basta acessar o URL do nosso site e adicionar o WP Admin no final do URL do site Agora, aqui está a aparência do nosso site. Na próxima lição, vamos limpar o Wordpress e remover coisas desnecessárias do nosso site WordPress. 75. 0103 limpe o Wordpress: Olá, pessoal. Quando instalamos o WordPress pela primeira vez, haverá algumas coisas desnecessárias. Então, vamos removê-los. Primeiro, vamos começar com o plugin. Vá aqui e clique em Instalar plug-ins e aqui temos três plug-ins, então eu seleciono todos eles e clico em Desativar e clico em Aplicar Então, novamente, selecione todos eles e clique em Excluir e clique em Aplicar. OK. Então vamos aos temas. Aqui temos três temas. Atualmente, o tema ativo é de 20 a 25, vamos clicar no resto das equipes e removê-las assim. Também faça isso por este. Agora vamos aos comandos e aqui temos outros comandos, clique em Lixeira e vá para a Lixeira e clique em Excluir permanentemente Vamos às páginas e às páginas do Earl e aqui vou manter esta única página de política de privacidade e descartar a página de amostra Vá também para a guia Lixeira e clique em Excluir permanentemente. E vamos ver a biblioteca de mídia. Atualmente, não temos nenhuma mídia e depois vamos para o post Earl post, e aqui temos o Hello WordPOS cash Vá para a lixeira e clique em excluir permanentemente. OK. Agora vou para o painel e, no painel, vou descartar essas coisas porque não precisamos de nada disso por enquanto. OK. Agora, instalamos o site WordPress recém-instalado e estamos prontos para criar sites personalizados usando o WordPress 76. Tutorial 0104 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. Primeiro, vou sair logo aqui e clicar em Sair para entrar no site do WordPress, podemos adicionar uma barra após o URL do site e em wp 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 o Wordpress, e então temos a 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 fazer login. É por isso que temos esse tipo de seção de comando. Então, aqui, temos um novo ícone de menu e, por cima do 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. Então eu passo o mouse sobre ele e clico neste administrador. Ok, aqui temos detalhes pessoais. 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 Adnew e aqui podemos adicionar o título assim, e aqui podemos adicionar detalhes e e vamos clicar em Adnew 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 a equipe. 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 seguida, se eu pesquisar aqui elemento ou apresentador e este elemento ou plugin de construtor de sites apareceu, e aqui diz que foi 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 e aqui eu posso ver os plug-ins e, em seguida, se eu pesquisar aqui elemento ou apresentador e este elemento ou plugin de construtor de sites apareceu, e aqui diz que foi 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, instale o plug-in, depois ative-o, e aparecerá esta seção de plug-in instalado. A partir daqui, podemos clicar neste plugin 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, postar, 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 seções como escrever em geral, ler 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. 77. 0105 configuração do elementor pro: Olá, pessoal. usar o Elementor Pro para criar nosso site personalizado porque Elementor é o melhor construtor de sites WordPress que Elementor tem uma pré-versão, mas tem recursos limitados Vamos verificar os planos do Elementor. Para acessar esta página, clique no link na seção de recursos ou na descrição e você será redirecionado para esta página Então, aqui temos um plano de preços. O plano de preços recomendado é o Advanced Solo Website Builder. Com esse plano de preços, podemos obter 118 orçamentos pré e profissionais, e ele tem 86 projetos, mas com o plano essencial, temos apenas 57 Além disso, se entrarmos no mercado na seção de comércio eletrônico com o Advanced solo, obteremos o pop-up Builder Esse é um recurso que vamos usar e, na marca essencial, não temos muitos recursos. No entanto, se você pretende criar mais de um site, pode ir para o plano Avançado. Ou se você é um freelancer que cria um site para seus clientes, pode comprar a versão especializada. Ao escolher esse tipo de plano, poderemos substituir muitos plug-ins e complementos, o que ajudará a aumentar a velocidade de carregamento da página e a otimizar o site em geral. Então, vamos começar a instalar o Elementor. Para fazer isso, vou até o painel do nosso site, e aqui vou acessar os plug-ins e clicar em AdNeu Primeiro, temos que instalar o elemento pre plugin. Então, a partir daqui, vou pesquisar Elementor. Então aqui temos o plugin de criação de sites elemento. É desenvolvido pela elemento.com e é compatível com nossa versão do Wordpress Então eu clico em Instalar agora. OK. Em seguida, clico em Ativar. Tudo bem. Agora eu clico em Escape e vou pular essas etapas ou vou clicar neste botão Fechar porque vamos configurar o Elementor Pro usando o site do Elementor Novamente, clique no URL da seção de recursos e você será redirecionado para esta página e, a partir daqui, clicarei no botão Comprar agora no site Advance solo, plano Builder E aqui 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 ind elemento.com E ao fazer isso, você verá esse tipo de ícone de download e, em seguida, verá o elemento conectado ao Download, clique em , o download será iniciado e agora você tem o elemento do plug-in. Agora vamos configurar nosso site para fazer isso. Vou até o painel do WordPress vou até os plugins e clico em Instalar plug-in. Em seguida, clico em adicionar novo plugin. Em seguida, clico neste botão de upload do plug-in. Em seguida, clico em para empilhar e aqui temos o plug-in element pro baixado Portanto, é um arquivo C. Então, basta selecioná-lo e clicar em Abrir. Em seguida, clico em Instalar agora. A instalação levará alguns minutos. OK. Então você verá essa janela. Então, a partir daqui, basta clicar neste botão de ativação do plug-in. E ele será instalado com sucesso. Então, aqui está o plug-in de instalação. Agora eu clico em conectar e ativar. Então eu chegarei a esse tipo de página. Então, aqui eu clico em ativar minha licença. Ok, o elemento pro foi ativado com sucesso e agora podemos usar os recursos do elemento pro. 78. 0106 painel claro do Wordpress: Olá, pessoal. No painel do WordPress, você verá esse tipo de item. Para remover todas elas, basta clicar nessas opções do Estren e aqui você pode desmarcar a guia Istab que você não gosta Assim, ao desmarcá-las, você não verá mais essas guias Quanto aos plug-ins, irei para Instalar plug-in. Ele instala automaticamente o cache de velocidade da luz no site. Aqui está um plug-in de cache de velocidade leve instalado no meu servidor. Vou clicar em Desativar porque por enquanto, não precisamos de nenhum plug-in de cache Eu vou deletá-lo. Ok, perfeito. Vamos começar a criar o site na próxima lição. 79. Tutorial 0107 — editor 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 Jar 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 Estyle 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 80. 0108 página em breve do Elementor: Olá, pessoal. Agora, se o visitante visitar nosso site, ele ficará assim. E quando criamos sites para nossos clientes reais e empresas reais, essa é uma impressão muito ruim para a marca. Vamos criar uma página Come InSoonPage e definir essa página Coming Zoon para lançarmos nosso site Para fazer isso, vou até o painel do WordPress e, a partir daqui, passo por cima do elemento e clico em ferramentas. Nas ferramentas, temos uma guia chamada Modo de mantenedores. Basta clicar nele e, atualmente modo de manutenção está desativado, para que possamos clicar nesta caixa Db down e configurar a opção de manutenção para entrar em breve. Portanto, na opção de manutenção, se adicionarmos isso, isso afeta os mecanismos de pesquisa e diz que não é recomendável usar esse modo por mais de alguns dias. Portanto, mesmo que você esteja em manutenção ou criando um novo site, sempre selecione a página em breve. Depois, você pode alterar o design. Por exemplo, se você for fazer alguma manutenção, poderá criar um modelo elementar detalhes sobre a manutenção Agora, em quem pode acessar, podemos configurar o login, que significa quem pode acessar o painel do WordPress Se o definirmos como conectado, qualquer pessoa poderá entrar no painel de imprensa de acordo com as funções que tiver Mas se clicar em personalizado, aqui temos a opção de escolher rolos. Se selecionarmos apenas a função de administrador, somente os administradores poderão fazer login no painel do WordPress Para este selo rodoviário, faça o login. Agora, aqui podemos escolher o modelo. Atualmente, não criamos nenhum modelo, então podemos clicar em criar um agora, Link, basta clicar nele. Agora estamos na seção de modelos. Nesta seção de elemento ou modelo, podemos criar layouts e seções de página e, em seguida, salvá-los. A vantagem é que podemos inserir esses layouts e seções de página pré-desenhados no design do nosso site WordPress Aqui eu posso simplesmente adicionar o nome e clicar em Editar com elemento. Vamos fazer isso. Eu apenas adiciono o nome do modelo em breve, depois clico em Editar com elemento e ele será redirecionado para o elemento e, a partir daqui, clicarei no conjunto desta página e layout da página como elemento ou tela OK. Agora, o que posso fazer é clicar nesse ícone de adição e adicionar um novo contêiner, selecionar a caixa plex e nosso layout de página será um layout vertical, então clico neste e depois clico no contêiner, e aqui adicionarei o teste de altura mínima Vamos adicionar 700 assim, depois clico nesse ícone de adição e adiciono o título Vamos apenas adicionar o título assim. Em seguida, vamos aos estilos, mudarei a cor do texto para preto e definirei o alinhamento como centro Em seguida, na tipografia, clico neste ícone de lápis e altero a família da fonte para Você pode selecionar qualquer fonte que quiser, mas eu gosto muito do fpin Então, vou adicionar tamanhos 60, depois vou adicionar um normal como este. Então tudo bem e eu vou adicionar um texto como, clique neste ícone de lápis e clique no conteúdo, e eu vou aqui no texto como se algo novo chegasse em breve. Presente. Agora preciso adicionar um parágrafo para adicionar um parágrafo, posso clicar nesse botão de elemento de anúncio e aqui vou obter um editor de texto como este. Em seguida, adicionarei um texto como se estivéssemos empolgados lançar nosso novo design de site só para você. Em seguida, vou destacá-lo e, em seguida, clicar neste Toggle Toolbg e vamos fazer o alinhamento central Em seguida, vou para Estilo, posso criar o centro de alinhamento a partir daqui, depois mudarei a cor do texto para preto e vamos mudar a tipografia para pop-ins Um conjunto de tamanhos 21. Então, o que eu quero fazer é colocar esses dois textos no centro para fazer isso, isolar o contêiner e, na seção de layout do contêiner, adicionarei conteúdo de justificação como centro, como Então eu quero colocar um logotipo na parte superior para fazer isso, vou clicar em Adicionar elemento e aqui na imagem. Vamos pesquisar a imagem e aqui temos a imagem e vou colocá-la assim. Então aqui eu tenho que adicionar o logotipo da nossa empresa. Eu clico nesta seção de escolha de imagem e aqui eu reconheço o arquivo selecionado, e agora aqui está o arquivo Basta clicar nele e ele é adicionado assim, depois removo esse título e coloco o texto alternativo. O texto ALD será o logotipo da JB Family Phenic. Em seguida, clico em selecionar Agora vou para o estilo e o alinhamento ficará no centro. Isso é um dos dois. Vamos fazer com 30, 30 será bom. Então eu preciso adicionar mais espaço entre essas duas seções. Para fazer isso, seleciono a imagem, clico em Avançado e, em avançado, clico nesse valor de link juntos. ícone da corrente o vincula, então eu vou, na margem inferior, 30, assim. OK. Agora, aqui embaixo, preciso de um link de assistente em N. Para fazer isso, clico neste ícone de adição e clico no título. Vamos colocar um título como Então, vamos mudar o design para esse design. Para fazer isso, vou tentar clicar neste texto e clicar em Copiar. Em seguida, clico aqui e clico com o botão direito, depois clico em além do estilo. Quando eu colar esse estilo, o estilo que adicionamos aqui será automaticamente adicionado ao título. Em seguida, vou para estilos E e clico em Tipografia, depois mudo seu tamanho para torná-lo 30 assim Então, vamos adicionar o ritmo posterior em 0,5, e agora vou adicionar o texto como se precisasse de um assistente. Agora, na verdade, vamos tornar o texto um pouco menor. Vamos fazer com que seja 25 e a largura será média. Agora, quero adicionar duas mensagens de texto, como ligar para nós e enviar um e-mail para. Para fazer isso, vamos criar uma caixa de ícones. Para fazer isso, clico em adicionar elemento e procuro um widget como ícone, sim, aqui temos a caixa de ícones Eu apenas arrasto e solto assim. Assim, então eu posso editá-lo a partir daqui. Então, primeiro, vamos mudar o ícone. Primeiro, preciso adicionar o ícone do telefone para fazer isso. Eu clico aqui e vamos pesquisar na linha de telefone. E vamos adicionar esse ícone de telefone e clicar em Inserir. Em seguida, você deseja adicionar um texto, como ligar para o nosso número de celular. Então, vamos fazer isso. Então, eu apenas adiciono assim. Então eu não preciso da descrição. Acabei de remover a descrição. Então vamos mudar essa cor para mudar a cor, eu clico no estilo e no estilo, clico no ícone e altero a cor principal para preto, e o tamanho ficará bom Em seguida, no conteúdo, altere o título para preto assim. Assim, podemos mudar o tipo de sótão. Podemos mudar o tipo de gravidade para como pop-ins e vamos fazer com que seja como 20. Então, será normal. Agora, vamos fazer com que pareça médio. Agora, o que eu quero fazer é adicionar a embalagem ao redor dessa caixa de ícone para fazer isso Na verdade, antes de fazermos isso, vamos criar o segundo ícone, que é nos enviar um e-mail e, para fazer isso, basta clicar aqui e duplicar essa duplicata desse Com a direita, pode clicar em Duplicar. Então, aqui vou mudar o ícone do telefone para o envelope, mude para este assim Em seguida, enviarei um e-mail para nós em nosso e-mail. Então eu quero adicionar esses dois na horizontal, mas atualmente é vertical. Para fazer isso, podemos facilmente clicar aqui e clicar em Novo contêiner. E aqui vou arrastar as bobinas na caixa de ícones até o contêiner, para que eu possa fazer o mesmo e na segunda caixa de ícones Em seguida, seleciono o contêiner e defino a direção como horizontal. Então, vamos fazer com que justifique o centro e eu mudarei essa lacuna para automática Na verdade, vamos fazer isso. Na verdade, vamos transformá-lo em um espaço como este. Então eu posso clicar nesta caixa de ícone e agora eu clico em Avançar , vá para borda na borda, temos a sombra da caixa. Acabei de clicar neste ícone de lápis. Em seguida, vamos adicionar detalhes. Vou fazer o desfoque como 15 e vamos fazer a dispersão como zero, e vamos mudar a cor um pouco mais clara Na verdade, não vamos adicionar sombra de caixa, clique em voltar ao padrão. Em vez de adicionar a sombra da caixa, vamos adicionar uma borda sólida. Basta clicar na borda e aqui, vamos adicionar o tamanho como dois. Vamos fazer com que seja como um. Então, vamos mudar a cor da borda para algo assim. Em seguida, vamos adicionar a redução da borda como 15. OK. Agora, o que podemos fazer é avançar o layout e adicionar preenchimento, vamos adicionar Padin como 20 OK. Agora vai ficar assim. Então, parece incrível, e vamos fazer o mesmo. Vamos clicar nessa caixa de ícones e podemos clicar com o botão direito do mouse e copiar, depois clicar com o botão direito e colar um estilo como este. Em seguida, clico no contêiner principal e aqui, vamos colocá-lo no centro e vamos fazer com que a lacuna entre as colunas passe o terceiro assim. Vamos tornar isso mais atraente. Para fazer isso, podemos mudar as cores. Então eu clico aqui e vou até EtyleSoeStyle, clico no ícone e clico Em seguida, clico nesse amostrador de cores. Agora vou mudar essa cor para azul assim. Na verdade, vamos obter a mesma cor azul que temos com o logotipo. Isso. Vou adicionar o código de cor azul aqui. É zero, duplo, F. E então o que eu posso fazer é botão direito do mouse em copiar e clicar botão direito do mouse em colar o estilo assim Agora, ficará assim no site. Como podemos torná-lo central se adicionarmos meia-noite como zero. Então, agora ficará assim e podemos adicionar mais estilos, mas, por enquanto, isso será melhor. Então, agora eu clico em publicar. Como podemos alterar o design na visualização do tablet e na visualização móvel. A visualização do tablet está boa, mas no celular, eu clico neste celular, então vamos mudar esse texto para que o tamanho do texto seja 38 e o resto ficará bem. O resto do design ficará assim e, no futuro, aprenderemos mais. Mas, por enquanto, vamos publicar e, se eu clicar nesse I, posso conferir no site. Vai ficar assim. Agora, o que vou fazer é ir para a página do modo de manutenção e aqui tenho que clicar em Salvar como agora, se verificarmos, temos essa página em breve, basta clicar nela e clicar nas alterações. Então, uma vez que fazemos isso, o modo de manutenção é ativado. Então, copiarei o URL do site e vamos tentar com uma nova janela anônima, para que possamos ver claramente Então, ficará assim. Então, para acessar o back-end, podemos simplesmente no slash WP admin. Então, aqui podemos adicionar nome de usuário e senha. Em seguida, clico em Login. Depois de clicar em Login, eu redireciono para o painel do WordPress e, se eu verificar a página inicial do site, enquanto fizermos login como administrador, veremos a aparência real do site em vez de em uma Portanto, se precisarmos editar a entrada, podemos acessar Modelos e clicar em Salvar modelos. Em Satemdates, aqui temos Come in zone, para que eu possa clicar em editar com Elementor e fazer alterações na página Come in Zone que criamos Portanto, isso é muito básico, mas, no futuro, aprenderemos mais e usaremos nosso conhecimento para criar um site personalizado que chame a atenção e represente o valor e a identidade da marca. E quando estiver pronto para lançar o site, você pode remover esta página da Coming Zone clicando aqui, e você será redirecionado para a página de ferramentas e aqui na guia do modo de manutenção e, a partir daqui, poderá desativar o modo Em seguida, você pode clicar em Salvar alterações ao clicar em Salvar alterações e copiar o URL, depois ir para a janela anônima e pressionar Enter e você não verá mais. Na verdade, eu tenho que fazer o logotipo quando você sair e vamos para a página inicial e você não verá mais a página da Coming Zone pressionar Enter e você não verá mais. Na verdade, eu tenho que fazer o logotipo quando você sair e vamos para a página inicial e você não verá mais a página da Coming 81. 0109 como o Wordpress e o Elementor são feitos por: Olá, pessoal. Antes de prosseguirmos, é importante entender um pouco sobre a base dos sites do WordPress. Esses sites são construídos principalmente usando STMS, CSS e outras tecnologias da web Ao trabalhar com o Elementor, não precisamos dominar STML e CSS, mas devemos estar familiarizados com alguns conceitos-chave. Por exemplo, em TML, você encontrará elementos como H um, dois, três, parágrafo Em CSS, você ouvirá termos como margem, preenchimento ou margem superior, margem inferior, preenchimento superior, preenchimento inferior e ID CSS Os termos aparecem com frequência e saber o que eles significam ajudará você a navegar por um elemento deles. Você não precisa aprender esses conceitos de A a Et, um elemento deles. Você não precisa aprender esses conceitos de A a Et em vez disso, apenas se familiarizar com seus nomes e opções. Ao trabalhar com elementos, você naturalmente entenderá mais como eles funcionam. Agora, vamos nos aprofundar em algumas dessas estruturas básicas de linguagem de marcação HTML ou hipertexto Pense nisso como o esqueleto de um site. Por exemplo, H um, H dois, três, essas são tags de cabeçalho que definem a importância do título em uma página H um geralmente é o título principal, enquanto H dois e três são usados para subhding como exemplo em um elemento do Canvas Eu clico neste texto helloworld e, se eu verificar a tag HTML ML, é Se quisermos, podemos selecionar H um, H dois, H três assim. Então temos aqui P. P significa parágrafo. Essa tag é usada como texto. Por exemplo, se clicarmos aqui e adicionarmos o editor de texto, vamos adicioná-lo assim, então aqui podemos vê-lo como parágrafo, o que significa que é uma tag P. Então, se quisermos adicionar um link como este, destacarei esta parte e vamos clicar neste link Inserir Edição, adicionar nosso link como google.com e Essa é a etiqueta A. Então, se eu mudar esse visual para texto e se verificarmos aqui, aqui está uma tag. Quando alguém clica nessa parte, ele redireciona para o google.com porque adicionamos esse google.com como o link deste Então, se quisermos colocar essa parte em negrito, posso simplesmente destacá-la e clicar nesse negrito. Então, o design, o texto mudam e, se formos para o texto, obtemos essa tag forte como essa. Não precisamos editá-lo com o editor SDML. Podemos simplesmente editá-lo visualmente. A única coisa que devemos saber sobre o que somos. Se soubermos o básico sobre o que estamos fazendo, isso nos ajudará a dominar o elemento. Então, devemos considerar o CSS básico. CSS significa cascata na folha de estilo. É sobre o estilo E. Ele controla a aparência do seu site, como cores, fontes e espaçamento entre I, e podemos organizá-los usando CSS Normalmente, podemos editar CSS nessa guia Estilo. Como exemplo, clico botão de lápis deste título e clico estilo E e aqui está o CSS ou conjunto de estilos que podemos fazer com o texto Por exemplo, se eu quiser mudar a cor, posso clicar aqui e mudar a cor para algo assim, não assim, assim. Esta é uma propriedade CSS deste texto que acabamos de fazer. Então, podemos mudar o alinhamento. Nesse caso, o alinhamento não mudará e, se quisermos, podemos adicionar sombra de texto ou aqui está a propriedade da tipografia Podemos mudar isso como quisermos. Quando os alteramos, mudamos o estilo CSS do elemento. Então, você usará principalmente margem e preenchimento. Elemente ou simplifique todos esses conceitos em configurações visuais. Margem é o espaço em I fora de um elemento como uma lacuna entre o título e o parágrafo Padin é o espaço I dentro um elemento entre o conteúdo e sua borda Elementa ou simplifica todos esses conceitos em estatinas visuais Por exemplo, para ajustar o espaço em torno de um elemento, podemos ir para a guia avançada e aqui temos margem e teclado Demonstre isso claramente, criarei uma nova caixa flexível e criarei esse contêiner do tipo coluna direta como este Em seguida, vamos adicionar a cor de fundo. Clique aqui e vá para Is dies, depois clique em Classic e vamos adicionar a cor vermelha como esta. OK. Em seguida, vou duplicar isso clicando com o botão direito do mouse e clicando em duplicar e, em seguida, colocá-lo em uma corda de dragão dentro do contêiner que criamos Em seguida, clicarei no ícone do lápis de título e acessarei o estilo dele Vamos mudar a cor do texto para preto. Além disso, vou duplicar este e vamos colocá-lo dentro do contêiner assim Vamos mudar a cor para algo como branco assim. Agora, aqui, o texto amarelo está fora do contêiner. Para corrigir isso, posso adicionar margem superior. Vamos fazer isso. Eu clico aqui e agora estou no contêiner e vou para Advance. Aqui está a margem e Padin. Aqui, clico em Vincular valor e o desvinculo. Basicamente, o que aconteceu é que se eu criar um link e adicionar dez no topo, ele será adicionado ao resto do design. Mas vamos torná-lo zero e, se eu quiser adicionar apenas a margem superior, posso adicioná-la assim. A margem é o espaço externo ao elemento. Quando eu adiciono margem para ultrapassar 60, ela está em 62 fora do contêiner, e se eu fizer de 1 a 20, ela em 120 pixels é espaço para fora desse contêiner, e se eu adicionar um valor negativo, ela está em -120 pixels para esse Então, se eu quiser adicionar espaço dentro do contêiner, posso adicionar preenchimento Desvincule os valores e adicionarei o preenchimento superior como 120. Quando eu adiciono, obtenho esse tipo de ritmo, e se eu fizer isso na parte inferior, ele adicionará 120 na parte inferior e podemos fazer o mesmo com a direita e assim Vamos fazer com que sejam 500 para que possamos entender facilmente ou ver visualmente as mudanças como essa. Na verdade, é demais. Vamos fazer cerca de 200. 200 é visualmente atraente, assim. OK. Agora, se eu quiser adicionar mais espaço entre esses dois textos, posso clicar nesse texto e avançar, e com antecedência, posso adicionar uma margem como 60, não no topo. Na verdade, eu tenho que adicionar a margem inferior. Então, se eu precisar de mais espaço, posso adicionar mais pixels na parte inferior assim. Posso clicar neste parágrafo e na margem superior estão 60 e ele é adicionado ao topo do parágrafo. Portanto, ter uma compreensão básica desses conceitos facilitará muito a solução de problemas e a personalização Por exemplo, se um botão não se alinhar conforme o esperado, você deve verificar a margem do conjunto de preenchimento Com o Nina CSS, podemos entender e criar um site personalizado com mais facilidade 82. 0110 design 01 seção herói, parte 01: Olá, pessoal. Vamos criar esta seção de heróis com elemento. Portanto, esta é uma interface do Figma que criamos no design personalizado do site com a parte Figma Portanto, verifique a seção de recursos para obter esse arquivo da comunidade Figma Então, vamos converter esse design Figma em elemento. Para fazer isso, estou no painel do WordPress. Passe o mouse sobre as páginas e clico em Nova página, e vamos editar como Hero one. Então, vamos adicionar o título da página como herói 1. Depois, basta clicar em editar com o Elementor. Então eu recebo essa mensagem. Acabei de fechá-lo porque vamos criar um site personalizado. Não precisamos de nenhum modelo pré-construído. Ok, agora estamos no editor de elementos. Então, primeiro, clico nessa configuração de página e seleciono o layout da página como elemento canvas. Assim. Ok, agora temos uma tela transparente. Então, primeiro, vamos ver o tamanho dessa seção de heróis. Então eu seleciono a seção do herói, e aqui, sua largura é 1440 e a altura é 700 Então, agora eu clico neste ícone de adição e aqui vou definir a caixa flexível Em seguida, selecionarei essa coluna de direção e obterei uma seção de coluna como esta. Então eu posso ver a propriedade desse contêiner e, a partir daqui, terei uma altura mínima de 700 fixel Então, para a largura, podemos dividir a caixa de largura do conteúdo até a largura total Então aqui eu coloco pixels, e a largura é 1.400 40. Então, digamos que isso seja 1.440 OK. Agora parece bom. Então, na próxima etapa, temos que adicionar essa imagem de fundo. Para adicioná-lo, selecionarei a imagem de fundo aqui. Aqui está a imagem de fundo. Em seguida, clico em Exportar e defino o tipo de arquivo como JPG e as taxas de tamanho de 1,5 X, depois clico em exportar MD one e é só fazer o download. No entanto, a contagem de kilobytes é muito alta, vamos reduzir o Para fazer isso, vou para o tiny png.com, depois vou arrastá-lo e soltá-lo aqui Antes de otimizá-lo, ele tem 580 kilobytes, mas agora tem apenas Eu clico aqui para baixá-lo. Ok, agora o que vou fazer é ir até o elemento ou editor e selecionar o contêiner para editá-lo, depois ir para Etyle In Etyles e adicionarei tipo de fundo será clássico e aqui temos a opção de adicionar imagem. Basta clicar em Escolher imagem e agora posso simplesmente arrastar e roubar essa imagem para o nosso site desta forma Em seguida, clico em Sal. Agora parece assim e agora o que temos que fazer é fazer a opção de imagem de fundo. Portanto, a resolução da imagem de fundo será total e a posição ficará no centro, então o anexo será a rolagem, que significa que quando rolamos o site, o que significa que quando rolamos o site, a imagem rola. Mas se fizermos com que seja corrigida, a imagem não será chamada quando navegarmos no site Vamos fazer com que ele role. Então, repetindo, direi isso sem repetir, então o tamanho da tela será coberto assim e ficará assim. Quando verificarmos a prévia do site, ela ficará assim, mas deverá cobrir toda a área. Corrija, clico no contêiner e vou para o layout. Então, vamos mudar essa parte para 100% assim. Agora funciona assim, então vamos para a configuração lateral, não para a configuração da página, a configuração lateral. Para ir para a configuração lateral, podemos clicar nesse ícone de conjunto, e aqui vou para layout sobre layout, nós 1.140, vou fazer com que seja 1.440 Em seguida, clique em Salvar alterações e feche aqui. Então, se verificarmos o design, ele ficará assim, e se o verificarmos na pré-visualização, também ficará assim. OK. Agora, a adição da parte de fundo está concluída. Na verdade, podemos ocultar essa grade clicando aqui e podemos ver claramente o design agora, o que precisamos fazer é adicionar esse logotipo e o menu. Há algumas maneiras de fazer isso. Então, vamos usar o método fácil e simples porque ainda estamos aprendendo sobre o elemento. Para o logotipo, vou apenas adicionar um texto como este e, em seguida, vamos mudar o texto para logotipo. Agora vamos ver a propriedade desse logotipo. Isole o logotipo, é um texto e fontes railway semi bool Vamos adicionar esses detalhes. Eu clico no título e aqui vou para o estilo e, em seguida, vou mudar a cor para branco e clicar no ícone do lápis em Tipografia, e aqui vou mudar a família da fonte para ferrovia assim e clicar no ícone do lápis em Tipografia, e aqui vou mudar a família da fonte para ferrovia Então, com este semi negrito e o tamanho é 35. Vamos ver que sim, o tamanho é 35 e a cor do campo é branca. Nós já fizemos isso. Ok, agora temos o logotipo, então temos que adicionar o menu. Então, no menu, basta clicar em Adeleans e pesquisar no E aqui temos alguns itens do menu. Então, vamos pegar essa âncora de menu simples como essa. E aqui temos que adicionar detalhes do menu. Atualmente, não temos menus, o que podemos fazer é criar um novo menu. Antes de criar um novo menu, basta clicar aqui e clicar em Salvar rascunho para salvar essas alterações. Em seguida, vamos adicionar o menu para adicionar o menu, vou para o painel do site WordPress e, no WordPress, temos a opção de adicionar o menu na aparência, mas atualmente não vemos parte do menu porque não selecionamos um tema. Então, quando criamos um site com elemento, é recomendável adicionar o tema Hello elemento. Então, vamos adicioná-lo. Agora estou no painel e na aparência do WordPress e seleciono o tema. A partir daqui, clico em Adicionar novo tema. E aqui eu procuro o elemento Hello. Na verdade, aqui está o tema. Vamos clicar nos detalhes e na visualização, e aqui temos Olá elemento por elemento, clique em Instalar e clique em Ativar. Agora temos esse tema, então não precisamos desse 20251, basta selecioná-lo e clicar em excluir Agora, aqui está o nosso tema. Agora, se eu verificar a aparência, podemos ver o link do menu. Se eu clicar em Menus, vou redirecionar para esta página de Menus Mas atualmente não temos nenhum menu. Vamos criar um novo menu. Vamos chamá-lo como menu Hero, depois clico em criar e não adiciono nenhum local de exibição ou qualquer coisa, clico em Criar homem quando criamos um site real, podemos cobrir todos eles. Ok, agora o menu está criado. Então, agora podemos adicionar itens de menu. Atualmente, não temos nenhum passe remunerado ou categoria. Somente nós podemos adicionar links personalizados. Então, vamos selecionar links personalizados e, para URL, adicionarei apenas a hashtag E para o texto do link, podemos copiar esses textos. Primeiro, copio a página inicial e colo assim e clico em adicionar ao menu, e ela acabou de ser adicionada ao menu. Em seguida, vamos criar o segundo item do menu. É sobre nós, cole assim e coloque assim. Então, vamos adicionar esse item de menu como este e nosso coach e a tag C. Agora nosso menu está completo e há muitas coisas que podemos fazer com o menu. Como exemplo, podemos adicionar itens de submenu como esse, mas, por enquanto, vamos manter um menu simples como esse e, no design real do site, usaremos o menu Agora eu clico no menu Salvar. Tudo bem. Agora vou para a seção de heróis e salvamos o rascunho, então vou reprimir esta página Quando eu o reprimo, aqui está o menu e o elemento Kamenu, então clico neste ícone de lápis e aqui vou pesquisar herói. Na verdade, não podemos usar essa Vou excluí-lo e o menu de pesquisa novamente. E vamos pegar esse elemento de menu do wordpress, e eu vou arrastá-lo e roubá-lo assim e aqui podemos selecionar o menu assim, o menu é selecionado assim Então, vamos adicionar suas gravatas a esse menu para fazer isso. Vamos aqui e conferir que tipo de texto eu uso neste item do menu Figma, ele é aberto e semibold Vamos adicionar esses detalhes. Aqui eu clico no estilo e clico na tipografia e procuro Open Sans assim, então o tamanho é 18 e com esse semivol assim , então na transformação, temos que configurá-lo para maiúsculas porque aqui está em maiúsculas e está bom por enquanto tipografia e procuro Open Sans assim, então o tamanho é 18 e com esse semivol assim , então na transformação, temos que configurá-lo para maiúsculas porque aqui está em maiúsculas e está bom por enquanto, então vamos mudar a cor branca do texto. OK. Agora, aqui temos o logotipo e o menu. Além disso, temos que corrigir esses detalhes do Hor e, para fazer isso, normalmente, a cor do texto é branca ao passar o mouse A cor do texto deve ser essa cor vermelha. Eu escrevo este texto e copio a cor de preenchimento. E eu vejo, aqui está, vou adicionar cor vermelha e não precisamos do ponteiro, então vou apenas removê-lo dessa cor e ficará assim Acabei de mudar a opacidade da cor do ponteiro. estiver ativo, vou configurá-lo para vermelho e, no ponteiro, removerei a cor do ponteiro OK. Agora temos que encontrar o espaçamento entre os itens, então é de 50 pixels e vamos adicioná-lo a partir daqui Então, o espaço entre eles será 50, assim. OK. Agora, se verificarmos o design, ele ficará assim e vamos corrigir os problemas um por um. A primeira edição é o logotipo e o menu está na mesma linha. Para corrigir isso, vou até o design e, em seguida, clico nos elementos e clico no contêiner, basta clicar no contêiner e no contêiner adicionado e eu clico aqui, então estamos na configuração do contêiner. Vou mudar o contêiner para a largura total desta forma e, com antecedência, vou torná-los zero. E aqui vou alterar a lacuna da coluna e da linha como zero, assim. Então, o que vou fazer é adicionar esses logotipos e adicionar esse menu ao contêiner desta forma. Então aqui está o contêiner e o logotipo e o item do menu está dentro do contêiner. Então, eu seleciono o contêiner a partir daqui vou mudar a dicção para horizontal Eu corrijo assim, depois adicionarei o espaço entre o logotipo que ficará no lado esquerdo e depois no lado direito. Agora, o segundo problema está no arquivo Figma: o espaço entre 140 Se formos aqui, se clicarmos no layout e verificarmos aqui, o preenchimento horizontal é 140 Vamos adicionar preenchimento horizontal ao nosso design também. Para fazer isso, selecionarei o contêiner principal. E clique em Avançar. Então aqui temos o acolchoamento. Adicionarei o preenchimento direito como 140 e, em seguida, o preenchimento esquerdo também será OK. Agora está assim. Então, o que temos que fazer é usar esse preenchimento superior. O preenchimento superior é 20. Vamos adicioná-lo ao. Acesse aqui e clique aqui. Então vamos adicionar esses revestimentos superiores, 20 como este. Ok, até agora tudo bem. Agora, se verificarmos esses dois designs, eles são bem parecidos. 83. 0111 design 01 seção hero parte 02: Ok, agora temos que criar esta seção. Então, vamos começar. Eu vou para o design, primeiro, precisamos adicionar um subtítulo, então eu vou aqui e arrasto e cordo um título como este, clico no título e vamos Então, vamos entrar nesse contêiner, mas precisamos dele fora desse contêiner, como aqui. E, na verdade, precisamos dela aqui embaixo. OK. Agora vamos até a guia de estilo e alteremos o tipo. Primeiro, vou torná-lo um centro de linha. Então vamos mudar a cor para Y. E aqui, clique duas vezes nela, e a tipografia é open sans Vamos adicionar esses detalhes. Na tipografia, a família de fontes é open sans e W é semibol e o tamanho é 20 e o que temos aqui, temos altura da linha que é 31 e a altura da linha será 30, desculpe, desculpe, Então temos que transformá-lo em gás superior, então transforme o gás superior. Agora vamos adicionar o restante do conteúdo e fixar o tecido de alinhamento. Então temos que adicionar esse título. Antes de fazer isso, preciso mudar o texto. Vou copiar esse texto daqui e vir aqui e clicar no conteúdo e alterar o conteúdo desta forma. Então, vou apenas duplicar esse título e vamos Então aqui vou copiar isso e a tipografia está negrito 60 e a altura da linha é automática. Vamos fazê-los. Clique neste ícone de lápis, vá para o quadro e a tipografia é railway 60 bold Então, a altura da linha é automática. Para torná-lo automático, clicarei aqui e clicarei neste ícone de lápis. Então eu posso adicionar o slide de texto Otto assim. OK. Mas não é gás superior, deveria ser gás, então vou para a transformação e adicionarei o padrão. Então aqui, vá até o conteúdo e cole o conteúdo. Na verdade, a transformação, vamos ver a transformação, a transformação é maiúscula e minúscula aqui, vamos alterá-la para caixa de título em tipografia e a transformação é capitalizada OK. Agora, o que temos que adicionar é este parágrafo. Então, primeiro, vou copiá-lo e vamos verificar os detalhes. É aberto sem o normal 20, e eu posso simplesmente duplicar este novamente, depois colocá-lo aqui, e vamos adicionar o conteúdo desta forma Então, na tag STML, isso é um parágrafo, então vou alterá-lo para P e agora, novamente, os valores estão abertos sem o Vamos fazer com que o estilo seja aberto sem 20 e o tamanho seja normal, regular significa normal E aqui o caso é padrão assim. Ok, agora temos o CTA única coisa que precisamos para adicionar isso ao centro Para adicioná-lo ao centro, vamos tentar clicar no contêiner e, no contêiner, vamos fazer com que seja como justificar o centro Quando eu faço isso, venho ao centro, isso não vai funcionar. Agora, o que podemos fazer é adicionar esse conteúdo dentro do contêiner. Clique no elemento do anúncio e crie um contêiner como esse. Em seguida, vamos remover todos esses detalhes e definir a margem como zero e o preenchimento como Então vou colocar todo esse conteúdo dentro desse contêiner assim. Agora eu seleciono esse contêiner. Agora vou para Advance e aqui em Margin, é Px ou fixel Eu apenas clico nele e clico no ícone do lápis. Então, o que eu faço é adicionar Margem como automática e, na parte inferior, adicionar como automática desta forma. Quando eu faço isso, ele vai para o centro. Basicamente, o que aconteceu aqui é que, quando estamos no topo de Otto, vamos remover o lema inferior Quando estávamos no topo do Otto, o espaço entre o menu e o CTA foi preenchido até a seção do CTA chegar E quando adicionamos Otto ao fundo, esse recipiente se enche do fundo Então, puxamos de cima para baixo e puxamos de baixo para cima, para que esse conteúdo se torne central. Ok, e a seguir, temos que adicionar um botão, temos que adicionar esse botão. Então, vamos adicioná-lo. Eu clico aqui para adicionar o elemento, e aqui estou o botão de pesquisa, e aqui temos muitos botões, mas atualmente, vamos pegar esse botão simples e colocá-lo aqui. Então eu clico nesse ícone de lápis, e aqui primeiro, vamos mudar o texto. Vamos copiar esse texto, e as propriedades do texto são abertas e simbolizadas. Vamos adicionar o texto aqui, e atualmente o link é hashtag porque não temos Link, então eu clico em Estyle e em Estyle na tipografia, família de fontes é Open Sans 20 e deixe-me ver o resto dos detalhes em semi negrito, e então a transformação é Afer e atualmente o link é uma hashtag porque não temos Link, então eu clico em Estyle e em Estyle na tipografia, a família de fontes é Open Sans 20 e deixe-me ver o resto dos detalhes em semi negrito, e então a transformação é Afer case. OK. Agora temos que mudar a cor do plano de fundo, então coloque o plano de fundo e copie a cor, depois venha aqui E vamos descobrir a cor de fundo. Onde está a cor de fundo? OK. Na sombra do texto, temos a cor verde, mas a tornamos vermelha, e aqui, vamos adicionar a cor branca e, em seguida, vamos adicionar a cor preta. Passe o texto e volte. E, por enquanto, vamos continuar assim. Então, o que precisamos fazer é adicionar o espaço entre o texto e a borda do botão. É 16 e aqui temos 20. É o preenchimento do 16 como superior e inferior e 20 como esquerdo e direito Então, vamos fazer isso também. Basta clicar aqui e vamos fazer Vamos desvincular o valor e vamos fazer com que o preenchimento superior não seja 60, 16, direito, 20, inferior, 16 e direito 20, assim Então vamos definir a posição como centro. Ok. Agora parece bom. Portanto, os itens estão muito apertados, então temos que adicionar o bloco antes de adicionarmos o bloco. Vamos ver se o botão tem canto arredondado. Vamos verificar o botão. Na verdade, esse botão tem zero como raio do canto, então não precisamos adicionar nenhum raio de canto, e vamos ver o item entre os tamanhos, é 15 e no botão do botão, é 20, e o resto deles Então, atualmente, este é um contêiner. Dentro desse contêiner, temos as manchetes e o botão. Então, no layout, eu apenas deixo o contêiner e o layout. Defina a linha de lacunas como 15 e adicione apenas 15 como o tamanho intermediário. E aqui, o botão é 220, então temos que adicionar mais cinco. Para adicionar mais cinco, clico no botão e vou para Avançar e clico no valor da tinta juntos, e na parte superior, adiciono cinco, e ele tem apenas 220 e o outro item tem um tamanho entre 15. Ok, até agora tudo bem. E vamos ver isso no design completo dos anúncios com esta aparência. E se virmos o design do Figma, vamos analisá-lo no modo de visualização e ficará assim Está no site real e podemos clicar nas alterações de visualização e abri-las em uma nova janela, e fica assim no site, e esse é o design do Figma única coisa no design do Figma a página inicial é vermelha, mas aqui o link do menu inicial da página inicial Para corrigir isso, eu tenho que adicionar este home men como esta página atual, porque se formos até o design e clicarmos aqui, depois clicar em estilo para verificar o estilo do menu e em ativo significa a página selecionada ou ativo significa a página atual. A cor do texto da página atual é vermelha, mas aqui apenas adicionamos Dum URL, apenas na hashtag Então, vamos adicionar o URL da página do campo. Então, vou ao painel do WordPress e, aqui, vamos à aparência e aos menus. Nos menus, temos esse menu Hero one e, na página inicial, apenas no link personalizado Mas nas páginas, eu clico em E. Então a página ainda não está aparecendo para corrigi-la, eu tenho que publicar esta seção de heróis. Vamos clicar em publicar e ao vivo aqui a página foi publicada, e vamos novamente para o painel e ir para aparência, desculpe, não aparência. ' Na aparência dos menus, aqui nas páginas, clico em VUL e aqui em nossa página Hero one Acabei de verificar e clicar em adicionar ao menu e ele acabou de ser adicionado, então vou colocá-lo como aqui, depois removo o link desta página inicial e aqui, clico aqui e renomeio este herói para Clique no menu Salvar. E vamos verificar a página agora, clicar no ícone para visualizá-la, e agora ele mostra o link ativo porque agora estamos na página Hero One, e acabamos de adicionar a página Hero one como página inicial desse menu Ok, vamos continuar com o design da próxima seção de heróis e, se você tiver alguma dúvida ou problema, entenderá claramente ao praticar nas próximas aulas. 84. 0112 0111 design 01, seção herói, parte 03: Olá pessoal, criamos com sucesso a página do herói. Agora vamos corrigir a capacidade de resposta móvel e adicionar animação Vamos começar otimizando essa seção de heróis para telefones celulares No elemento editor, temos a opção de visualizar a versão para tablet e celular do site desta forma. Se formos para o tablet, o design está bom, mas o menu não está sendo exibido. Vamos então, quando acessarmos a versão para tablet clicando aqui, nosso site ficará assim, mas podemos tornar isso muito melhor. Então, vamos começar a consertá-los. Então eu clico no contêiner principal. Então vamos para Advance. Antecipadamente, temos o preenchimento de escrita como 140. O problema é que é melhor para a versão desktop, mas no tablet não parece bom. Vamos fazer esse 60 assim. Mas quando eu adiciono 60, tudo mudou para 60, mas não precisamos que tudo seja 60. Eu clico nesse valor de link em conjunto, no ícone e vamos adicionar a passagem superior 20 e a direita como 60. Então também deixou 60 assim, está muito melhor do que antes. Então, quando verificamos o menu, ele não aparece. Então, vamos consertar isso. Basta clicar no ícone de lápis deste menu do WordPress para editá-lo. Então, se eu cair, posso ver esse celular cair. Agora estamos na versão Portrat para tablet. Aqui vou clicar na íntegra e, se eu verificar agora, ficará assim e está muito melhor do que antes. Então, o que podemos fazer é aqui que temos o ícone do hambúrguer. Então, aqui, esse ícone padrão é hambúrguer, mas sua cor é preta, então vamos mudar a cor Para mudar a cor, temos que ir para gravatas, ou seja, gravatas, aqui temos o botão togal e vamos mudar a cor do botão para Agora, se eu verificar, está na cor branca e podemos mudar o tamanho. Vamos fazer com que seja 36 ou 35, e então eu clico nela em Ha, vamos mudar a cor para essa cor vermelha. Eu clico nesse desfoque de cores e vamos pegar essa cor vermelha assim Agora, no entanto, quando fica vermelho, aqui está o que parece. Agora, aqui também podemos mudar essa cor. Vamos mudar a cor para fazer isso, eu clico no menu suspenso no menu suspenso no normal, vamos fazer com que a cor do sabor seja preta. Então a cor de fundo será branca, vamos manter essas mesmas cores. Então, para fazer isso, vou mudar a cor do texto para branco. Em seguida, removerei a cor do fundo, vamos removê-la assim. Mas quando fazemos isso, o design não parece bom, então vamos adicionar a cor de fundo como branco e vamos fazer o teste com a cor preta. Somente em movimento e ativo, vamos fazer a cor de teste como essa cor vermelha. Clique no amostrador de cores e clique assim, depois deixe essa cor vermelha Agora está assim. Não vamos adicionar a cor de fundo. Vamos manter a cor de fundo branca. Mas ter a cor de fundo parece bom. Vamos fazer com que seja uma cor de cinza claro como esta. El bom. Agora em ativo, vamos tornar cor do link ativo como essa cor vermelha para clicar aqui e vamos torná-la assim e agora boa. Também temos que selecionar a cor de fundo ativa como essa cor cinza. Vamos fazer isso também, assim. OK. Agora podemos adicionar preenchimento horizontal Se eu adicionar preenchimento horizontal, vamos fazer com que seja como dois, adicionamos preenchimento ao lado horizontal e, se eu adicionar adição vertical, podemos alterar o tamanho intermediário Vamos fazer com que seja como 15. Ok, até agora tudo bem. E aqui ao longe, vamos manter o zero. Ok, agora temos um menu funcionando perfeitamente e vamos para esta seção. Então, aqui, esse texto está bom, mas podemos minimizar o tamanho do texto desse título Então, vamos clicar neste ícone de lápis e ir para o estilo E e aqui clicar em Tipografia, e vamos alterar o tamanho do texto para Ok, perfeito. Quando fazemos alterações na versão para tablet, isso não afeta o desktop. Se eu clicar na área de trabalho, os estilos de texto serão os mesmos e, se usarmos o tablet, ele será alterado porque o alteramos para torná-lo mais claro. Se eu clicar à esquerda aqui, esse texto vai para a esquerda. Mas na versão desktop , está no centro. Na versão para tablet, está à esquerda. Além disso, ao acessar a versão para tablet, você verá que pode mudar aqui. Aqui, atualmente, está no tablet. Se eu clicar aqui, vou para o Desktop e, quando fizermos isso a partir daqui, posso mudar isso. Isso é o que chamamos de responsividade móvel. Agora estamos prontos para ir. Em seguida, clico na versão móvel do Patriot aqui, vamos alterar esses detalhes também. Clique no contêiner. Como podemos alterar a pré-visualização móvel desta forma, mas vamos continuar assim , agora eu clico no contêiner, e aqui temos os preenchimentos 60, 60 Vamos fazer com que seja como 15. Eu clico no valor do link juntos. Eu posso remover o link valorizado. Em seguida, adicionarei o top pass 20 e, em seguida, 2020 será um pouco maior. Vamos fazer com que seja 15 e seremos 15. À esquerda serão 15. OK. Então, se eu verificar o menu, está funcionando perfeitamente, então temos que alterar esse texto, então clique neste lápis para ir para estilos e na tipografia, vamos fazer com que seja 18, altere o tamanho para Então, vamos alterar o tamanho do texto do título para que seja muito pequeno. 45 será perfeito aqui. Acho que o texto do parágrafo está bom, não precisamos alterá-lo, queremos, podemos simplesmente alterá-lo para 18. Mas isso não é necessário. No entanto, vou mantê-lo como 18 por enquanto e também podemos alterar a altura da linha se quisermos, vamos alterá-la assim. OK. Na verdade, vamos defini-lo como 1,5. OK. Agora temos que alterar o tamanho da fonte desse botão, clicar no botão e ir para Iteris e aqui com tipografia, vamos fazer com que o tamanho da fonte não seja um, dois, três Vamos fazer com que seja 16, 16. OK. Agora, acabamos de corrigir a versão móvel e agora ela funciona perfeitamente na versão. Agora, o que precisamos fazer é adicionar animação. Vamos adicionar animação. Para adicionar animação, clico em avançar e, ao avançar, temos efeitos de movimento. Eu clico nele e uso efeito Icroolin e o mouse por enquanto, porque esta é Então, vamos mudar a animação da entrada. E atualmente estamos no menu. Então, o menu, vamos fazer o menu como slide Din assim. Em seguida, vamos adicionar um efeito de baixo movimento, como slide DN, à esquerda assim. Então aqui temos esse subdin de treinamento ao vivo para grandes empreendedores, clique nele e vá para Avançar, depois clique em efeito de movimento e aqui, vamos mudá-lo para Existem muitas animações, mas vamos adicionar algumas delas mas vamos adicionar Além disso, podemos adicionar duração da animação e adicionar atraso à animação, o que significa que se adicionarmos mil mil milissegundos, significa 1 segundo Vou esperar 1 segundo ou 1.000 milissegundos para ativar esse texto Então vamos até a cabeça e avançamos o efeito de movimento. Se ele estiver saltando, Bound ficará R: vamos adicioná-los ao design. O swing swing não é bom para desaparecer. Mas muitas animações não são profissionais e afetarão a velocidade de carregamento do site, mas isso é apenas para aprender e se divertir, então vamos adicionar essas animações. Parece bom. Agora clique na alteração da pré-visualização ver a animação funcionar. Sim, é trabalho. E sim, é assim que adicionamos animação. Então, agora só precisamos clicar em Publicar e ele estará disponível no site ao vivo. 85. 0113 design 02 — seção hero — parte 01: Olá, pessoal. Agora é hora de criar essa seção de heróis. Então, vamos fazer isso. Primeiro, vou para o painel do WordPress. Aqui, passo o mouse sobre essa nova página e clico na página. Este é um atalho para criar uma nova página, e aqui vou adicionar o título de herói dois Então eu clico nele com o elemento ou botão Ok. Agora, aqui temos a página Elementor e agora clique nessa configuração de espaço e aqui altere o layout da página para elemento canvas OK. Agora temos uma tela limpa e, a partir daqui, primeiro temos que criar esse plano de fundo. Para criar esse plano de fundo, temos que adicionar um contêiner, clicar aqui e clicar na caixa Plex e clicar neste contêiner. Então vamos ver se a largura é 1.440, a altura é 700 Vamos adicionar esses detalhes. Na verdade, para a largura, adicionarei a largura total e, para a altura média, adicionarei 700 assim. Agora, o que eu tenho que fazer é adicionar o plano de fundo. Para fazer isso, clico no estilo I e clico em Clássico e aqui temos que adicionar a imagem. Vamos aqui e agora isolar o BG. Depois, basta clicar em Exportar e vamos torná-lo 1.5, e vamos torná-lo GPG, depois clicar em Exportar, grande Agora vamos ao tiny png.com e clicamos aqui, depois arrastamos a imagem, ela tem 707 Agora tem apenas 120 kilobytes. Agora eu apenas pressiono JPG e ele é baixado e depois vou aqui, clico nesta imagem e solta assim. Então, podemos adicionar texto antigo. Vamos adicionar um texto antigo como 02g. Na verdade, esse texto antigo usado para fins de SEO ou se algo acontecer com essa imagem ou essa imagem não for carregada, esse texto ALT será exibido no site. Vou clicar em Concealeg e depois vamos alterar a configuração. Portanto, as resoluções da imagem estarão na posição total, no centro e, em seguida, o anexo será o padrão, repita, sem repetição, tamanho de tela, capa como esta Agora vamos ver o design. Eu vou ficar assim. Agora, o que precisamos fazer é adicionar esse menu. Antes de adicionarmos o menu, teremos que adicionar margem. Porque se clicarmos na moldura da Figma e aqui, é 140 como preenchimento horizontal Vamos somar, aqui, vá para o avanço e na margem, vamos fazer isso. Na verdade, não é margem, é preenchimento. preenchimento direito será 140 e o esquerdo será OK. Agora, vamos adicionar esse logotipo. O logotipo é minha finança. Eu apenas clico nele e aqui estão os detalhes. Vamos até o elemento e clique aqui, depois basta arrastar e soltar um título e vamos verificar a tipografia Clique no texto e a tipografia será Georgia regular 45 e a cor de preenchimento será Vamos fazer esses detalhes, clicar no título, clicar no estilo e depois ir para a tipografia A fonte é Georgia GE OR, aqui temos Georgia, o tamanho é 45 e a largura é, vamos ver a largura novamente com essa marca normal com uma normal. Agora, a cor do texto é preta. Agora vamos copiar esses tanques assim, depois vir aqui, depois ir para Conteúdo, colar esse texto assim, e ele mudará. Se não mudar, basta pressionar Enter e remover o Enter. Vai mudar assim, então o que temos que fazer é adicionar 25 no topo. Antes de adicioná-lo, vamos criar o menu e o botão de contatos, depois podemos adicionar a adição superior e outras coisas. Agora temos que criar o menu. Clique aqui e pesquise no menu e vamos pegar o menu Word Press, coloque assim. Agora, o que precisamos fazer é clicar em Editar e aqui está o menu Hero One e temos que criar um menu para esse M finer Vamos fazer isso primeiro, clico na tela do menu e ele é redirecionado para a tela do menu e aqui eu clico em. Crie um novo menu. Vamos chamar isso de menu Hero two, e então eu clico em. Crie homens, ok. Agora eu seleciono aqui o menu Hero two e clico em selecionar. Então, aqui podemos adicionar os links primeiro como página inicial, temos que usar esta página dupla do Hero Para fazer isso, eu tenho que publicar isso. Basta clicar em publicar e agora vou para o menu e teremos que reprimir isso, reprimir a página E aqui temos 02, clique nele e adicione ao Menu. Em seguida, clicarei aqui e alterarei a etiqueta de navegação para formulário. Ok, agora temos que adicionar um link personalizado, como URL, vou dizer hash tag E então vamos ver o item do menu, primeiro item do menu é serviço, cópia, prestígio, clique no menu AT Em seguida, vamos verificar o segundo , seu prestígio de localização, hashtag para menu, depois soprar a hashtag para URL e clicar em dois menus , depois em uma tarefa ou em uma hashtag, clicar em Ok, nosso menu está completo e você verá que aqui está um botão de contatos. Portanto, este é um botão separado, e nós o criaremos usando o elemento botão e ele não será incluído neste menu. Agora eu clico em Salvar e vou aqui, então eu tenho que solicitar a página Hero two. Agora clico no menu e, no conteúdo, definirei o menu como menu Hero two. Apareceu assim, então o que temos que fazer é adicionar o estilo E, primeiro, vou para Avançar e adicionar margem e preenchimento como zero Então, vamos ver os detalhes. Primeiro, temos a tipografia como Vertica 16 regular. Vamos adicionar esses detalhes. Clique em Tipografia de estilo, uma família será Vertica. Acho que é Vertica, e o tamanho é 16 Então, com essa média regular regular normal em elementar. OK. Agora, a transformação será superior novamente. Ok, bom. Então, vamos verificar o tamanho intermediário. O tamanho intermediário é 25 para verificar o tamanho intermediário. No Mac, você pode selecionar o elemento, pressionar tudo e passar o mouse sobre o próximo item dessa forma No Windows, você pode fazer o mesmo. Ao pressionar o botão, você pode ver o espaçamento ou o preenchimento que ele tem Ok, agora eu vou até aqui, então vamos fazer o espaço entre 25. Agora eu vou passar o mouse e passar o mouse deve mudar a cor. Portanto, a cor é preta e a fonte está em negrito. Vamos tentar fazer isso. Em como a cor não é branca, a cor é preta, ponteiro, não precisamos dos ponteiros Vamos balançar. A cor é preta. E também, normalmente, temos que fazer a cor preta e assim por diante. Agora temos um problema porque aqui não temos como colocar essa fonte em negrito enquanto ela está pairando, então só podemos fazer isso daqui, como adicionar aqui, mas quando fazemos isso, isso afeta o sistema. Para corrigi-la, temos que adicionar CSS personalizado, vamos fazer isso depois de concluirmos esse design porque é um pouco complicado e vamos continuar com o design, o resto do site Agora, o que precisamos fazer é adicionar isso à linha horizontal ou linha única. Para fazer isso, clicarei aqui e em um contêiner como este. Então vamos para o contêiner. Vou encher o recipiente com isso. Então, com antecedência, vamos remover a margem e o preenchimento. Então eu vou colocá-los dentro deste recipiente. Agora está dentro do contêiner e clique no contêiner, vá para o layout e clique na direção horizontal bruta como esta e fica muito bom, então temos que adicionar um botão aqui. Para adicionar o botão, clique aqui. Botão de pesquisa. Ok, aqui temos muitos botões, mas só precisamos de um botão simples como esse, coloque aqui. Não é a parte externa do contêiner interno. Sim, podemos adicioná-lo daqui desta forma. OK. Agora temos que mudar o estilo desse botão. Vamos descobrir o estilo atual, clique no botão E aqui temos um raio de canto igual a 60. Vamos fazer 60 e a cor é preta. Vamos fazê-los primeiro e aqui vou eu para o estilo e o raio da borda, faça com que seja 60 e a cor seja preta Aqui, a cor é preta e qual é o texto que esse texto pode ser copiado. E venha aqui e vá para o conteúdo. E aqui, altere clique aqui para entrar em contato conosco e ir para Estyle In Estyle, podemos mudar a Então, vamos ver a tipografia. A tipografia é Vertica regular 16. Então, vamos fazer isso. Aqui, famílias de fontes Vertica 16 Normal e está em maiúsculas. Vamos fazer com que ela se transforme em maiúsculas. Agora, o que precisamos fazer é adicionar preenchimento, clicar no texto e pressionar Alt Ao pressionar antigo, você pode ver o preenchimento superior e inferior como 16 e os painéis esquerdo e direito como 37. Vamos fazer isso. Avance para avançar a margem e termine com 16, não aqui. Desculpe, não aqui. Apenas faça com que seja como está. Eu só gosto do estilo. Na verdade, vamos transformá-lo maiúsculas e está aqui, está aqui. O padrão superior é 16 e o padrão direito é 16, padrão direito é 37 37, inferior 16, 37 como esquerdo. Agora temos o botão perfeito e vamos alterar os detalhes do foco na mudança normal ao passar o mouse, vamos mudar a cor do texto para preto e a cor para branco assim Parece bom. Agora, o que precisamos fazer é adicionar um preenchimento. Vamos verificar o preenchimento. Aqui, selecione todas essas coisas. Em seguida, vamos ver o preenchimento de 25 anos, vamos adicionar o preenchimento superior ou a margem superior como Vamos selecionar primeiro o contêiner e, em seguida na margem superior , 25. Tudo bem. Agora, o que podemos fazer é colocar e aqui podemos colocar os itens no centro e colocar toda a massa no centro OK. Agora, na próxima lição, vamos adicionar o texto ativo em negrito. Então, para fazer isso, teremos que usar CSS, e é bem fácil. Vamos fazer. 86. 0114 design 02 — seção hero — parte 02: Ok, agora vamos continuar. Se eu clicar aqui e conferir o design, ele ficará assim, mas precisamos que ele esteja perfeitamente alinhado para fazer isso, vou clicar no contêiner e no contêiner, justificando que o conteúdo ficará com espaço uniforme Então, se eu verificar novamente , ficará perfeitamente bem. OK. Agora, a seguir, temos que criar essa seção CtA e essa imagem para fazer isso, eu criarei o novo contêiner, então vamos clicar aqui e no contêiner, vamos adicioná-lo assim, e então vamos colocá-lo Vamos colocá-lo aqui embaixo, assim. Não aqui. Vamos fazer isso aqui, tudo bem. Agora está aqui, então vou para Advance e removerei o material de design. Vamos fazer a diferença chegar a zero. E primeiro, temos que criar esse subtítulo, parágrafo e o botão Para fazer isso, virei aqui e clicarei em adicionar elemento e, em seguida, adicionarei o título Vamos adicionar esses detalhes. Primeiro, somos bem-vindos às minhas finanças. Vamos copiá-lo assim. Em seguida, vá para o estilo. A cor era preta. E vamos ver a tipografia Georgia, regular 55. Vamos fazer 55 fontes, família de fontes é Deus. E qual é a forma como o peso é normal? Ok, aqui temos um problema na versão pequena do desktop. Então, vamos corrigi-lo antes de prosseguirmos para corrigi-lo, o que podemos fazer. Vamos clicar aqui e remover as lacunas como zero, e acho que está tudo bem a partir daqui. Vamos verificar seu tamanho assim e sim, está perfeitamente encaixado. OK. Agora vamos continuar o trabalho, e aqui eu adiciono o título, então temos que adicionar este parágrafo para o SubBDingt. Faça isso, vou apenas duplicar essa parte, e vamos adicionar os tanques, e um estilo, temos Vatica regular, 25 Aqui, Vatica 25 regular. OK. Agora, temos que adicionar esses dois botões. Então, antes de adicionarmos o botão, vamos verificar o tamanho interno. São 20. Vamos fazer isso entre os tamanhos. Clique no contêiner e aqui o tamanho da linha será dois 21º. Eu clico no valor do link juntos desta forma, então vamos torná-lo 20. Agora, vamos adicionar o botão. Na verdade, podemos pegar esse botão, mas vamos criá-lo do zero. Eu procuro o botão, depois colo assim. Então, vamos descobrir os detalhes. Aqui, o texto é hel VaticarGular, 20, e entre os tamanhos 18, 18, 35, 35 Vamos fazer isso. Primeiro, vamos copiar depois ir para estilo em estilo, tipografia, é 20, Vertica São 20? Sim, são 20 e é normal. Em seguida, transforme o gás Ava se eu for para o design Figma e pressionar Alt, obteremos 18 como margem superior e inferior ou preenchimento inferior, depois 35 como preenchimento esquerdo e direito Vamos adicionar esses detalhes. Aqui não. Claro, no estilo E, o preenchimento será abrir Moten como 18, direito como 35, 18, 35 Agora, os cantos arredondados serão 60. O raio da água será 60 e a cor será preta. Essa cor será preta e, no nosso caso, vamos mudar a cor do texto para preto e a cor de fundo para branco desta forma. Ok, bom. Agora, o que eu tenho que fazer é criar esse botão para saber mais. Vamos fazer isso. Primeiro eu copio este texto para aprender mais. Então, podemos simplesmente duplicar esse botão dessa forma corretamente, clicar em Condomínio bligate e aqui vou mudar o texto para saber mais e ir para o estilo no estilo E, vou mudar essa cor para 0% de visibilidade e mudar a cor do Em seguida, terei que adicionar a borda para adicionar a borda, clicarei no tipo de borda sólida. E vamos ver o tamanho da borda aqui, então o tamanho da borda é um. Vamos fazer com que a fronteira seja uma. OK. Agora, se verificarmos o design, ele ficará assim, e agora temos que fazer a linha horizontal. Para fazer isso, temos que criar um novo contêiner e colocá-lo assim. Em seguida, vamos adicionar os dois botões a esse contêiner dessa forma e ele está dentro do contêiner, clicar no contêiner e mudar a direção para horizontal. Na verdade, temos que mudar a posição do botão assim. OK. E vamos ver o tamanho intermediário, clique no botão, pressione tudo. São 20. Acho que já são 20. Vamos ver. Sim, são 20. Vamos adicionar a lacuna da coluna mais duas. OK. OK. Até agora tudo bem. Agora, o que temos que fazer é ir ao design. Teremos que adicionar algum espaço aqui. O espaço que deveria ser 30, atualmente é 220, então eu clico aqui e vou para Não estilizar com antecedência. Vou adicionar uma margem tão alta quanto dez. Sim. Quando somarmos os dez, obteremos espaçamento. Agora eu tenho que, na verdade, colocar esse contêiner dentro do contêiner principal assim. Agora, o que temos que fazer é clicar aqui e agora vamos avançar e, na margem, clicarei neste lápis. Eu posso, a parte superior será automática e a parte inferior será automática, assim. Acabou de se tornar um centro e ficará assim. Aqui está o problema. Quando tentamos aumentar o design, esse, venha aqui. Este não veio aqui, então esse é o problema. Vamos ver o que aconteceu aqui neste contêiner. O que fizemos foi adicionar o espaço, até mesmo vamos removê-lo. Quando o removemos, ele simplesmente muda. Na verdade, temos que adicionar espaço mordido. Vamos tentar. Sim, temos que adicionar espaço, mas não espaço uniformemente, mas então ficará bem e funcionará bem OK. Então, aqui está nosso contêiner principal, e temos que adicionar uma imagem aqui, e sua direção é vertical assim, mas precisamos de um contêiner que tenha direção horizontal. Para criar esse, basta clicar em Novo contêiner e adicionar o contêiner. Então vamos nadar todas essas coisas aqui, enchê-las com Ok. Agora vou definir a direção como horizontal. Então o que eu posso fazer é não, não está dentro disso, vou colocar aqui, depois não aqui. Aqui, então vou adicionar esse contêiner dentro desse contêiner. Basta colocar assim. OK. OK. Agora, novamente, temos que adicionar o recurso de layout automático. Temos que adicionar automático à margem assim, parte superior será automática, parte inferior será automática. Ok, agora podemos adicionar imagem. Então, isso é horizontal, e vamos adicionar imagem para adicionar imagem, clique aqui e pesquise Imagem e vamos adicionar uma imagem assim. OK. Primeiro repita a imagem para reprimi-la, vou clicar nessa imagem vou clicar nessa Esta é a imagem, clique nela, selecione a imagem clique em Exportar e precisamos dela na versão PNG porque essa imagem não tem fundo. Em seguida, clico no botão Exportar e ele acabou de baixar. Em seguida, vá para Tiny PNG. E adicione-o aqui, otimize-o, clique em PNG para baixá-lo, depois venha aqui, clique aqui, depois clique na imagem e adicione a imagem assim. Em seguida, clico em Selecionar. Ok, a imagem se adapta e eu mudarei a resolução da imagem para total. Agora temos que configurá-lo assim. Atualmente, a imagem está assim, mas não está funcionando agora Se você ver um design de site como esse, basta diminuir essa seção de estrutura e melhorá-la. Agora temos que configurar essa imagem assim. Para isso, clicarei na imagem e depois avançarei com antecedência no tamanho, configurarei como crescer. Agora ele fica maior, então o que eu tenho que fazer é colocá-lo no canto do design Figma. Vamos fazer isso. Para fazer isso, vou diferir do valor da margem e vou adicionar a margem deixada desta forma Sem margem restante, temos que adicionar a margem direita e ela deve ser negativa, que significa que essa parte será enviada ignorando o preenchimento do contêiner principal Vamos ficar bem. Quando eu faço mais do que precisamos, vemos esse tipo de barra de ICO para removê-la, podemos simplesmente colocá-la assim. É menos 140 e agora, se verificarmos o design , ficará assim Minha tela é de 24 polegadas. É por isso que esse design se parece com isso. Mas se verificarmos isso em um dispositivo pequeno, como laptop , desktop ou outro dispositivo, ficará assim. Agora, o que vou fazer é adicionar a próxima parte. Então o robô está completo, e agora temos que criar essa peça. Eu o seleciono e sua altura é 270. Então, vamos fazer isso. Clique aqui. Em seguida, clico nisso mais um segundo para criar um novo contêiner, e o contêiner será uma coluna direta, e aqui vou configurá-lo para a largura total, depois removerei todas as coisas desnecessárias como essa, então a altura do Mint será 270. Ok, agora temos outro problema. Vamos pensar em adicionar o título a esse contêiner. Eu configurei no canto superior esquerdo, mas temos uma margem de 140 ou 140 blocos aqui. Para adicioná-lo, preciso clicar aqui e ir para Avançar e, em seguida, terei que adicionar o padin direito como 140 e o padin esquerdo como Agora está pronto, então o que eu tenho que fazer é centralizar esse conteúdo. Clique no contêiner e vá para layout em layout, vou fazer com que justifique o centro de conteúdo, assim Então, vamos tornar a direção tão horizontal quanto essa. Novamente, vamos transformá-lo em um centro de itens de linha e, aqui, colocá-lo com estrela, justifique a estrela do conteúdo OK. Agora, aqui, vamos verificar esse texto. Este texto é Georgia normal 45. Na verdade, podemos obter o estilo desta seção de heróis. Para fazer isso, botão direito do mouse aqui, copie, depois venha aqui, clique com o botão direito do mouse em colar esse estilo. Agora vou ter que mudar o tamanho da fonte para 45 assim. Agora, o que posso fazer é adicionar esse conteúdo, basta copiá-lo, ir até o conteúdo e colar assim. Então aqui temos que adicioná-lo em duas linhas para fazer isso, adicionarei a quebra média R do colchete, depois fecho o Bagot e agora o obtemos em duas linhas, o mesmo que isso Então vamos para o Estyle. Vamos adicionar a tipografia. Vamos adicionar uma altura de linha que eu goste. Isso é melhor. Agora temos que adicionar essas três seções. Então, vamos criar este e então podemos duplicá-lo. Antes de fazer isso, temos que tornar essa cor preta. Vamos ver se a cor é preta, mas não preta escura. Então eu copio o código de cores, venho aqui, vou para Eastile, clico no plano de fundo clássico em cores, passo o código de cores Em seguida, clique aqui e altere essa cor para branco. OK. Agora vamos começar a projetar essas duas seções. Então, aqui, eu clico aqui na manchete como esta, depois vamos copiar o conteúdo Agora, vamos verificar se a tipografia é VaticArgular, 65. Vamos fazer isso. Vamos clicar aqui. Normalmente, temos que adicionar o título aqui. Se o adicionarmos diretamente aqui, obteremos coisas desnecessárias. Então, agora eu clico aqui Tipografia de estilo, família de fontes, Heaica 65, 65 W é regular, média normal. OK. Agora, a cor é o motivo e agora temos que adicionar essa experiência. Então, ajude o Vaticano Regular 25. Podemos simplesmente duplicar essa parte desta forma, clicar aqui e adicionar o texto aqui Então, vamos mudar esse tamanho para 25. OK. Agora, o que temos que fazer é adicionar essa seção horizontalmente desta forma Para fazer isso primeiro, vamos ver o tamanho convidativo do item, é 15. Então, vamos fazer isso. Para fazer isso, clique aqui, clique no contêiner e coloque um contêiner como esse. Então vamos colocar essas coisas dentro desse contêiner assim. Sim, está dentro do contêiner, e aqui, vou remover essa lacuna e a lacuna da linha será 15 ou 20. Vamos ver isso de novo. São 15. A lacuna é 15 e deve ser um centro de itens de linha. A direção é vertical da coluna. OK. Agora vou duplicar isso por duas vezes, duplicar e duplicar novamente Agora vamos adicionar outros detalhes como esse. Tudo bem. Agora temos outro problema. Vamos consertar isso. Para corrigir isso, vamos aumentar esse tamanho de tomada dessa forma. Então, podemos diminuir esse tamanho para caber assim. Podemos fazer isso com este, dois, e este, assim. Agora, o que podemos fazer é verificar o tamanho intermediário. O tamanho intermediário é 57, é 57. Vamos adicionar 57 como o tamanho intermediário. Para adicioná-lo, temos que adicionar essa seção dentro de outro contêiner. Clique aqui e vamos adicionar o contêiner. Vamos isso. Em seguida, vamos adicionar essas três seções dentro desse contêiner. Primeiro, vou adicionar este, depois este, depois este, mas não adicionou o interior, então vamos adicioná-lo dentro deste , assim, assim. Ok, vamos fazer a direção como horizontal. E aqui, vamos adicionar tamanhos de coluna, 57. OK. Agora, novamente, vamos aumentar os tamanhos desses elementos dessa forma. E aqui, vamos fazer a mesma nota aqui, selecionar esta e colocá-la assim, ko e ok. Agora vamos selecionar o contêiner principal e clicar no espaço ao redor ou podemos simplesmente adicionar o tamanho da coluna como 57, assim, 57. Agora, o que precisamos fazer é verificar o tamanho intermediário aqui, temos 116, mas aqui o que podemos fazer é clicar nesse contêiner principal e ir para layout no layout, podemos clicar em Ipace between Se verificarmos isso no design, ficará assim. Quando o comparamos com o design original, parece muito bom. O problema aqui é que temos uma pequena fila. Então, vamos tentar consertá-lo para consertá-lo, vou até a seção de heróis e clico aqui. Em seguida, na parte inferior, a margem inferior da imagem será descartada assim. Agora, isso deve ser corrigido. Vamos ver, vamos ver. Sim, está consertado, e vamos lá. Aqui está o design final do site. Na verdade, aqui temos que definir um espaço entre eles, então aparecerá. 87. 0114 design hero 2 parte 2 — menu destaque: Olá, pessoal. Agora precisamos deixar esses itens do menu em negrito no estágio dela e no estágio ativo. Atualmente, esta página inicial está ativa, o que significa que essa página inicial é a página em que estamos atualmente Então, quando estamos aqui, temos que deixar esse item do menu em negrito. Porque em nosso design Figma, é ousado aqui. Vamos adicionar essa funcionalidade. Para fazer isso, clicarei aqui para editar o menu. Então eu vou para Advance. No Advance, temos um local para adicionar CSS personalizado. Não vamos falar muito mais sobre CSS, mas você pode aprender mais sobre CSS assistindo Tutoris em wscos.com, e aqui vamos Se eu for até o design e clicar com o botão direito do mouse no item de menu e clicar em Inspec você verá esse tipo de tag STM e já conhece o elemento ou usa CSS para estilizar o site e CSS como um recurso ou item chamado classe se o URL da página atual for igual ao item do menu no elemento, é um item Atualmente, estamos na ATAC A mean Ankatag. Quando eu destaco isso, você pode ver a página inicial destacada Se eu clicar aqui e verificar este item do menu de serviço ou serviço Ankatag, você verá a classe, mas nessa classe, você não verá o item elemento classe ativa Agora eu apenas copio e depois vou aqui, pressiono ponto e colo o item do elemento classe CSS ativa. E aqui vou adicionar fonte com. Esse é um estilo CSS para criar uma fonte e, nesse caso, deve estar em negrito assim. Então, vamos atacar como se fosse importante e depois publicá-lo. Agora funciona. O que essa importante etiqueta fez? Na maioria das vezes, substitui o código CSS atual. Agora que uma parte está pronta, então temos que tornar esse item ativo quando o colocamos. Para fazer isso, clicarei nesse pequeno ícone e clicarei em um desses elementos, e agora tenho que encontrar a lista não ordenada média ULL, e esse menu é uma lista, e aqui temos esse ID, mas podemos adicionar o ID a partir daqui Vamos adicionar um ID claro. Para fazer isso no menu de edição avançada do wordpress, vou para lay. No layout, podemos adicionar o ID CSS ou as classes CSS e vamos apenas adicionar o ID CSS como o menu Hero, depois vou copiá-lo e ir para Advance e ir para CSS personalizado e adicionar a tag âncora, como Herou e AA, e aqui adicionamos a média H, no entanto, e como a fonte do tweet ficará Eu apenas copio e colo assim. Agora, se eu verificar o design, ele deve funcionar aqui, devemos adicionar hash tag, não ponto ponto, para classe CSS e hashtag para o ID CSS Você pode verificar esses Eta no site da W three School. Eu o publico e vamos ao design e ele ficará assim. Ok, agora criamos essa parte com sucesso e nos vemos na próxima lição. 88. Desafio de design 0115 hero 3: Convertemos com sucesso esses dois designs de heróis pigma em elemento, e aqui está seu desafio Agora é hora de converter esse design do Figma hero three em elemento Então, apenas brinque e tente fazer isso. E na próxima lição, eu também farei isso. 89. 0116 design hero 3 parte 01: Olá, pessoal. Agora temos que criar esse herói três. Então, vamos começar. Aqui estou no site, e aqui, vou para a página e clicarei em Adicionar novo. Então aqui vou adicionar o título como 03. Em seguida, clique em Editar com elemento de um segundo. Ele redirecionará para o elemento ou editor e o editor foi carregado, então eu clico na configuração da página e na configuração da página, vou apenas mudar o layout da página para elemento ou agora vamos começar a desenhar primeiro, preciso encontrar a altura desta seção A altura é 223, vamos criar uma caixa plex e direção será uma coluna de direção como esta Então aqui, clique aqui, vá para a seção de layout do contêiner. E aqui o tamanho será menta dois, dois, três. OK. Agora vou colocá-la na direção horizontal. Então, com antecedência, tenho que adicionar esse preenchimento. O paddin é 140, como eu disse antes, quando você clica em uma seção no Figma e pressiona Alt, você pode ver o espaço entre Aqui temos 140. Vamos adicioná-lo aqui. A direita será 140 e a esquerda será 140. OK. Agora, como primeira etapa, temos que adicionar esse logotipo. Selecione a imagem do logotipo no Figma e clique em Exportar imagem Vamos fazer isso às 1,5 da manhã. Agora vou aqui. E clique aqui no ícone do elemento, e aqui, vamos adicionar a imagem assim. Em seguida, clique aqui e arraste e roube o logotipo desta forma, selecione e defina o tamanho como cheio Ok, o logotipo está desfocado para corrigi-lo, vamos aqui e vamos fazer com que ele tenha o tamanho de dois X, e vamos tentar K. Então vamos substituir esse e vamos tentar K. Então vamos substituir Clique aqui, clique aqui, upload deste logotipo como este e clique em Ocultar, na verdade, esse logotipo se torna maior do que a seção Portanto, a altura mínima desta seção é 223, mas agora sua altura é maior do que isso Vamos clicar no logotipo e ir para o estilo. Então vamos chegar ao auge de 2023, então vamos fazer mais de 100 assim. Agora temos que adicionar esse menu para adicionar esse menu, primeiro precisamos criar um menu, clicar aqui e pesquisar o menu na barra de pesquisa e obter o menu Word Press. Coloque aqui. Agora, aqui temos que adicionar o menu para fazer isso, vou clicar na tela do Menu aqui, vamos criar um novo menu, clicar em criar um menu, criar um novo menu Então, vamos adicionar esses detalhes. Primeiro, temos que publicar esta página porque, como página inicial, temos que definir três páginas para esse herói. Ok, agora está publicado e aqui eu tenho que reprimir esta página novamente. Em seguida, vamos adicionar o texto como o menu Hero three. Em seguida, clique em Criar menu OK. E aqui temos a página três do Hero, clique nela e clique em No menu dois e clique aqui para expandi-la, depois altere esse rótulo de navegação para e depois não temos o resto do link, então vamos criar um link personalizado como URL na hashtag e no texto do link, vamos adicionar essas tomadas primeiro, cerca de turnos segundo serviço elétrico em URL como hashtag, terceiro, contato, casting e hashtag, clique em adicionar ao menu Ok, agora eu clico em Salvar, clique em Salvar. E agora, se eu for até o Hero Three e atualmente não vejo o menu. Então, se eu reprimir esta página e agora clicar no menu e aqui agora temos o terceiro menu, o menu 03 Então eu vou para E tyle e temos que mudar o estilo. Então, primeiro, vamos ver o texto. Aqui a tipografia é cabine, regular 18. Primeiro, vamos adicionar esses detalhes tipografia: o tamanho da cabine é normal, normal, é 18, e está na melhor das hipóteses A transformação será uma boa suposição. Então vamos ver a cor, a cor é preta. Aqui está a cor preta. A cor é preta. Em seguida, vamos verificar o espaço entre selecionar um dos menus e pressionar verificar seu tamanho , são 50 pixels, colar entre serão 50. Ok, e agora temos que mudar a configuração Ha. Ao passar o mouse, ele mudará a cor para essa cor verde escura e teremos um sublinhado Clique aqui e cole a cor assim, e aqui temos o sublinhado, clique em colar a cor, OK, e em ativo, automaticamente colocaremos cor do mouse em ativa então não precisamos fazer nada. Ok, então o que temos que fazer é colocar esse centro Ok, para centralizá-lo, vou clicar nele e ir para Conteúdo e não para Conteúdo. Vamos avançar no Advance. Vamos clicar em alinhar a si mesmo e ele apenas se alinha Acabou de ir para o centro. E agora o que precisamos fazer é adicionar esse ícone de chamada. Primeiro, vamos criar um contêiner e, dentro desse contêiner, podemos criar esta seção. Ok, clique aqui e adicione um contêiner maior, então vamos diminuir seu tamanho um pouco assim. Agora, vamos fazer assim por enquanto e podemos alterá-lo mais tarde e clicar aqui. Em seguida, vou pesquisar a caixa de ícones. Na verdade, não precisamos de um contêiner. Vou simplesmente excluí-lo. Podemos apenas usar a caixa de ícones de pesquisa de ícones. E aqui temos a caixa de ícones, coloque assim. Certamente, deveria ser depois de um menu de três como este, então o que eu posso fazer é primeiro clicar aqui Esse ícone é um ícone de telefone. Vamos pesquisar o telefone e selecionar o telefone, posso clicar em Inserir, e aqui temos que alterar o conteúdo. Vamos copiar o conteúdo daqui e agora vamos colá-lo na camada, depois copiar esse número e colá-lo na descrição. Até agora tudo bem. E então o que eu posso fazer é aqui na vista, eu vou para o estilo E no estilo E. Vamos fazer com que a posição seja a mais correta, assim, e alinhamento vertical será no meio, assim , e então vá para o ícone no ícone Vamos transformar a cor primária em branco e adicionar o plano de fundo. Então, vamos usar a cor primária como branco, depois vou para a outra e, na exibição, adicionarei uma moldura. Na verdade, não é uma moldura que deve ser traçada e ir para estilo e estilo no ícone. Vamos adicionar essa cor de traço, pois essa cor azul copie a cor azul daqui e a cor secundária será Localmente, a cor primária será azul e a cor secundária o ícone, será branco. Vamos melhorá-lo depois de criarmos o resto. Em seguida, alteramos esse texto para cabine média, 16,5 e a cor é azul, vamos fazer isso, vou para conteúdo sobre conteúdo A cor do título será essa cor. Então a tipografia será cabine, desculpe, 16,5 e o tamanho é médio médio médio médio 500 OK. Então temos que mudar a descrição. Vamos verificar os detalhes da descrição. A cor de fundo é preta e a cabine é 25. Esse fundo está em branco, tipografia, cabine 25 seria OK, até agora O que temos que fazer é verificar o preenchimento. Aqui, o preenchimento será de 19 por 19. Vamos adicionar o preenchimento do ícone aqui, o padrão será 19 e o tamanho do ícone será 25 25 Vamos fazer isso depois de fixarmos os tecidos de alinhamento. Como temos que centralizar esse centro, clique nele e faça com que ele se alinhe. Agora eu clico aqui e vou para layout em layout, vou alterar esse conteúdo com largura total e, em seguida, vamos deixar um espaço entre nós apenas codificamos no tamanho do site. Não é bom nesta versão pequena, vamos remover essa seção de estrutura dessa forma e agora aqui está a visualização. Acabei de publicar 90. 0117 corrigir problema de responsividade do desktop: Você verá esse tipo de problema de alinhamento. Então, vamos consertar isso. Na maioria das vezes, isso acontece porque esse contêiner já tem lacunas. Se eu clicar aqui, ele aparecerá como zero, e se eu for para a configuração lateral e nos layouts, também teremos lacunas aqui Vamos remover essas duas lacunas para zero. Não precisamos disso e clique em salvar alterações, depois feche e clique em salvar aqui. Parece que não salvou, e vamos salvá-lo. Agora eu clico em voltar para editar Ok. Agora, o que precisamos fazer é definir outro espaço desnecessário. Aqui, eu clico neste menu e neste menu, vou definir esse ponteiro com zero e quando eu faço isso, o ponteiro não aparece, então vamos torná-lo como dois Na verdade, vamos ver isso no design do Figma e aqui, vamos verificar o ponteiro. Na verdade, são dois. Vamos fazer dois, já é dois e seguida, vamos fazer do padin horizontal como zero E quando fazemos isso instantaneamente, o espaçamento fica menor e vamos fazer o preenchimento vertical como zero, dois Vamos fazer isso de verdade. Vamos fazer o preenchimento horizontal como dois. Então, aqui vou remover fixação de dois pontos do espaço entre eles. Agora temos um design claro. Agora vou clicar em publicar e aqui vou para responsive test tool.com e, a partir daqui, podemos verificar a Eu clico em visualizar as alterações e copio o URL, apenas a parte do URL, coloco aqui e clico em verificar em uma tela pequena, ficará assim. Então vamos para a versão maior para desktop. Então, em um tablet pequeno, ficará assim. Então vamos para a próxima versão e, nesta versão, ela ficará assim. Vamos ver isso a partir de centímetros. Tem 15,6 polegadas, então ficará assim. Pelo que me lembro das seções anteriores de heróis que criamos, tivemos o mesmo problema. Vamos até essas seções de heróis e editá-las. Então, para as páginas DELA. Nas páginas, eu abro o Hero two, vamos clicar em editar com Elementor e abri-lo em uma nova janela aqui, vamos abrir esta também. Em Hero one, temos isso assim. Isso acontece principalmente por causa desse menu. Eu clico aqui e vou para TyleoTyle. Vou adicionar o ponteiro com zero e o teclado horizontal como zero Então, o preenchimento vertical também será zero. Vamos fazer com que os paddinas verticais sejam padronizados assim, então ficarão assim, mas agora temos um problema Isso não está no centro. Para centralizá-lo, acho que neste design, sim, o design não está no centro, então ficará assim, e nós apenas corrigimos esse problema e depois o publicamos. Então vamos ao Herói dois no Herói dois, teremos o mesmo problema. Então, vamos corrigir isso para clicar aqui e ir para É em E vezes, ponteiro será zero, preenchimento horizontal será Preenchimento vertical, vamos mantê-lo como padrão e agora ele está mais próximo e agora é bem parecido com esse design Esse foi o problema que atrapalhou nosso site. Agora vou publicá-lo também. 91. 0118 design hero 03 parte 2: Vamos continuar o trabalho e eu apenas clico nessa caixa de ícones. E no design do Figma, temos essa borda azul clara, mas, em essência, não temos como adicioná-la Portanto, temos apenas a cor primária, que significa a cor de fundo e a cor secundária como a cor do texto Mas não temos a opção de adicionar cor de borda. Então, para corrigir isso, podemos usar a caixa de imagem. Baixe este ícone como uma imagem. Então, podemos adicioná-lo diretamente como imagem. Então, para fazer isso, eu vou para a página do elemento, depois clico neste elemento de adição, e aqui vou pesquisar a caixa de imagens. Aqui temos a caixa de imagens. Vou apenas arrastá-lo e amarrá-lo assim. Então, o que eu faço é tentar clicar e clicar em copiar porque já temos o estilo E, então podemos colar esse estilo diretamente clicando com o botão direito do mouse aqui e clicando em Estilo de fase Ok, agora vamos adicionar essas informações. Para adicionar essas informações, isole a caixa de ícones, vá até o contato, e aqui vou copiar o título e vir aqui, depois é só passar o título Então venha aqui e copie a descrição, e aqui basta seguir a descrição. Assim. OK. Agora teremos que ir para o estilo E e ele já está no meio, agora vamos remover essa parte, não precisamos mais dessa parte, então eu simplesmente a excluo. OK. Então, o que eu posso fazer é clicar aqui e primeiro adicionar esse ícone. Selecione o ícone. Aqui temos essa camada de panicon e clique aqui, clique em Exportar e aqui, defina PNG e clique no ícone Exportar peão P. Acabou de ser exportado. Vamos aqui. Clique aqui e eu vou arrastar e roubar o ícone assim Agora eu clico neste ícone de seleção, ele é adicionado assim e, a partir daqui, vou definir os tamanhos completos e agora vamos para os estilos em Estils Vou clicar na imagem. Imagem, vou definir a largura como 100%, tipo de borda nenhum. Na verdade, vamos fazer a largura assim até que não aumente esse tamanho Agora eu vou avançar. Agora temos que alinhar isso para alinhar isso, vá para estilo, em estilo, clique na caixa, e aqui temos o espaçamento da imagem Vamos fazer com que seja zero. E agora está assim e teremos que aumentá-lo um pouco assim. Então, vamos corrigir isso corretamente. Então, na caixa de entrada, adicionarei o alinhamento vertical como parte superior e, em seguida, o alinhamento será à esquerda. E então o espaçamento da imagem, vamos fazer com que seja como vamos ver o espaçamento da imagem aqui. Também é. Vamos fazer isso. Não, é uma ferramenta. Então, o espaçamento do conteúdo é dez. Vamos fazer dez. OK. Então vamos para imagem na imagem, vou definir a largura em 100%. Sim, então tudo bem aqui e vamos avançar com antecedência. Vou mudar esse costume com o padrão. Então aqui o tamanho será string. OK. Agora vou clicar em publicar e vamos atualizar esta página para ver o w atual. Por algum motivo, ele não aparece corretamente, então vamos ajustar essas coisas, e aqui a largura deve ser de 100 fixos , assim, e vamos fazer isso Temos um problema com esse casamento, vamos fazer com que 100 seja 100%, e então o conteúdo está bom aqui. Estou bem e o tamanho da imagem deve estar cheio. Em seguida, avance com antecedência, o alinhamento em si será o centro, o que deve ser o padrão, ou os cem por cento realmente farão com que ele volte ao tamanho É bom, mas por algum motivo não está sendo exibido corretamente. E se mudarmos a largura disso? Vamos alterar a largura dessa imagem para 50 assim. Agora está muito melhor. Em seguida, vou avançar e definir a margem e o preenchimento como zero Em um dispositivo menor, ele não funciona corretamente. Vamos diminuir esse tamanho assim aqui, vamos remover a largura. Quando removemos a largura, ela está aparecendo corretamente e aqui com antecedência, boa na imagem. Vamos adicionar algo personalizado com isso. 45 45 será bom. Agora vamos publicar esse design e vê-lo no site responsivo para desktop Vamos até a ferramenta responsiva e copiamos aqui, colamos assim, clicamos em verificar e vamos criar o tamanho da área de trabalho Isso é maior. E esse tamanho? Ok, funciona semanalmente, e mais ou menos desse tamanho, ainda funciona semanalmente. E aqui? OK. Quando chegamos a esse 280 por 800, fica uma bagunça para consertá-lo, vamos ver o tamanho da intenção 50, 64, vamos vir aqui e clicar Então, em cada arquivo, vamos ver o espaço entre eles, é 44 Vamos torná-lo um pouco menor. Vamos fazer com que seja como 34. E agora publique-o, então aqui, podemos clicar em Verificar novamente, e agora ele está sendo exibido corretamente. OK. Agora vamos para a próxima parte do site, que está adicionando essa borda. Para adicionar essa borda, podemos ir aqui e clicar nesse contêiner principal e avançar em Avançar, devemos ver a borda. De antemão, não temos fronteira, não é? Sim, não com antecedência. Vamos para Estyle InStyle, temos fronteira. Então, a borda ficará sólida e clique aqui. Então vamos ver a fronteira daqui. Ok, aqui, a borda com é dois e a cor é essa cor. Então copie a cor, venha aqui. A borda com será duas, e aqui só precisamos torná-la inferior e a cor da borda será essa cor. OK. Agora vai ficar assim. Então, o que precisamos fazer é criar essa seção. Para criar esta seção, clico aqui e clico na caixa Cplex, crio um novo contêiner como esse e clico em Advance on Advance O padrão direito será 140 e o preenchimento esquerdo também será 140, assim Então temos que adicionar esse texto, então eu vou clicar aqui e escrever um título como este e Então a tipografia é cabine média 24. Vamos para Estyle e a tipografia é cabine 24 média. Médio significa 500, basta copiar o texto e clicar em Conteúdo e colar o texto desta forma. Então aqui, temos que mudar a cor. Então copie essa cor de preenchimento e coloque assim. Então, no item em dez é dois, e aqui temos que adicionar pop-ins medianos 50 Acabei de duplicar este e vamos fazer com que o estilo tipográfico apareça Médio, 50 assim, então vamos copiar o texto e colar aqui assim. OK. Agora vou clicar novamente neste contêiner e ir para o layout aqui, a lacuna deve ser a linha C e vamos descobrir a altura média. A altura média é 577. Vamos assim. Então aqui o item será o centro da justificação. E vamos fazer isso assim. Então eu vou clicar aqui e ir para EtyleOeStyle, clicar em Tipo de plano de fundo e clicar Então vamos baixar essa imagem de fundo, clicar nela e clicar em Exportar. Vamos configurá-lo como JPG e clicar em Exportar, assim. Então vamos para Tiny PNG, clique aqui. Basta arrastá-lo assim. Em seguida, clique aqui para baixar a imagem otimizada e vamos colocá-la aqui. Clique em Selecionar e ele acabou de ser adicionado assim, e agora podemos ajustar isso assim E aqui, temos que mudar a cor. A cor é preta e o item entre os lados também deve ser alterado, que significa que a linha não o item entre os lados. Vamos fazer com que a altura da linha seja 55 e torná-la maior, como se essa cor fosse preta. Agora vamos ver o item entre o tamanho e a ferramenta, então vamos clicar no contêiner e ir para layout no layout, lacuna do corvo deve ser duas como esta Então, o que temos que adicionar é o botão. Então, vamos adicionar o botão, clicar aqui, botão de pesquisa e adicionar um botão como este. Então vamos ver se o botão pega, copie o texto do botão. Portanto, a lacuna de digitação do texto do botão é cabine média 24 e, em cada caso, coloque assim: estilo, tipografia, cabine, média, 24 e a transformação deve ser superior Então vamos ver o tamanho intermediário. O topo é 25, o esquerdo e o direito são 30, 30. Vamos fazer com que seja 25 por 25. Clique aqui, acesse não com antecedência neste preenchimento. Vamos fazer 25, assim. Então a cor deve ser branca e essa cor azul escura e os cantos são zero. A cor é essa e branca e essa cor, o raio da borda será zero Agora temos um problema porque o texto deve ficar assim, para corrigi-lo, vou avançar e avançar, vamos personalizar esse texto com 253 e ainda assim ele fica maior, isso é um problema e também o plano de fundo não está funcionando como deveria Primeiro, vamos corrigir esse problema para corrigi-lo, adicionarei isso com o máximo de preenchimento e, em seguida, o que posso fazer é ir para Conteúdo e aqui adicionar BR. Em seguida, adicione aqui o suporte BR sla BR e feche o suporte Então, isso não mudará quando alterarmos o tamanho deste site. Agora temos um problema com a imagem de fundo. Vamos consertar isso. É fácil. Clique no contêiner porque adicionamos essa imagem ao contêiner. E clique na resolução completa da imagem e a posição ficará no centro direito. E quando a virmos, ficará assim. Então aqui, o que temos que fazer é repetir e não repetir essa capa de pausa Então, se verificarmos, ficará assim. Se o verificarmos em um dispositivo pequeno como esse, ele ficará assim. OK. Aqui temos outro problema. Acho que, como esse espaço é demais, não, é o mesmo do design original. Então, sim, aqui acabamos de criar a seção três do herói. 92. 0119 atualização do elementor: Olá, pessoal. Se acessarmos o site, teremos uma atualização. Então, basta clicar nele e aqui temos a atualização da versão do elemento. Então, vamos até os plug-ins e clique em Instalar plug-ins Aqui temos a versão 3.25 0.4 como a versão atual e a nova versão 3.26 Aqui temos uma mensagem chamada por favor, faça backup antes da atualização, que significa que, se vamos atualizar este plug-in, precisamos fazer um backup deste site porque as atualizações do plug-in podem danificar o site. Quando isso aconteceu, se tivermos um backup, podemos restaurá-lo. Antes de atualizarmos esse plug-in, vamos fazer o backup. Estou no painel C no painel C do Namecheap, eu instalo este Wordpress como uso do Wordpress no Softacula Se você usa uma hospedagem na web diferente, basta pesquisar no Google sobre o sistema de backup e obter o backup. Nesse caso, clico no WordPress gerenciado pela Softaculs e aqui temos nosso Acabei de clicar nesse ícone estreito e aqui estão os detalhes do nosso site. E aqui temos um botão verde chamado backup. Basta clicar nele e aqui diz que esse backup é de apenas 28 dias, mas está tudo bem. E a partir daqui, podemos adicionar um nó. Então, vou adicionar um elemento semelhante a um nó ou uma atualização do plugin pro. E vou definir local de backup como padrão e aqui clico no botão de instalação de backup e agora estamos fazendo backup do nosso site WordPress OK. Agora temos o backup e eu clico em retornar ao Gerenciamento do WordPress. E aqui, se algo acontecer, quando atualizarmos o elemento ou plugin, podemos simplesmente clicar neste botão de backup ou restauração do fstore Então, aqui temos os backups e se eu clicar nesse nó ou passar o mouse sobre esse nó, podemos verificar o nó de backup que adicionamos Então, aqui está o backup que acabamos de criar. E se clicarmos nesse botão Restaurar, esse backup iniciará a restauração ou poderemos fazer o download desse backup em nosso computador local. Ok, agora é hora de atualizar o plug-in. Então, basta acessar a página de plug-in, e aqui eu clico em Atualizar agora, e ela é atualizada com sucesso. Então, vou reprimir a página, e agora nossa versão é 3.26 0.2 E se formos ao site, o site está funcionando bem. Então, atualizamos o plugin com sucesso. 93. 0120 backend claro do site: Olá, pessoal. Agora é hora de converter a interface do usuário do nosso site FIGMA site WordPress totalmente funcional usando o Elementor Vamos começar a fazer isso passo a passo. Primeiro, vou ao painel do WordPress e usamos esse site do WordPress para criar nossas páginas de teste. Agora é hora de remover todos eles. Então, vamos fazer isso. Primeiro, vou para o painel, o painel está limpo, depois vamos para o Fst AposFstPage está limpo e vamos para a E aqui temos algumas imagens. Vamos clicar em seleção em massa e selecionar todas essas imagens dessa forma, depois clicar em excluir permanentemente. Ou se você tiver muitas imagens, clique neste ícone e clique aqui, clique nesta caixa de seleção e, em seguida, exclua todas as imagens OK. Agora vamos às páginas do Lpage Temos essas páginas. Vou clicar aqui e, em ação em massa, clicarei em Moto trash e clicarei em Aplicar OK. Agora eu clico na caixa de lixo e clico aqui. Em seguida, clique em Excluir permanentemente e clique em Aplicar. OK. Agora a seção de comando está limpa e o elemento está limpo, e vamos verificar o modelo de salvamento. E aqui temos o próximo modelo de zona, mas ainda precisamos dele porque, se verificarmos a visualização da página, ela ficará assim. Na verdade, aqui temos um problema. Então, vamos corrigir isso na próxima lição. Para este novo site, precisamos de uma página de som. Volte e aqui, vamos ver a aparência e os temas sobre temas, temos esse tema do elemento Halo e vamos usar esse tema do Halo elementor, então vou mantê-lo Se você tiver um tema diferente, basta clicar nele no botão de novo tema e pesquisar Olá, elemento como este. Então, ao fazer isso, você obterá esse tipo de tema, clique nele e aqui você verá Instalar tema, basta clicar e ativar o tema. Eu já fiz isso, então agora eu o fecho e, nos plug-ins, clico em Instalar plug-in. Temos o plugin elemento e elemento, que vamos usar para criar o site do zero e, se um usuário, acesse El user. Aqui temos apenas um usuário administrador e, até agora, tudo bem, vou para o painel. E agora é hora de ir para a próxima etapa, que é configurar o lado definido, e vamos fazer isso na próxima lição. 94. 0121 fontes e cores globais do Elementor: OK. Agora é hora de definir a configuração do site. Então, quando verificamos nosso design Figma, já temos o tamanho da versão para desktop e o preenchimento do site Então é 140. Então, podemos definir essas coisas no site da elemento. Então, vamos fazer isso. Aqui estou no painel do Wordpress e, como primeira etapa, irei até a página inicial do Elementor e removerei essa parte Aqui, podemos clicar no lado definido. Então, basta clicar em Personalizar. Quando clico em Personalizar, preciso criar nossa primeira página porque atualmente não temos nenhuma página. Então, vamos começar a partir daí. Aqui temos um elemento de mensagem ou dados de dados, basta clicar em, clicar aqui para executá-lo agora e vamos remover essa mensagem assim. Em seguida, clico em Nova página e vamos adicionar o título. Esta página será nossa página inicial e, se formos ao site, o nossa página inicial deve ser o nome desse site Aqui temos os requisitos de web design aqui, o nome da empresa ou nome do site é JB Family Clinic, então eu apenas copio e colo aqui, depois clico nesta edição com o botão Elementor Agora estou no editor de elementos. Vamos sentar a partir daqui. Para fazer isso, clico no ícone de configuração do site e aqui temos os detalhes. Vamos um por um. Primeiro, temos que definir o sistema de design. Clique aqui. O sistema de design é uma coleção de componentes reutilizáveis com padrão de uso claramente definido Em um elemento, podemos usar cores globais e fontes globais como sistema de design. Podemos criar cores e fontes reutilizáveis. Primeiro, clique nas cores globais e aqui podemos definir as cores. Se formos ao design da Figma e à nossa folha Ithica, podemos ver as cores do site Vamos definir essas cores. Primeiro, temos essa cor azul basta selecionar o retângulo e, no preenchimento, podemos ver o código da cor, selecioná-lo e copiá-lo Então venha aqui. Vamos defini-lo como primário. Então, aqui, clique na cor e cole a cor assim. OK. Então vamos aqui. Aqui temos a cor secundária. Na verdade, é branco, então vamos adicioná-lo assim. Em seguida, temos que adicionar nossa terceira cor ou cor de texto. Então, basta copiá-lo e aqui, vamos adicionar a cor do texto. E só temos três cores principais. Mas se verificarmos o design, podemos ver esse tipo de cor azul claro, então vou copiá-lo e podemos adicioná-lo como uma cor de destaque como esta Mas no seu caso, se você tiver apenas três cores, pode simplesmente ignorar a cor de destaque Se você tiver mais de três cores, você pode clicar no botão Cor, e aqui você pode adicionar um nome para a cor. Então, vou adicionar Tn ou cor do botão e aqui posso selecionar a cor como eu quiser Você pode criar quantas cores quiser, mas, nesse caso, não precisamos de cores personalizadas. Então eu acabei com isso e aqui temos o botão de excluir, então eu clico em excluir e clico aqui. Faça isso. OK. Agora, o que vou fazer é clicar em Salvar alterações. E aqui também temos a seção global de fontes. Ou, se voltarmos, clico em Sair e vou sentar novamente. E se verificarmos aqui, podemos clicar nessa fonte global. Quando clicamos nele, ele é redirecionado para a mesma página É como uma aba. Agora, na fonte, se formos ao nosso arquivo Figma e na tipografia, podemos ver os detalhes da fonte que usamos neste site Ok, vamos adicionar os detalhes da fonte. Aqui temos o cabeçalho como lato 60 regular. Então, vamos ao site do WordPress, e aqui temos o principal, clique nele e aqui vou definir a família de fontes como LTO Então o tamanho é 60 e a altura é normal. Significa normal em elemento. Agora, aqui temos a fonte e vamos adicionar a altura da linha, pois 36, 36 ficará bem. E a vantagem de definir esses parâmetros ou essas fontes e cores é que podemos reutilizar esses itens no design Vamos ver um exemplo. Para fazer isso, basta clicar em conceber alterações e voltar e clicar em Plus e Flexbox , criar uma coluna direta contendo o tempo e, aqui, clicar em adicionar elemento e adicionar um título Em seguida, vou duplicar esse título por três vezes e aqui clico no título para editá-lo e clico em Aqui, configuramos a tipografia. Vamos selecionar o primário como tiografia. Agora temos um problema. A altura da linha está muito próxima, então vamos tentar corrigi-la a partir daqui. Vamos fazer com que a linha atinja 55, 55 valerá a pena. E agora o que eu tenho que fazer é sentar configurando e depois fontes globais e aqui o tamanho principal será a altura da linha de texto principal será 55. OK. Agora vamos salvar as alterações e voltar ao design. Agora vamos fazer essa cor como cor de texto, e aqui vamos fazer essa cor como cor de destaque OK. Agora, o que eu faço é duplicar esse texto com cores de destaque duas vezes, e isso ajudará você a entender o poder das cores e da tipografia predefinidas Então, agora eu clico em Fablish, está tudo bem. Publique esta página. Agora pense nesse tipo de cenário. Portanto, o cliente deste site deseja alterar essa cor azul claro para vermelho e acha que temos esse tipo de texto, e acha que temos esse tipo de como 60 textos preenchidos nessa cor, campo de texto ou botões nessa cor. E se quisermos mudar essa cor azul clara para, temos que alterar esses 60 textos manualmente, inserindo estilo e alterando-o a partir daqui desta forma. Mas se dissermos variáveis globais ou cores globais, podemos simplesmente alterar essa cor na configuração lateral e isso afetará o site de outono. Vamos para a configuração da sessão e aqui vou para a cor global e precisamos alterá-la para a cor vermelha assim, alterá-la para o vermelho assim, depois clico em conceber alterações e elas se aplicam a todo o site Eu clico em voltar ao editor e agora você vê esses dois textos ficarem vermelhos porque definimos a propriedade de cor global para esse texto. Esse é o benefício. E se você precisar alterar esse tamanho de texto para um tamanho diferente, se usar tipografia global ou fonte global, basta alterar essa configuração na configuração de tamanho e isso afetará todo o Espero que você entenda por que vamos definir esse tipo de fontes e cores globais. Ok, agora vamos ao texto secundário. Portanto, o texto secundário é figueira 25 regular. Vamos fazer com que a fonte seja fk tree, 25, e a largura seja regular mean nom Defina a altura dessa linha como automática como a tipografia na tipografia Figma, então será fácil, defina-a como Otto desta forma e vamos fazer o mesmo A altura da linha é automática e, se houver algum problema, podemos simplesmente alterá-la a partir daqui e, em seguida, temos que alterar o tipo de texto. O texto é a fonte deste parágrafo. A figueira 20 é normal? Vamos alterá-la para a árvore falsa 20 é normal e aqui a noite da linha é automática, clique aqui, clique no lápis e defina-a como Hto, agora temos aqui o axônio Na verdade, vou mudar esse axônio para botão porque aqui o temos como botões Se quisermos, podemos alterar outros textos e o texto do botão é vitória 20 normal. Na verdade, aqui é médio , deve ser alterado como meio. De qualquer forma, é médio de fábrica 20 e está em maiúsculas. Vamos fazer isso. Devemos ser maiúsculos aqui na fábrica 20, não 25 20, com essa mediana semivol significa semiv Ok, e a altura da linha será novamente automática Sim, sim, sim, sim. OK. Agora podemos realmente renomear esses nomes. Vamos mudar primário para cabeçalho e o subdin é texto secundário, e esse texto do botão já o alteramos, e aqui colocamos o texto do parágrafo para que possamos entendê-lo facilmente E, na verdade, temos que mudar essa cor de destaque para azul claro porque já fazemos alterações Vamos copiar o código de cores e colocá-lo assim. Clique em salvar alterações e agora clico nessa cruz porque precisamos configurar outras coisas. Novamente, eu tenho que ir para a configuração do site, clicar na configuração do site. Ok, agora definimos as cores globais e a fonte global. 95. 0122: configure o site: Olá, pessoal. Agora, aqui podemos ignorar o estilo do tema porque esses conjuntos herdados pelo tema, e vamos criar nosso site do zero. As cores e fontes globais do sistema de design são suficientes para criar o site, e então temos que ir às configurações. No seTNS, primeiro temos a identidade do site. Então, basta clicar nele e aqui temos que adicionar o nome ao site. Então, vamos ao nosso design Figma. E aqui, requisito de design do site, copiarei o nome da empresa ou o nome do site. Ou podemos ir aqui e conferir os líderes daqui e eu colar assim. Em seguida, temos que adicionar a descrição do site. Esta é a descrição do site ou o slogan. Vou copiar esse título como descrição ou título do site e ficará assim, então teremos que adicionar o logotipo do site, o logotipo do site já foi criado Aqui está o logotipo do nosso site, e eu apenas clico nesse logotipo BG e vou para Exportar ao Exportar, coloquei o formato como PNG, depois clico em Exportar logotipo GB, em Depois vou ao site, clico aqui e vamos fazer o upload do site assim. Em seguida, adicionarei o texto antigo como logotipo da JB Family Clinic e clicarei em selecionar, ele acabou de ser adicionado e, em seguida, temos que adicionar o FVcon Atualmente, não temos o ícone Fv, eu acho, ou temos? Não, não criaremos um rapidamente para fazer isso. Eu apenas pressiono esta moldura, e aqui eu clico assim e F Vicon deve ter cinco poços por cinco. Bem, vamos definir o teste de largura e altura f muito bem, cinco muito bem, assim Em seguida, vou mudar esse quadro para o ícone FV. Agora vou para ASEDs em AsSEDs clique em criado neste arquivo, e aqui temos o logotipo da JV, e eu apenas clico em ISAT Instance, e aqui vou clicar no logotipo, e vou clicar neste ícone de desanexar instância, e então vou mover esta parte da clínica familiar e aqui vou Na verdade, temos que aumentar o tamanho da fonte. Vamos fazer isso. Vou até arquivos e em arquivos, seleciono o texto e vamos aumentá-lo. Aqui, vou adicionar 500, 500 é muito grande, 200. Aqui eu tenho que mudar esse tamanho, assim. Vamos fazer com que seja como 300. Podemos aumentar isso ainda mais assim. Agora vou aumentar o e ficará bem. Em seguida, vejo esse ícone de FV e clico em Exportar e clico no ícone Exportar FV e, depois de abrir o PNG Ti fas, Ok. Agora eu vou aqui, clico aqui, Perigos, arrasto e solto o ícone Fav e adiciono texto, na verdade, o ícone Fav está vazio, então eu não vou editar Vou clicar em excluir permanentemente, algo aconteceu enquanto o baixávamos. Eu vou. Aqui está nossa moldura de ícones FV, mas está neste logotipo do JB. Eu apenas seleciono o texto do JB clico no ícone FV e colo Agora está dentro da moldura do ícone FV. Então eu vou Ok, agora tudo bem, selecione o ícone Fav e clique na porta FV Então vamos colocar assim e recortar isso, copiar aqui e colar assim. Em seguida, clique em CLX e agora clique em Salvar alterações para salvar esses itens e vamos voltar Agora, vamos revisar esta página para ver o novo visual quando adicionamos esses itens é difícil Atualmente, aqui temos o título e, se visualizarmos este site, a parte JB ou o ícone FAV aparecem na guia Agora, o que precisamos fazer é configurar o layout, clicar no layout e, no layout, primeiro, temos a largura do conteúdo. Se formos ao arquivo FIGMA e verificarmos na página inicial, selecione a moldura da página inicial e aqui a largura Então, vamos adicionar 1.440. Em seguida, temos que adicionar o preenchimento. Vamos ver o preenchimento atual. Aqui temos o preenchimento como média de preenchimento de 140, o espaço entre a esquerda e a direita Por exemplo, se eu mudar para zero, o design muda assim, mas se somarmos 140, obtemos esse tipo de preenchimento ou espaço entre a esquerda É 140, aqui o lado direito é 140 e o lado esquerdo é 140. Já está lá. Então temos lacunas. Nas lacunas, temos coluna e linha. Se o tornarmos zero, o espaço entre esses itens será zero. Mas se somarmos 50 , será 50. Vamos ver o item entre os tamanhos. Aqui temos 220 e aqui quando eu seleciono itens ou elementos e clico em Y sobre o próximo item, podemos ver o tamanho intermediário, então é 220. Vamos adicionar Raw Gap ps 220. Eu clico nesse botão de valor de link para desmarcá-lo e, em seguida, o valor bruto será 220 Então, e quanto às lacunas? Aqui, a diferença é de dois. Na verdade, não vamos adicionar uma lacuna de coluna como uma lacuna entre dois itens dessa forma, vamos fazer isso manualmente. Então, vou adicionar a lacuna da coluna Co. Em seguida, clico em Conceber alterações e o layout padrão da página será um elemento de largura total, como este Se selecionarmos o tema, o material do tema será herdado, mas vamos selecionar o elemento de largura total e agora clicar em salvar alterações Então, vamos manter os pontos de interrupção como padrão e voltar e definir com sucesso a configuração lateral. Agora vou fechar esta guia, e aqui estamos no design, e aqui vejo um problema. Então, vamos clicar assim. Então, o espaço entre esse texto é muito alto. Na verdade, isso é corrigido quando recarregamos a página e, até agora , temos que adicionar o cabeçalho e o rodapé e vamos fazer isso na próxima lição Por enquanto, vou remover essa parte e vamos clicar em Publicar para salvar 96. 0123 Cabeçalho do design 01: Ok, agora temos que começar o design. Então, no elemento, temos modelos. Nos modelos, vou para o Team Builder. Portanto, no Team Builder, temos seções de sites. Então, essas seções são repetidas e, quando criamos um design para a seção, ele se aplica a todo o site. Por exemplo, o cabeçalho do site é bastante semelhante no site, o que significa que se formos para a página inicial, a seção de menus será a mesma, e se formos para a página ou contato ou qualquer outra página, a seção de menus será a mesma seção de menus ou o cabeçalho será o mesmo Assim, podemos criar modelos para seção de cabeçalho, rodapé e outras páginas repetidas do site, o que significa que só precisamos criá-los uma vez e podemos aplicá-los Nesse caso, podemos criar a parte do cabeçalho usando a seção A do menu, podemos criar a parte do taco Vamos começar com o design do cabeçalho. Para fazer isso no construtor de elementos ou temas, clicarei nesse ícone de adição no cabeçalho. Então, aqui teremos modelos pré-construídos como este, mas eu não seleciono nenhum deles, então eu apenas clico aqui para fechar Vou aumentar esse design assim. Então, aqui, como primeira etapa, criarei um contêiner. Basta clicar aqui, clicar na caixa Plex, clicar neste contêiner de coluna e ver o tamanho dessa seção. Então, seu tamanho é 120, então vamos definir o Mint como 120 fixel assim, então eu vou fazer esse conteúdo com largura total e aqui vou adicionar a cor de fundo Vamos adicionar uma pequena cor verde como essa porque agora podemos ver claramente onde estamos trabalhando? Agora, primeiro vamos adicionar esse logotipo para adicionar, clicar neste ícone de adição e aqui obteremos o logotipo lateral, basta arrastar e alinhar um pouco assim. Em seguida, no contêiner, definirei o centro de justificação do conteúdo e a direção como direção da linha como linha e justificarei o conteúdo como estrela, assim, um item de linha estará Agora vamos criar essa seção de menu para criar o menu. Aqui vou clicar no menu de pesquisa de adicionar elemento e aqui vou pegar o menu wordpress e vamos colocar assim e ir para Estyle in Estyle, a tipografia será o Sim. É o tamanho do botão. Em seguida, no conteúdo, definirei o alinhamento do texto como centro e, por enquanto, vamos definir o alinhamento como Então, em Estyle, vamos mudar, geralmente a cor do teste deve ser a cor e está tudo bem por enquanto, vamos clicar na imagem e na configuração da imagem, alinhamento deve ser voltado e alinhamento automático deve estar no centro Então vamos criar esse ícone de chamada para fazer isso, vou clicar em um elemento e aqui, vamos criar um bob de imagem como este, adicioná-lo aqui. A partir daqui, vá para Estilo e, na posição da imagem, defina-a como ef e o alinhamento será Então vamos ver a imagem distribuindo seis, vamos configurá-la em C. Agora temos que baixar esse ícone Clique no ícone aqui e em Exportar e PNG, clique em Exportar, ícone de chamada. Então vamos vir aqui e clicar na caixa de imagem do conteúdo, podemos simplesmente clicar no Conteúdo. Mais uma vez, amarre isso. Eu posso gostar disso. Em seguida, clique em C SLAC. Agora vamos adicionar esses detalhes do texto, copiar o texto e adicionar o título do teste e, em seguida, copiar o número e o disco como uma descrição. Agora vamos ver título por título, clicar na imagem e a imagem deve ser 100% real. Não vamos adicionar nenhum tamanho à imagem Então, por enquanto, vamos manter a largura da imagem ou coisas assim e vamos ver o conteúdo do conteúdo aqui, o tipo de lacuna é victory medium 16 e, para adicioná-la, adicionarei o texto do parágrafo, na verdade, e vamos ver se o tamanho é dois, vou apenas alterá-la para 16 e se estiver em negrito Sim. E se for um gás superior, deve ser o olhar superior e, em caso de transformação, direi que é superior assim E com esse meio? Não é normal, deve ser médio. Tudo bem Então a cor é preta, essa cor. Tudo bem Agora, aqui, o que temos é a figura em negrito 20. Vamos adicionar esses detalhes também. Na descrição, vou colocar o texto do parágrafo e agora tenho que editar o texto, seu tamanho é 20 e com esse negrito até agora tudo bem. Agora, aqui vou avançar com antecedência, que deve estar cheio, talvez com a configuração automática embutida e será corrigida assim e teremos que alterar o tamanho intermediário Vamos ver o tamanho intermediário, é Z. Vamos para o Etylectaspac em, vamos fazer com que seja como seis. Perfeito. Agora fica assim, então o que temos que fazer é ir ao conteúdo, não ao conteúdo, clicar no contêiner e no contêiner clicar no Ispace uniformemente, então ele será definido assim e agora temos que adicionar o menu porque atualmente esse menu não é o menu que queremos, aqui temos o menu sobre bloquear nosso provedor e contato e a página inicial Vamos clicar neste item do menu e aqui no conteúdo, clicarei em G para a tela do menu e aqui temos os menus que já criamos. Na verdade, vou excluí-los porque não precisamos mais desses itens de menu como este. Vamos deletar Ok. Agora, aqui vou adicionar o nome do menu como menu principal e clicar em Criar menu e aqui nas páginas, clique em e aqui vou selecionar a página elementor como a página principal, e aqui vou mudar o nome para home e agora temos que adicionar outras páginas primeiro sobre a página Na verdade, por enquanto, acabamos de adicionar Dammnus assim para cerca do blog, depois para nossos fornecedores e podemos copiar, colar aqui no Tumenu e clicar em sameno. Ok, agora temos o menu, então vá para o elemento da página e aqui eu clico em publicar e , na verdade Há um rascunho, clique aqui e clique em Salvar rascunho até concluirmos o menu, então eu clico aqui. Na verdade, eu tenho que reprimir a página assim. Em seguida, clique no menu e selecione aqui o menu principal. Ok, agora vá para Estil no eTyleF, vamos mudar as cores e como vou mudar a cor do texto para a cor primária Na verdade, não precisamos de um ponteiro. Vamos aqui e não aqui, vá estilo sobre estilo, divida ou quatro pontos será zero porque não precisamos de um ponteiro Na verdade, deveria haver uma opção para remover o ponteiro aqui, temos isso no conteúdo Temos esse indicador como nenhum. Vamos defini-lo como nenhum e, em seguida, vá para Etie em Estes, padrão horizontal deve ser zero, padrão vertical deve ser zero, espaço entre eles deve ser 04 E agora vamos verificar esses espaçamentos. Primeiro, o espaçamento deve ser 30 e o espaço entre eles deve ser 30 30 está muito perto. Eu sei o motivo desse problema de espaçamento. Se verificarmos o design do Figma, ele tem esse tipo de recipiente branco Vamos criar esse contêiner e começar a editar. Em adicionar elemento, e aqui está um contêiner. Eu apenas arrasto e cordo assim. Ok. Então, primeiro, vamos mudar direção do contêiner principal para coluna, e agora podemos ver claramente os itens, e aqui está o contêiner que eu adicionei. Então eu clico nesse pequeno ícone e o abro, depois coloco no menu do logotipo uma caixa de imagem dentro desse contêiner como este. Ok. Agora, clique no contêiner e clique na direção como linha horizontal. E aqui temos problemas com o espaçamento I. O motivo é que ele adicionou o preenchimento como 142 à esquerda e à direita. Então, vamos clicar no contêiner e avançar na margem, remover a margem no preenchimento, remover o preenchimento Agora, clique no contêiner principal, depois clique no subcontêiner e vá para layout no layout, defina-o como espaço entre eles Agora vamos ajustar essas informações. Quando seleciono esse contêiner, posso ver a borda desse contêiner. Então, aqui temos um espaçamento. Na caixa de imagem, removerei esse ritmo alterando seu tamanho dessa forma e aqui podemos reduzir o tamanho da caixa de imagem ou do logotipo Vamos fazer com que seja assim. Agora está sendo exibido corretamente e agora temos um tecido de alinhamento, clique no segundo recipiente e clique em alinhar itens no Em seguida, clique nesta imagem em Avançar. Aqui, vamos alterá-lo como em linha automática para que pareça que há uma margem superior e inferior, então vamos adicionar Dance e remover a margem. Remova a margem, clique no valor do link juntos e vamos adicionar uma margem negativa ao topo desta forma Então, na parte inferior, temos a margem. Vamos remover essa margem também. Agora está perfeitamente alinhado e, se o verificarmos na janela maior, ficará assim, e então vamos diminuir tamanho dessa estrutura para que possamos obter um design claro Agora, o que precisamos fazer é adicionar cor branca a esse contêiner. Para adicionar a cor branca, vou para It's in background classy e, aqui, vamos adicionar a cor branca A cor secundária é a cor branca. Então agora o que eu tenho que fazer é descobrir o espaço I ao redor do Menu, na verdade, temos que selecionar o item maior neste caso, é o ícone do telefone. Então, quando verificamos, é 29 e 15 à esquerda e à direita. Então, vamos adicionar essas informações. antemão, a parte superior acolchoada não é, na verdade, clique no contêiner e, na parte superior, é 29 Em seguida, à direita, 15 na parte inferior 15 à esquerda 29. Talvez façamos com que não seja à esquerda, a esquerda deva ser 15 e a parte inferior seja 30, não 29. Vamos fazer com que seja 30. Ok. E então temos que descobrir o espaço entre o canto superior e o menu. Então, são 20. Só precisamos selecionar o item e sobrepor o item ao lado do item que selecionamos pressionar tudo e podemos ver que o espaçamento é 20, então vamos selecionar o contêiner principal e adicionar a margem superior como 20 Ok. Agora temos que adicionar cantos arredondados, vamos ver os cantos arredondados. Os cantos arredondados são 20 ou o raio do canto é 20 Para fazer o raio do canto, vá para Itis e tis a bordo, adicione o raio Ok, desse jeito, podemos ver o design. Agora, o que posso fazer é clicar no contêiner de fundo e remover o plano de fundo desta forma. Em seguida, clique em Publicar. Antes de clicarmos em Publicar, clique na configuração do cabeçalho e, na configuração do cabeçalho, vamos alterar esse título para o cabeçalho principal e depois clicar em publicar. E quando eu clico em publicar, há uma pergunta chamada, onde você deseja exibir seu modelo, e aqui temos o botão para adicionar condição. Então, basta clicar em adicionar condição e aqui podemos incluir ou excluir o item. Por isso, seleciono incluir o site inteiro porque quero ver esse menu em todo o site. E podemos adicionar mais condições como exemplo. Quero excluir ou não mostrar isso na página inicial, podemos clicar no singular e aqui podemos selecionar a página inicial e depois clicar em San Clause Nesse caso, precisamos incluir esse menu em todo o site, então eu o removo e clico em Salvar e Cláusula, depois ele acabou de ser publicado Agora vamos para as páginas e páginas ER e aqui temos a página inicial, então eu apenas clico em Editar com elemento e aqui nosso menu é exibido 97. 0124 design header 02: Olá, pessoal. Agora temos um problema. Então, clico nesse ícone de adição e vamos criar um contêiner simples. E como o design do nosso site, essa imagem deve ser a imagem da capa da página inicial Então, vamos tentar adicionar essa imagem. Clique na imagem e clique em para selecionar o PNG e clicar em exportar e o tamanho da imagem será maior, então eu vou para tiny png.com coloco a imagem no site tiny png.com, depois os rádios da imagem clicam no botão JPG para baixá-la e agora eu tenho que ir para a página inicial e aqui vamos fazer isso. Alturas mínimas aqui vamos Vamos ver a altura mínima desta seção. É 800, a altura é 800, então vamos fazer isso como 800, não 700, 800. OK. Agora vá para Estils in Estyle, clique em Plano de fundo e clássico e aqui vou adicionar esta imagem E essa tag ALT de imagem não será vinculada. Imagem do herói e clique em C. Ok. Quando eu o adiciono, ele é adicionado fora desse menu. Então, precisamos dele dentro do menu. Então, para fazer isso, podemos adicionar margem negativa. Então eu clico neste contêiner e vou para avançar em Avançar, clique em Margem. E ainda por cima, adicionarei menos cem. Quando eu adiciono menos cem, fica acima e se adicionarmos menos 200? Está acima, mas podemos obter o tamanho exato que queremos adicionar, porque quando clicamos no menu e verificamos que a altura é 120, e aqui temos outros 20, o que significa 140. Vamos adicionar a margem negativa como 140 e temos que adicionar 60, 60 funcionará talvez 50. Sim, o 150 funcionará perfeitamente. Então, agora ainda temos um problema porque não conseguimos ver o plano de fundo. Por enquanto, clicarei em publicar e, em seguida, irei para o cabeçalho para ir para o cabeçalho, irei para o painel, elementor, não elemento no modelo, Team Builder Construtor de equipe, podemos ver o cabeçalho principal, clicar nele e aqui clicar em Editar Podemos corrigir adicionando um índice de TI a esse contêiner, selecionando o contêiner e avançando. E se você quer saber o que é um índice de TI, o índice é uma propriedade CSS que controla a ordem Iacin do elemento HTML em uma página da Por exemplo, se adicionarmos um como índice de TI desse contêiner, ele aparecerá na frente de um elemento. Portanto, o valor mais alto do índice It aparecerá na frente de um elemento e o menor valor do índice It será exibido na parte de trás. Agora eu clico em Publicar e vou aqui, então vamos refazer isso. Veja, quando eu retomo, nosso menu apareceu como 98. 0125 remover rodapé padrão: Olá, pessoal. Antes de continuarmos com o resto do design, vamos remover essa parte e vamos passo a passo ou seção por seção. Para remover essa parte, vou para o painel do Tress. Então, aqui, irei para Templates and Them Builder. No Them Builder, aqui, clico no rodapé e fecho, depois aqui, clico no ícone Mais e na caixa CilletPlex, crio um contêiner como este, clico no rodapé definido e aqui altero o título do rodapé principal desta forma, depois clico em Publicar e clico na condição e ele será exibido em Clique em Salvar e fechar. Agora, se eu for para a página inicial e aqui, clicar em Editar com elemento na verdade, ainda não configuramos a página inicial, então temos que ir ao painel nas páginas do painel, clicar nas páginas e, aqui, clicar em Editar com E agora não vemos mais a parte do rodapé ou esse conteúdo, então vamos criar seção por seção Dessa forma, podemos entender facilmente o que estamos fazendo. 99. 0126 — design da seção herói: Olá, pessoal. Quando visito a página inicial do nosso site, é esse tipo de espaço porque ainda não configuramos a página inicial Vamos configurar a página inicial. Para fazer isso, vou ao painel do site. Em seguida, vou entrar no set e clicar em ler. Na leitura, aqui temos uma frase para definir sua página inicial. Vou defini-la como uma página estática e aqui vou definir a página inicial como JB Family Ginic que é o nome da página inicial, e clico em Salvar alterações agora, se eu visitar o site, podemos ver Agora vou novamente para o painel e vamos continuar o design. Nas páginas, podemos descobrir nossa página inicial e aqui eu clico em Editar este elemento e temos que criar esta seção. Eu já criei essa peça, mas vamos começar do zero. Vou remover isso e aqui está a aparência da página. Quando você cria uma nova página, ela deve ficar assim porque já configuramos a parte do cabeçalho. Aqui, clico neste ícone de classe, escolho Flexbox e seleciono o contêiner do tipo coluna de direção E neste contêiner, vou configurá-lo como peso total. Em seguida, na margem avançada e nos acolchoamentos e, em seguida, no layout, podemos adicionar a altura mínima Vamos descobrir a altura mínima. A altura mínima é 800 ou a altura é 800, então vamos adicioná-la assim 800. OK. Agora, vamos adicionar uma imagem antes de fazer qualquer coisa. Para adicionar imagem, precisamos fazer o download, selecionar a imagem assim clicar em Exportar. Vou exportá-lo como JPG, depois temos que acessar tinpng.com, e aqui vou arrastá-lo e soltá-lo assim Em seguida, ele envia por rádio o tamanho do arquivo. Clique em JPG, JPEG para baixá-lo. Agora vou para Estilo deste contêiner, e aqui vou selecionar o tipo clássico de plano de fundo. Então aqui eu clico em escolher imagem e aqui eu já fiz o upload da imagem e você pode fazer o upload da imagem de download selecionando envelhecimento assim. Eu já configurei o texto antigo e agora clico em selecionar aqui, temos que adicionar algumas configurações. A resolução da imagem será posicionada no centro e o anexo será rolado e repetido, sem repetir, tamanho da capa. Ok, agora vai ficar assim, mas o problema é que deve começar daqui. Na verdade, já fizemos essa parte, então a altura dessa peça é 120, e adicionamos 20 a ela, então será 140, e vamos clicar no contêiner, e com antecedência, temos que adicionar margem negativa de 140 talvez 50. Ok, 150 funcionam bem. Agora nós apenas configuramos isso assim. Agora, o que temos que fazer é nesta seção. É bem simples. Vou copiar o texto daqui e ir até o elementor e clicar neste ícone de adição e no título de tag and roper como este, depois colocar este depois colocar Nosso título está aqui, então vamos corrigi-lo para corrigi-lo, vou clicar no contêiner e na seção de layout do contêiner, podemos definir onde nosso conteúdo deve estar Se eu clicar em justificar conteúdo, ele virá aqui e aqui, esse é o ritmo em que queremos adicioná-lo. Por algum motivo, os preenchimentos esquerdo e direito não foram configurados, então vamos adicioná-los manualmente para adicioná-los, clico no contêiner e vou para No Advance, adicionarei os predins direito 140 e o esquerdo 140 desta forma. OK. Agora, vamos continuar aqui, podemos definir a tipografia aqui, a tipografia será cabeçalho e a cor deverá ser secundária. É de cor branca. Ok, agora devemos ter um espaço daqui para fazer isso. Vou para o conteúdo e aqui estou eu no BR assim. Em seguida, vamos adicionar o parágrafo, copiá-lo e clicar aqui, depois adicionar um título como este e vamos alterar a tag TML do título para P, e aqui, vamos adicionar o conteúdo do texto e ir para Estyle Defina esse texto como parágrafo, veja se é 225 normal e quais serão os detalhes do texto do parágrafo. Para verificar o texto do parágrafo, basta clicar nessa edição com um botão. Quando eu verifico, é 220, então esse é o problema. E se adicionarmos um subtítulo? Sim, é o subtítulo. Vou mantê-lo assim por enquanto, depois vamos mudar a cor do texto para branco. Então o que temos que fazer é adicionar esse botão, adicionar esse botão. Então, para adicionar esse botão, eu clico nesse elemento de adição e aqui no botão de pesquisa , aperto um botão e solto assim. Ok, vamos adicionar esses detalhes. Aqui, vou copiar o texto e vir aqui, colar o texto assim. Por enquanto, vamos manter o link tão paso quanto a hashtag. Então temos que mudar as cores. É fácil, vá para o estilo E e a cor de fundo é essa cor de texto azul é essa cor branca. Ok, agora o que temos que adicionar é espaço. Então, vamos selecionar o t e pressionar tudo. 252-53-5305. Vamos adicionar esses detalhes no bloco aqui, depois os 25 primeiros, à direita, 35, os 25 inferiores, os 35 à direita. Ok, agora temos que verificar os cantos. Os cantos 15. Ok, aqui, vamos ver o que o rádio diz 15. Ok, agora temos o título, texto e o botão Agora, o que temos que fazer é no BR a partir desses pontos. Então, aqui no BR e no BR, bons conteúdos sobre família e BR como esse. E depois disso, garantimos e publicamos o Bok Nice. Agora, o que precisamos fazer é encontrar o espaço desta parte inferior até esta seção. Então é 60. Então, vamos adicionar esses detalhes. Clique no contêiner e, com antecedência, temos que adicionar um painel inferior de 60 pixels como este. Ok, parece bom. Agora eu clico em Savedraft e vamos repetir isso. Na verdade, vamos publicar isso de qualquer maneira porque este site está no modo Zona de Coming. Agora, se eu atualizar a página, ela ficará assim E aqui temos um problema. Temos um espaço para enfrentar. Ok, descobri o motivo desse problema. Então, quando configuramos a configuração lateral, adicionamos uma lacuna bruta do layout padrão após 220, então eu a removerei. Quando eu o remover, esse problema será corrigido e agora eu clico em Salvar alterações. Vamos adicioná-lo manualmente. Clique aqui e aqui já temos alguns espaçamentos. Então, para removê-lo, podemos adicionar uma margem negativa como essa. Na verdade, é dez e, se formos ao design, o tamanho intermediário diz 20. Então, aqui já temos dez. Se removermos essa margem negativa, já temos dez. Então, se eu adicionar dez assim, será 20, então temos que fazer isso para uma seção como essa, dez ou podemos adicionar dez a esse contêiner assim. A mesma coisa acontecerá. Vamos adicionar dez a esse contêiner porque essa é a maneira mais fácil. E sim. Quando fizermos isso, o espaço em questão será resolvido e agradável. Agora eu clico em Publicar e agora se verificarmos o design em exibição real, ele ficará assim. Na verdade, geralmente o tamanho do site será assim, mas como eu disse antes, meu desktop é maior, então é por isso que está aparecendo assim. OK. Agora, o que precisamos fazer é adicionar alguma animação. Vamos adicionar uma pequena animação. Primeiro eu clico aqui, vamos avançar em Advance eu vou para efeitos de movimento. Nos efeitos de movimento, podemos definir a animação de entrada. Vamos acrescentar coisas simples, como desbotar ou pular é demais, escrever é O desbotamento será baseado. Vamos adicionar fade in para cada seção. Clique aqui, clique em Efeitos de movimento e, por padrão, vamos adicionar fade in E aqui, efeitos de movimento, clique em fading down. Não, Padin ficará bem. Tudo bem Agora pode publicar e agora será carregado assim. É muito simples porque este site é para profissionais e adicionar muita animação não parecerá bom. OK. Agora temos que projetar esta seção. Vamos projetá-lo na próxima lição. 100. 0127aboutsummerysection01 ALTERED: Agora vamos criar esta seção. Vou até a página e aqui clico no ícone de adição e no livro Plax, depois neste Então aqui, vamos ver se eu seleciono a seção, pressiono tudo e verifico o tamanho intermediário. É um, dois, 20, e vamos aqui, vou avançar desse contêiner e definir a margem superior para passar de 1 a 20 assim. Então temos que encontrar a altura, a altura é 600. Vamos adicionar o layout de altura no layout, a altura média será 600. Agora devemos ter a direção horizontal bruta e, como primeiro passo, temos que adicionar essa imagem. Para adicionar a imagem, precisamos baixá-la, clicar duas vezes nela, clicar em Exportar mensagem instantânea e aqui, vamos ao tiny png.com e baixar Dragan op aqui para otimizá-la Exportar mensagem instantânea e aqui, vamos ao tiny png.com e baixar Dragan op aqui para otimizá-la Na verdade, ele é baixado como PNG, mas não precisamos dele em PNG. Vamos ver se o baixamos como JPG, podemos obter mais espaço ou podemos imaginar imagens muito mais pequenas como C aqui, temos 90 1 kilobyte, mas aqui temos 26 kilobytes mas aqui OK. Agora vou aqui e clico ícone Con plus, depois pesquiso a imagem e arrasto e coloco uma caixa de imagem como esta, clico nela e aqui faço o upload da imagem e do título Para a etiqueta antiga, adicionarei como médico da JB Family Clinic, pois isso ajudará a aumentar a otimização dos mecanismos de pesquisa E então eu clico aqui e aqui está no centro, então vamos centralizá-lo clicando neste ícone central no contêiner. Agora, o que temos que adicionar esses dois itens. Vamos começar com isso. Para adicionar isso, posso simplesmente criar um contêiner e, em seguida, podemos adicionar esses dois como texto. Vamos fazer isso primeiro. Temos que clicar aqui e adicionar o contêiner. Vamos adicionar um contêiner como esse. Agora, o que temos que fazer é adicionar títulos neste e clicar aqui no segundo título como este, então vamos copiar esse texto aqui, eu copio isso e colo assim, depois copio este e colo Agora vá para o estilo e esse tamanho de texto deve ser P regular, o que significa que já o configuramos como um parágrafo como este. Então aqui eu acho que isso é manchete. Vamos ver, é o título, então vamos adicionar cores tão pretas quanto essa Então, temos que ter uma ideia do espaçamento. Parece que o espaçamento é de seis , então vamos adicionar o espaçamento como C. Clique aqui e remova este, depois adicione assim Agora temos que centralizá-lo, clique no centro do item de linha. Então eu vou avançar com antecedência, vou definir o tamanho da corda. Nada acontece. Vamos adicionar um, vamos adicionar o bloco. Vamos descobrir o preenchimento e adicioná-lo. Em seguida, tentaremos fazer algo com o espaçamento. É 20 por 20 e 12 por 12. OK. Vamos adicionar esses detalhes aqui, superior como dois, teste direito bem, inferior como dois, teste direito. Então temos que decretar isso. Vamos diminuí-lo assim. Deveria ser assim. Eu apenas ajusto manualmente, então eu tenho a cor de fundo e essa sombra. Vamos adicionar a cor de fundo, temos que fazer o canto como 20. Vamos adicionar esses detalhes para adicionar, eu clico aqui e clico em Tipo de plano de fundo. Em seguida, selecione aqui o fundo como branco. OK. Em seguida, clique no quadro e aqui temos a sombra da caixa. Vamos aqui e conferir os detalhes da sombra. Então, aqui temos a seção eff na seção eff. Nós temos os detalhes. É a posição zero, zero e nós 15, então a cor é a cor preta com 15% de opacidade Vamos adicionar esses detalhes aqui, temos que fazer com que o desfoque 15 e a cor preta seja preta, e então temos que definir a opacidade Para definir a opacidade, na verdade, precisamos obter o código de cores Para fazer isso, primeiro eu seleciono a cor como preto e depois mudo para esse HA aqui e também aqui eu o defino como Hs L, e aqui temos zero, zero e aqui temos 15. Vamos aqui e reduzir esses dois até que atinjam 0,15 como último valor desse HSL, e agora está aparecendo assim OK. Agora, o que temos que fazer é adicionar canto do dado como 20, assim. Ok, acabamos de criar essa seção, e parece boa, e agora o que temos que fazer é adicioná-la aqui para adicioná-la nesta posição, vou defini-la como absoluta, e agora o que posso fazer é mudar o local, mas quando a definimos como absoluta, nossa mudança de design, vamos corrigir esse problema para corrigi-lo, vou para o layout e vamos valorizar até que fique assim. Agora eu posso avançar e aqui eu posso começar o set como eu quiser. Na verdade, a partir daqui, temos um problema, vou defini-lo como cheio e, por algum motivo, ele se tornará mais maior do que isso. Na verdade, vamos mudar esse costume com um padrão como este. Agora está perfeito e clique aqui, depois defina essas tomadas para configurá-la, temos que verificar a posição, então está aqui, então vamos ajustá-la. Parece bom, talvez adicionemos muito espaçamento, então vamos mudar essa parte superior para dois poços e a parte inferior para igual Agora temos que fazer com que isso pareça bom e agora o que temos que fazer é criar esta seção. Para criar essa seção, criarei uma caixa de imagem. Com a caixa de imagem, podemos criar facilmente essa seção, clicar aqui e pesquisar a imagem ou vamos adicionar uma caixa de ícone porque esse é um ícone, talvez vamos adicionar uma caixa de imagem porque, no futuro, podemos alterá-la se quisermos. Acabei de adicionar aqui, tenho que baixar este ícone, clicar no ícone, clicar em Exportar vetor, e aqui eu copio o t e venho aqui, depois adicionarei o título conforme necessário, depois removerei essa descrição porque não precisamos de uma descrição Vamos ver o tamanho. O tamanho é normal 25, vá para a irmã e o conteúdo, a cor deve ser preta e a tipografia deve ser essa Agora temos que remover esse espaço entre o ícone e os tanques. Vamos definir zero e na imagem, podemos com a largura, mas por enquanto vamos pegar a imagem, clicar aqui e fazer o upload direto dessa imagem e remover o título. Como uma conciliação igual, aqui temos um grande espaçamento, bom para estilizar o estilo, bom para estilizar o estilo, mudar o espaço da imagem para que não aconteça se adicionarmos menos valor, adicionar menos valor não mudará O que devemos fazer? Vou remover a margem e o preenchimento e ir para o estilo E no estilo E. Não, vou para conteúdo em conteúdo, vamos mudar esse título para D e fica um pouco melhor. Agora, o que precisamos fazer é adicionar um plano de fundo e essa sombra. Para fazer isso, vou avançar com antecedência, vou para esta seção de plano de fundo e aqui clico no tipo de plano de fundo como clássico na cor secundária. Agora vamos ver o espaçamento, esquerda e direita e superior e inferior como Vamos ver esses detalhes aqui, superior e inferior como 20 e esquerda e direita como 20. Agora temos que reduzir os cantos em segundo plano aqui, temos que adicionar 20 porque acho que é 20 centavos, o rádio de fronteira ou rádio de canto é 20. OK. Agora temos que adicionar essa sombra para adicionar a sombra. Temos que verificar os detalhes e aqui na borda, podemos verificar os detalhes aqui eu 15 desfoque e vou clicar neste x e copiar esse código de cor para que possamos editar diretamente daqui, clicar nele e na borda, clicar na sombra da caixa, que será 15 e neste código de cores Perfeito. Agora clique aqui, então temos que posicioná-lo da mesma forma para fazer isso, verificar a posição, alterar o padrão para absoluto. Agora podemos definir o deslocamento. É assim. Vamos ver, vamos ver que o E deve ser e isso deve estar aqui. Criamos a seção com sucesso e agora temos que adicionar esse texto. Vamos adicioná-lo na próxima lição. 101. Seção de resumo sobre — parte 02: Ok, agora temos que criar esta seção. Então, vamos começar. Primeiro, temos que adicionar um contêiner porque está na vertical e clique aqui, adicione um contêiner como este. Quando examinamos a imagem, podemos ver o local em que podemos adicionar o contêiner, clicar aqui, ir para avançar, remover todas essas paradas. E agora vou adicionar as colunas de clique: primeiro temos um título, depois temos um parágrafo Precisamos ser a manchete, a primeira manchete. E o segundo título, o segundo título deve ser P porque é um parágrafo e clique aqui, então copie este texto, cole assim, depois mude o estilo para ficar com a cor preta e, mude o estilo para ficar em seguida, copie isso novamente e cole e aqui devemos mudar a tipografia para parágrafo e cor do texto assim novamente e cole e aqui devemos mudar a tipografia para parágrafo e cor do texto Agora temos que adicionar o espaçamento, então o espaçamento é 20 Vamos adicionar ritmo para adicioná-lo rapidamente ao contêiner e, aqui no layout, vamos adicionar bruto como 20. Ok. Agora, o que precisamos fazer é adicionar espaçamentos entre eles. Se verificarmos o espaçamento entre 90. Vamos configurá-lo, clicar aqui, depois ir para Avançar e podemos simplesmente pesquisar na margem esquerda como 90. Perfeito. Agora, o que precisamos fazer é adicionar o botão. Vou aqui o botão de pesquisa e o botão dragon opper como este, então temos que adicionar o texto para que você saiba mais, aprenda mais assim e vamos esquecer o link por enquanto e ir para o estilo E no botão tipogravito de mudança de estilo E e a cor é a cor do fundo é azul e a cor do texto Agora, vamos ver que o rádio aquático é 15 e vamos adicioná-lo como 15 e não precisamos de uma sombra de caixa, basta removê-la configurando-a desta forma. Faça com que seja zero e agora está bom, então temos que verificar o tamanho intermediário. Coloque o texto e clique em e aqui é 2020 por 30, 30. Aqui temos o preenchimento: top 20, certo 30, top 20, direito, 30 e bom Aqui, novamente, temos esse espaçamento, esse espaçamento estranho, e isso é um grande problema, mas continua aparecendo e não precisamos fazer Para corrigir isso, vou apenas adicionar margem negativa. Agora, o que temos que fazer é esse botão secundário, é bem fácil. Então, vamos clicar aqui e adicionar o botão ou podemos simplesmente duplicar isso clicando botão direito do mouse e clicando em obrigatório, então temos que adicionar um contêiner aqui assim Em seguida, vamos adicionar esses detalhes dentro do contêiner e clicar aqui e avançar, torná-lo zero e no layout, adicionar horizontal como direção e a coluna será 20. Acho que é 20. Sim, são 20. Agora, o que precisamos fazer é remover o fundo para remover a cor do plano de fundo. Para remover a cor do plano de fundo, vou clicar no botão e aqui vou para o estilo e altero a cor do fundo para transparente e altero a cor do texto para primária assim. Então, o que precisamos fazer é adicionar um ícone e também precisamos alterar o texto. Vamos mudar isso e, para adicionar o ícone, podemos clicar facilmente no ícone Biblioteca e aqui temos a biblioteca ícones fontosm e vamos ver o nome desse ícone Na verdade, não há nome para esse ícone. Podemos simplesmente verificar isso aqui. Vamos pesquisar como uma seta, aqui temos o ícone, clique nele e clique em Inserir, e aqui podemos definir a posição do ícone. Vou adicionar a posição do ícone desta forma e, em seguida, podemos definir o espaçamento dos ícones Vamos ver o espaçamento dos ícones. Vamos configurá-lo como e temos que adicionar ESS personalizado para aumentar o tamanho do ícone. Então, vamos fazer isso na próxima lição. Aqui, novamente, clico aqui e temos que configurá-lo para alinhar o centro do item, para que ele seja alinhado ao centro corretamente Ok, até agora tudo bem. Agora vai ficar assim 102. Seção de resumo sobre — parte 03: Olá, pessoal. Agora temos que aumentar o tamanho desse ícone. Para fazer isso, temos que usar CSS. Então, vamos começar. Eu clico neste ícone de lápis para editar o botão, e aqui temos um lugar para adicionar ID a esse botão. Então, adicionarei o ID como nosso provedor BTN. Basta adicionar esse ID e, quando eu o adiciono, não adiciono espaços porque precisamos adicioná-lo em uma linha. Agora eu copio, depois vou para Advance. No Advance, temos um local para adicionar CSS personalizado. Agora, eu já criei o ID, então seleciono esse ID no CSS para fazer a hash tag Ipress e colo o nome do ID. Aqui está como selecionamos o ID no CSS e agora clico em Então aqui eu clico em Visualizar alterações e no código CSS, temos que adicionar esse tipo de colchete para adicionar o código DA Agora eu rolei para baixo, basta escrever aqui, clicar em e clicar em Inspec Agora eu clico nesse ícone e seleciono o ícone como este. Aqui está o ícone. Se verificarmos aqui, nosso ID está visível e agora temos que selecionar essa parte para fazer isso, posso copiar essa classe e depois adicionar espaço, usamos o ponto para selecionar a classe assim. Ok. Agora, aqui vou adicionar o código para aumentar o tamanho desse ícone. Este ícone é texto, então vou adicionar código como tamanho da fonte, e aqui vou adicioná-lo como 30 pixels 30 pixels é muito grande. Quando eu adiciono, você pode ver a prévia ao vivo. Quanto a 25.626, é melhor. Quando eu adiciono 26, ele simplesmente desce, então temos que compensá-lo. Eu adiciono ponto e vírgula e aqui vou adicionar um pequeno código como margem superior, margem superior, apresentador, então aqui vou Vamos adicionar menos dez px, é demais. Que tal cinco? Ainda é demais. Que tal dois? Um parece um, não, dois serão dois, será o alinhamento perfeito Aumentamos nosso ícone de botão com sucesso e agora eu clico em publicar e na pré-visualização real, ele ficará assim no próximo vídeo, vamos adicionar animação a esta parte. 103. Seção de resumo sobre — parte 04: Agora temos que adicionar animação, vamos fazer isso. Primeiro, preciso adicionar um momento a esses dois itens quando navegamos pelo site. Primeiro, vamos fazer isso para esse contêiner. Eu seleciono o contêiner ou seleciono aqui. Na verdade, esse é o contêiner. Eu seleciono o contêiner e, em estilo, você pode ver o efeito de rolagem Esse efeito de rolagem é aplicado aos itens internos. Portanto, não está funcionando, precisamos adicionar o efeito de rolagem a toda essa seção Para fazer isso, clico em avançar com antecedência, temos a seção de efeitos de movimento. No efeito de movimento, podemos adicionar esse efeito de rolagem. No efeito de rolagem, temos muitas opções e aqui temos o recurso para selecionar o dispositivo no qual queremos usar o efeito Mas, por enquanto, vamos continuar assim. Em seguida, preciso adicionar a rolagem vertical. Quando eu rolo isso, eu preciso ir para cima e para baixo. Então, para fazer isso, clico neste ícone de lápis e, aqui, quando seleciono o efeito de rolagem, posso colocá-lo para baixo ou para cima Então, se eu configurá-lo como configurado, ele subirá quando o rolarmos. Quando a rolamos para baixo, ela sobe. Quando rolarmos para cima, ele descerá. E eu preciso que eu diminua. Agora eu tenho que configurar o ponto de vista. Ok, agora eu subo e vamos ver os movimentos. Quando nosso ponto de vista está aqui, podemos mostrar esse ícone nesta parte, mas não preciso que ele o mostre aqui Então, para corrigir isso, vou mudar esse ponto de vista de baixo para aqui Então, se eu ligar , vai começar daqui. Veja, quando a parte inferior começa a rolar para baixo e temos que adicionar esse ponto de vista superior para adicioná-la, temos que descer mais do que isso, então vou adicionar um novo recipiente vazio como este Então vamos adicionar a altura média de 800, vamos ver aqui 800 é o suficiente. E bom. Agora, novamente, eu clico aqui em um machado de movimento de dança e aqui, vamos ver se nossa blusa na nossa parte superior bater como aqui, eu preciso chegar apenas a essa parte assim. Agora você pode ver que está mudando claramente e, se eu quiser torná-la horizontal, posso usar esse colin horizontal Agora vai ficar dos dois lados assim, mas eu gosto da parte superior e inferior e, para isso, vamos adicionar de cima para baixo. Para fazer isso, seleciono essa caixa de imagem e vou avançar com antecedência. Vamos para o movimento para trás e aqui clicamos em rolar na rolagem vertical, adicionarei a direção de, o que significa que quando rolarmos, esta seção subirá. Vamos consertar o w quando ele vier aqui, preciso que a parte superior caia assim. Eu só preciso ir assim e ver, ótimo. Temos que mudar a posição disso para torná-lo melhor. Vamos clicar nessa caixa de imagem e ir para layout e no deslocamento vertical, vamos colocá-la aqui Agora eu acho que deveria funcionar melhor do que antes ou que tal colocá-lo aqui no meio? Sim, quando o adicionarmos ao meio, ele funcionará perfeitamente. Agradável. Bom, bom. Agora vamos aos efeitos de movimento e clique aqui. Então vamos definir a parte inferior. Aqui, eu vou. Aqui, se for assim, vou definir essa passagem superior aqui, depois rolar para cima, rolar para cima funcionará bem. Não, algo está errado. Na verdade, temos que colocar essa posição de layout mais no meio, assim , aqui, vamos ver algo errado com ela. Mas agora eu acho que está funcionando bem. Está funcionando bem. Certamente, temos que fazer essa parte. Ok, agora está funcionando Ok. Temos que jogar com esses valores usados para obter o melhor efeito de movimento, e agora acho que está bom. Ok. Acabamos de adicioná-lo e, aqui, vamos adicionar o efeito de movimento a toda essa seção. Então eu clico na seção e vou para Avançar porque adicionar mais efeitos de movimento e transações tornará o site mais lento, então temos que ter isso em mente e eu adiciono esse tipo de efeito. Vamos publicá-lo e vê-lo no site real. Sim, funcionará assim, mas não deve ser semelhante ao design do cabeçalho. Vamos ver se o efeito de movimento do conteúdo desse cabeçalho está desaparecendo, então temos que adicionar fade nesta seção Efeitos de movimento, não desvanecimento de partes, como este . Publique-o. Agora, se você verificar o design, sim, ficará assim, aqui temos um problema. Quando rolamos isso para cima e para baixo, esse ritmo é o ritmo coberto, então temos que fixar a fita na tela maior, mas ainda temos que corrigi-la, não Para corrigi-lo no layout, adicionarei personalizado com like, então tudo bem. Eu acho. Vamos ver, posso publicar e algo errado. O que é isso? Vamos fazer com que essa estrutura desapareça e diminuir essa seção também. Quando eu o diminuo, esse design fica cada vez maior e há um problema, temos que corrigi-lo com antecedência. Aqui, vamos fazer com que ele diminua. O offset está bem vamos fazer com que ele diminua. O offset está O problema. Vamos clicar nesse texto e centralizar o texto e remover todas essas coisas Com a largura total, vamos fazer o mesmo com a largura total e alinhá-lo ao centro, e vamos ver até que resolvemos o problema Por que isso aconteceu? Eu o configurei como a correção com algo o. Agora podemos, devemos definir isso em fixel Vamos fazer com que 500, 500 sejam muito fracos e 400, 200, 202 pequenos, 300, 300 sejam para a segunda semana Na verdade, podemos verificar o tamanho aqui. largura é 215. A que horas eu faço isso? 215 deve ser o vento. Ok. Agora deve estar tudo bem. Veja, pequeno detalhe que o peso do passe agora é bom, publique-o e vamos ver no design Sim, ficará assim agora até que haja um problema. Na verdade, vamos tentar consertá-lo também. Acho que à esquerda e à direita é assim. Vamos colocar nossos 250 personalizados, talvez 200 200 estejam bem. Sem multa. 15 publicações. Agora está funcionando bem, tudo bem. 104. Design da seção de serviço — parte 01: Olá, pessoal. Agora temos que projetar esta seção. Mas antes de criarmos esta seção, precisamos encontrar ícones melhores. Esses ícones não são bonitos e não representam o serviço que oferecemos na seção de serviços. Além disso, aqui, temos outros ícones e é melhor no ícone Slim Para encontrar ícones, podemos usar sites como o Adobe Itok e ícones de pesquisa ou podemos usar ícones do Google para usar ícones Os ícones do Google podem acessar gratuitamente o ícone de material do Google . Basta pesquisar os ícones do Google no Google. Para obter o símbolo e os ícones do material clique nele e aqui você tem o ícone. Preciso mudar a aparência desses ícones, vou reduzir a largura para 200 e vamos fazer com que o traço cinza seja 200 Então o tamanho óptico será 40 weixel 40 weixel é melhor e aqui o estilo será arredondado e o símbolo do material será arredondado e Acabei de selecioná-lo e aqui vamos fazer nota como zero e tornar o ícone um pouco maior como 300 e vamos fazer nota como 200 e aqui podemos pesquisar o ícone. Primeiro, precisamos substituir esse ícone do telefone. Para fazer isso, basta clicar no ícone do telefone e ver seu tamanho. É de 32 pixels com vamos pesquisar aqui como telefone, aqui temos um ícone de telefone e vamos selecionar todo esse telefone e aqui temos que fazer esse tamanho como 32 pressione Enter e a cor da cor é branca, vamos tornar a cor branca e clicar em PNG, e o ícone foi baixado e agora vá aqui e clique aqui na imagem e vídeo, selecione o ícone assim e pressione Enter e agora você pode simplesmente clicar aqui. Nós já o selecionamos. Na verdade, você precisa selecionar o ícone co aqui, então agora clique no ícone e coloque-o assim. Agora, o que temos que fazer é diminuir um pouco seu tamanho, na verdade, temos que selecionar o ícone e diminuir seu tamanho assim. Na verdade, ele projeta 32 pixels. De qualquer forma, agora vamos fazer com que a altura 32 32 seja muito pequena, não acha? Sim, 32 é muito pequeno. Vamos fazer com que seja 48. 48 é melhor, vamos manter o 48 como o tamanho. Agora vamos descer e aqui temos uma enfermeira. Vamos pesquisar aqui como enfermeira Quando procuramos enfermeira, temos esse tipo de coisa. Vamos pesquisar como se fosse um bom hospital. E quanto à saúde? Ok, na saúde, vamos pesquisar. Vamos encontrar um ícone adequado para esse ritmo. Sim, esse ícone ficará bem. Selecione-o ou temos ícones diferentes melhores do que ele? Não, a partir desses ícones, esse ícone será adequado para ele. Vamos tentar diminuir o peso. Obtenha um ícone de linha fina e a cor do ícone será azul. Vou apenas copiar essa cor azul para que possamos alterar facilmente a cor do ícone daqui desta forma. Ok. Então vamos verificar o tamanho. O tamanho é 57. Faça com que seja 57. Na verdade, 57 é muito grande. Vamos fazer com que seja como 48. E clique em Copiar e baixar o GtU. Agora vá aqui e selecione o ícone e clique imagem para adicionar, na verdade , ela não foi atualizada. Clique em toda a seção para adicionar algo assim e colocá-lo assim. Agora, o tamanho é 57, vamos reduzir esse tamanho para 57. O 57 é muito pequeno. 98 ficarão bem. Vamos manter como nove. Na verdade, a Linha 20 é maior do que eu imagino. Podemos remover esse plano de fundo clicando aqui e clicando no corte, então podemos copiar o fundo assim Então teremos um ícone melhor. Agora, o que dizer de 30 a 57? Agora até agora tudo bem. Na verdade, um ícone fino parece melhor do que esse ícone. De qualquer forma, vamos fazer do vermelho 100, vamos ver a aparência fina do ícone fino. Aqui está o mais fino. Aqui está o mais fino. Clique aqui e pronto. De qualquer forma. Agora temos que mudar esses ícones. Primeiro, vamos dar um preâmbulo e pesquisar. Parece bom. Clique aqui Temos uma garrafa de leite e parece boa por aqui. Temos que encontrar o tamanho do ícone vetorial. É 60 por 80. Vamos fazer com que seja 60 e a cor é azul. Clique em confi eng download e selecione este ícone aqui e clique aqui Em seguida, basta adicioná-lo assim. Eu não adicionei. Oh, eu vejo porque não está adicionando porque isso é um componente. Clique aqui e clique em Desanexar instância, e então eu posso adicionar o que aconteceu? O que aconteceu aqui. Agora, vamos adicioná-lo aqui, basta clicar assim e depois colocá-lo assim Agora diminua seu tamanho. O que aconteceu? Aqui. Na verdade, eu tenho que remover isso , oh, vamos deixar essa imagem assim. o que estava a imagem? São 60. Vamos selecionar a imagem e criá-la com 60, não, nada bom, 120, o tamanho do fundo deve ser 12110 O tamanho deve ser 110. Agora eu tenho que clicar nesta imagem e clicar em Cortar e sustentá-la assim porque podemos aumentá-la quando removemos esse tamanho desnecessário, então eu posso fazer isso como 60, então pré-selecione a imagem e pressione Shift e torne-a maior São seis Ok, parece bom, e aqui temos esse texto, vamos copiar a parte da gravidez. Ok, aqui temos uma imagem da gravidez e clique em PNG para baixá-la e vamos substituir essa imagem. Clique na imagem para removê-la. E aqui, vamos adicionar essa imagem. Acabamos de baixá-lo aqui, depois tocamos duas vezes na imagem e cortamos um espaço desnecessário como este. Agora podemos diminuir seu tamanho, deslocar o espaço e diminuir seu tamanho desta forma. Agora temos mulheres copiando mulheres humanas. Vamos pesquisar P e aqui temos mulheres. Podemos simplesmente adicionar esse tipo de ícone feminino ou ícone feminino como este ou ou esse ícone funcionará. Vamos baixá-lo e colocá-lo, remova-o aqui e não tão apertado. Clique nele e cole dentro da caixa assim e coloque. Temos que verificar o tamanho até agora e agora temos remédios para a família, então vamos copiá-lo e colá-lo assim, como se fosse da família. Eu gostaria de adicionar esse tipo de ícone porque esse tipo de ícone clicará em PNG para baixá-lo e removê-lo. Quickie, cole assim e pressione Fit assim Agora está bom. Agora, o que precisamos fazer é adicionar esses ícones ao nosso site WordPress. Clique neste ícone e em X clique em Baixar e acesse o site e clique aqui, depois clique aqui e podemos simplesmente baixá-lo. É um arquivo muito pequeno, então eu posso OK. Sim, basta baixá-lo e assim e ficará bem, clique em publicar para salvar e agora podemos começar a criar esse sexo 105. Design da seção de serviço — parte 02: Olá, pessoal. Agora, vamos criar essa seção. Então, aqui vou para o nosso painel, e aqui temos que criar um contêiner como esse e vamos ver o tamanho. A altura média foi de 666. Vamos entrar aqui Mnnight 66, seis, e agora está bem aqui, e aqui temos que adicionar este título para adicioná-lo, eu apenas copio assim, depois venho aqui e adiciono o título assim, o título do rosto e vou para o conjunto de estilos Align center e Typograps cabeçalho e do texto deve ser essa cor preta e o texto deve ser cortado daqui, então eu adiciono Bro, eu tenho que São 120. Vamos adicioná-lo, clique aqui e vá para Avançar, a margem superior é de 1 a 20. Ok, até agora tudo bem. Agora, o que temos que adicionar é esta seção. Se você verificar esta seção, temos um carrossel elemento para adicionar um carrossel, podemos clicar nesse elemento de adição e pesquisar no E quando eu pesquiso, obtemos esse tipo de resultado e aqui eu apenas adiciono esse item de carro. Agora, o que eu tenho que fazer é remover essas coisas desnecessárias. Primeiro, removerei o primeiro slide e manterei apenas dois slides, e o slide exibido serão dois. Então eu vou ficar aqui, vamos nos sentar, tudo bem. Navegação, a navegação está bem. Vamos fazer coisas do Glo depois de concluirmos o design. Agora, se você verificar o design da caixa, ela está muito próxima. Então, para corrigir isso, clico neste contêiner de edição e, agora, se verificarmos aqui, podemos verificar a via na hashtag 1 do Slider Então, se quisermos, podemos renomeá-lo também. Mas, por enquanto, vou remover isso e aqui A vamos remover o espaçamento assim Agora temos que adicionar o teclado esquerdo e direito para adicionar o bloco, clico no contêiner e aqui tenho que adicionar o padnas 140 direito e o padnus 140 esquerdo OK. Agora rápido e aqui temos dois contêineres. Eu seleciono o causal e vou para Advance com antecedência, removo todas essas coisas desnecessárias aqui primeiro, temos que adicionar este título e aqui eu procuro uma caixa de imagem como esta, basta colocar a caixa de imagem aqui dentro e com a caixa de imagem, podemos concluir a tarefa com bastante facilidade, o alinhamento será à esquerda e a posição da imagem será Agora vou para conteúdo em conteúdo. Vamos adicionar esses detalhes assim, depois copiar esse ritmo e fazer o download dessa imagem, selecionar o ícone e exportar em exxpot, clicar no ícone Exportar clicar no ícone Exportar Então, aqui, eu posso adicionar isso ao pequeno PNG, mas para este, basta fazer o upload assim. Vamos adicionar o texto ALD como esta parte pediátrica e clicar em Consilar, agora selecione a caixa de imagem e vamos corrigir Primeiro, vamos descobrir que o tamanho intermediário é 20 por 20. OK. Agora vá para o estilo E em estilo, Imagepason é 20, 20 contentpacing é 20 Agora vá para a imagem e borda da imagem se não for da imagem, a largura será de 100%. Na verdade, não é a largura da imagem. Dessa forma, a imagem usará o tamanho padrão e agora temos que colocar a imagem no centro para fazer isso. Vamos mudar esse STMLtG para D e agora ir para o estilo E. No conteúdo, cor periódica deve ser a cor do texto e a tipografia deve ser texto e a tipografia OK. Ou remova a margem e o preenchimento que serão de largura total, então aqui o alinhamento vertical deve estar no meio até agora, tudo bem e agora temos que adicionar essa sombra de fundo, sombras de rocha ou clicar na sombra de rocha e é 15 e aqui temos Vamos fazer isso. Estamos prontos, se você se lembrar, selecione a caixa de imagem para avançar com antecedência, temos a borda por Peça a sombra do livro, o nervo é 15 e a cor deve ir para HL X, depois venha aqui e a cor deve mudar para clicar aqui e HXL selecionar o CSS, copiar o código de cores e vir Se o código de cores for assim, basta adicionar uma data e alterar o raio da borda Se verificarmos o raio da borda, a redução da placa é 20, vamos reduzir para 20 OK. Agora nossa sombra projetada não está funcionando. Você se lembra que esse mesmo problema aconteceu no design do Figma E o que fizemos foi criar um preenchimento como 120, depois adicionamos o margino aqui Vamos fazer isso por este. Para fazer isso, eu seleciono o contêiner. Com antecedência, eu altero 140 para 120 e aqui também faço 120. Em seguida, clique aqui. Para esse controle deslizante, posso adicionar o preenchimento direito como 20 e o preenchimento esquerdo será OK. Quando fazemos isso, podemos ver claramente a fronteira. Como temos que adicionar o preenchimento superior como 20 e o preenchimento inferior também será Agora, o que precisamos fazer é adicionar o preenchimento desta caixa de imagem, é 20 e clicar na caixa de imagem e aqui, clicar no ícone Corrente e adicionar 20 Até aí tudo bem e está assim, então o que temos que fazer é duplicar este e aqui temos que descobrir o tamanho intermediário Também é 220, então podemos clicar aqui. Ou para layout em layout, podemos adicionar 20. Agora eu tenho que mudar esses detalhes. Vamos alterá-los, copiar daqui, clicar aqui e colar assim e alterar a imagem para alterá-la. Temos que baixar esse ícone e copiar esse texto para adicionar ao texto antigo e clicar em ocultar Ok Agora, criamos apenas um lado e agora vou duplicar esse slide porque precisamos do segundo lado para fazer isso Vou até Carsels e clico nesse botão duplicado para duplicar o controle deslizante, aqui adicionarei o controle deslizante como nome, e agora temos que alterar os detalhes como fizemos Assim, faça a mesma coisa aqui, desse jeito. Exportar, clique no ícone Exportar aqui. Na exportação, adicione a tag Al como esta, clique em Consiler now are good e aqui temos Este é maior do que este, para corrigi-lo, clico nesta caixa de imagem e aqui, clico em crescer e ele crescerá assim e podemos fazer o mesmo com esses itens também. Agora, aqui temos um grande espaço para removê-lo. Eu clico em Karasel e Incara, vou para estilo em estilo, espaço entre será zero e a bola reduzirá a almofada, não precisamos de nenhuma dessas Agora, o que podemos fazer é clicar no slide um e adicionar o teclado direito como dez. Em seguida, clique aqui neste e vá para avançar, adicione o teclado esquerdo como dez. Agora parece bom. Aqui no carrossel, podemos alterar os detalhes do conteúdo. Então, aqui podemos adicionar o nome do carrossel, então eu adicionarei serviços, e aqui, temos que adicionar mais um controle deslizante e quando eu adiciono o controle deslizante, eu posso Vamos alterar esses detalhes dos pontos para fazer isso. Eu deveria ir para a navegação na navegação, não na seta, deveria ser a inação da página Na paginação, é definido como pontos e vá para Estilo na paginação de estilo Vamos ver o estilo. Então eu acho que o estilo é 220. Então, vamos ver aqui está o D das. Acabei de verificar o estilo, é 20. Então, vamos fazer o espaçamento como 20. É espaço a partir do controle deslizante. Vamos ver o espaço no controle deslizante. Acho que também é 20, mas vamos ver. Sim, são 30, não 20. Vamos fazer com que a posição 30 seja o centro e, em seguida, o tamanho descubra o tamanho desse ponto. É 20 por 20, vamos fazer o tamanho como 20. O espaço entre os pontos será 20. Não é? Sim, são 20, o que menos? Parece demais, então vamos fazer com que dez ainda seja demais. Faça com que seis seja melhor. E cor, vou criar cores primárias e nossa cor será essa cor de destaque OK. Agora funcionou perfeitamente e temos flechas Não, não temos setas, então vou remover essas setas para removê-las para navegação Posso simplesmente definir zero ou nenhum conteúdo. Vamos ver, existe uma maneira de simplesmente retirarmos essa parte da seta e ela simplesmente desaparecer assim OK. Agora vamos adicionar outro conteúdo. Para adicioná-los, temos a lista de conteúdo. Então, vamos entender. Ok, aqui está o conteúdo, e temos que adicionar esse conteúdo ao próximo slide. Então, vamos fazer isso. Basta copiá-lo, colocar conteúdo e colar assim. Então, novamente, copie a pequena descrição. Na verdade, não é uma descrição pequena. A descrição do empréstimo deve ser a parte que devemos adicionar. Não, é sobre o conteúdo da página. Aqui está o conteúdo que temos imunidade e Maxine, copie aqui nossa seção de serviços, adicione o conteúdo de lá e seja este, depois copie a pequena descrição, cole assim, como está aqui e vamos primeiro adicionar o conteúdo, então podemos adicionar os títulos suporte de saúde mental, descrição de adamall, colar, depois copiar este, adicionar aqui e depois cole isso. Ok, cole aqui. Bom. Agora temos que adicionar as imagens. Então, para adicionar as imagens, copie o texto daqui, vamos copiar a parte da vacinação e colocar na vacina será o texto, coloque no Google. Clique em PNG para fazer o download e aqui temos que adicionar para adicioná-lo, vou criar uma instância assim, depois vou desanexá-la, clicar aqui para desanexá-la, e então posso simplesmente substituir essa imagem pelo ícone e clicar na imagem e aqui temos a vacina assim Então, pegamos a parte do machado e fazemos com que ela seja, na verdade, podemos simplesmente adicioná-la como aqui Na verdade, o just on pode clicar assim, depois clicar nele e vamos colocá-lo vamos colocá-lo dentro do ícone e remover esse vetor e apenas diminuir esse tamanho assim e aqui ele deve ter o tamanho 125, 110, vamos fazer com que esse ícone tenha o tamanho 125, um Ok. Agora está perfeito e clique aqui, depois exporte, clique no ícone de exportação, e eu vou continuar primeiro, vou colocar isso aqui, depois vou continuar mantendo o gerador, copio esse texto, vou para o material e coloco assim. Então, vamos pegar esse tipo de ícone e colocá-lo aqui. Eu apenas configuro assim, é bom, exporto, e depois saúde mental, busco saúde mental. Procure um mentor Aqui temos a parte de psicologia, baixe-a, acesse aqui e veja uma imagem como esta, selecione o ícone, clique no ícone Exportar e, em seguida, temos o conselho de busca de saúde E quanto à nutrição? Nutrição. Este ícone funcionará baixe-o, clique aqui e coloque assim. Agora vou clicar no ícone Exportar. Agora podemos adicionar esses ícones. Clique nesta caixa de imagem, clique aqui e primeiro temos o ícone. Acho que esse é o primeiro ícone. Deveria ser o ícone. Sim, sim, sim, é o ícone, copie-o e copie o título para adicionar um texto antigo. Adicionar texto antigo é muito importante porque ajuda a franquear seu site, franquear essa imagem no mecanismo de pesquisa. Sempre tente adicionar a tag l e, em seguida, o que temos que adicionar, acho que essa em mental, acho que adicionei a imagem errada, mas é imagem mental, saúde mental, e simplesmente não adicionei por enquanto. Na verdade, saúde é rastrear e prevenir cuidados. Saúde é tela e cuidados preventivos, clique nela, e isso deve ser que a pesquisa não pode fazer isso. Na verdade, vou dar uma olhada no design. Então, vejo que esse aqui é o único. Agora posso canalizar um espaço e clicar em selecionar. Ok, aqui, podemos adicionar o ícone de saúde mental como este. OK. Agora, aqui podemos adicionar esse ícone de maçã. Tudo bem, clique em Publicar. Vamos ver o design e nosso design ficará assim e podemos adicionar mais, funciona perfeitamente e adicionar mais coisas, como efeitos de capa e outras coisas. Vamos adicioná-los depois de criarmos todo o site. Acho que será muito melhor do que adicioná-lo a partir daqui. Aqui temos um problema para corrigi-lo. Vou apenas clicar em Casel e ir para set in set in. Vou remover o infinity scroll e acho que ele resolverá o problema, publicará e agora vamos ver, vamos ver Eu simplesmente não conserto mais rolagem infinita nem mais problemas. Agora tudo bem e nos vemos na próxima lição. Temos que adicionar o ícone Her effect. Na verdade, vamos adicioná-los depois concluirmos o site. Tchau tchau. 106. Melhore a segurança: Olá, pessoal. Antes de prosseguirmos, vamos melhorar a segurança do nosso site WordPress. Portanto, há algumas coisas que precisamos fazer como primeira etapa, vamos instalar o plug-in de segurança. Então, vou até os plugins e clico em Novo Plugin. Ok, aqui vou pesquisar Word Pence. Agora você verá a segurança do Wordpens do WordPensPlug in. Então, vamos instalar esse plugin. Clique em Instalar agora, e está Instalando, então eu clico em Ativar. Ok. Aqui vou clicar para obter uma licença do Word Pens. Aqui temos um plano de preços e vou usar o Word free Bland Aqui, clico em obter licença gratuita, e aqui clico em Estou bem, esperando 30 dias pela proteção contra novos tópicos, clico nele e aqui adicionarei meu e-mail. Se você quiser que o alerta de segurança e vulnerabilidade do WordPress seja enviado para você por e-mail, clicarei em Não e aqui clicarei nesta caixa de seleção para concordar com os termos e condições. Em seguida, clico em registrar. Agora, ele enviará um e-mail para o nosso endereço de e-mail. Vou acessar minha conta do Gmail e verificar o e-mail e aqui recebi o e-mail Basta clicar em Instalar minha licença automaticamente, e aqui ela será redirecionada para o site e eu clicarei em Instalar licença Ok, agora eu clico em. Vá para o painel. Tudo bem, instalamos com sucesso o plugin de segurança Wordpens em nosso site WordPress e agora temos que fazer algumas configurações Então, como primeira etapa, você verá que temos uma mensagem para ativar a atualização automática do plug-in de segurança do Wordpress. Então eu clico em habilitar atualização automática. Se você não o viu, pode ignorá-lo. Agora, primeiro, também clicarei nesse firewall Você verá aqui uma chamada de mensagem para tornar seu site o mais seguro possível. Reserve um momento para otimizar seu firewall de aplicativos web Wordpens, então eu clico em clique aqui para configurar Ok. Agora você receberá esse tipo de pop-up e aqui vou selecionar essa versão recomendada e clicar em Baixar arquivo HT Access para baixar nosso arquivo de acesso HD, e aqui posso simplesmente clicar em Continuar e clicar em OK. Agora estamos na seção de firewall e o status do firewall do aplicativo da web está no modo de aprendizado e ele ativará automaticamente o firewall em nosso site após alguns dias. Para ser preciso, isso acontecerá em 13 de fevereiro Vou mantê-lo assim e agora posso clicar em Ican e removê-lo. Então aqui podemos começar o Ican. Eu clicarei em iniciar um novo Ican e ele iniciará nosso site. Em seguida, vou para Segurança de login, removo isso e, em segurança de login, podemos adicionar autenticação de dois fatores, mas geralmente não habilito a autenticação de dois fatores em nosso site WordPress porque tenho outra maneira de proteger nossa página de login e, por enquanto, clicarei em configurar em configurar, rolar para baixo e aqui clico habilito a autenticação de dois nosso site WordPress porque tenho outra maneira de proteger nossa página de login e, em rolar para baixo e aqui clico Ativar recaptura no login e página de registro do usuário. Então, com esse recurso, podemos adicionar o Google Recapture ao nosso site Eu clico nesta página de administração do recapter e ela será redirecionada para nossa recaptura Página. Ao fazer login nesta página, você pode clicar no botão Criar e aqui podemos adicionar os detalhes do nosso site. Aqui temos que adicionar um rótulo. Vamos adicionar um rótulo como nosso nome de domínio. Assim, adicionarei apenas nome do domínio e o tipo de novo capítulo será. Então, aqui temos que adicionar nosso nome de domínio. Vou apenas copiar o nome do domínio e remover as coisas e usar apenas o domame com.com ou pontos Nesse caso, pontos, então eu clico em Adicionar domínio e ele é adicionado com sucesso E aqui temos que configurar a plataforma Google Cloud e eu já criei um projeto no Google Cloud, então vou escolher um deles, depois clico em Subm. Agora, obtemos a chave lateral e a chave de segurança, então vou copiá-las e colá-las assim , vamos controlar essas teclas e depois clicar em Salve, adicionamos com sucesso a segurança de login para verificar isso. Vou sair do site e, Vou sair do site e quando eu acessar nossa página de login do WordPress, veremos isso protegido pelo logotipo f capter, que significa que ele foi adicionado com sucesso ao nosso site Agora eu clico em Login novamente. Ok. Em seguida, em canetas de texto, vamos ao painel Em seguida, vamos para a página de digitalização e verificar o resultado. Atualmente, não encontramos nenhum problema, e isso é bom. Se você encontrar algum problema, poderá verificá-lo e corrigi-lo. Agora vou para L OptionsOelOptions, manterei a maioria delas como padrão e, na preferência de e-mail, marcarei o e-mail se o Wordpens estiver desativado e enviarei um e-mail se o firewall do aplicativo web do Wordpens estiver desativado, sem precisar me o firewall do aplicativo web do Wordpens estiver desativado, sem precisar manterei a maioria delas como padrão e, na preferência de e-mail, marcarei o e-mail se o Wordpens estiver desativado e enviarei um e-mail se o firewall do aplicativo web do Wordpens estiver desativado, sem precisar me alertar com o resultado da verificação. Se adicionarmos isso, receberemos muitos e-mails, e eu não preciso desse. Eu não preciso desse. Se o seu site tem muitos tópicos, você deve habilitar essas dublagens, mas não é necessário e eu não preciso desse, desse, desse, e eu só mantenho esse alarme quando há um grande aumento na detecção de ataques em meu site Quando definirmos essas preferências de e-mail, receberemos os e-mails com as atualizações mais necessárias. Agora eu clico em Salvar alteração 107. Alterar o URL de login do WordPress: Olá, pessoal. Podemos acessar qualquer site WordPress, página de login usando. Olá, pessoal. Podemos acessar qualquer página de login do wordpress digitando nosso site. IRLAHWPAdmin. Nesse caso, design personalizado do site dot slash WP admin. Qualquer pessoa pode acessar a página de login do Word Press. Na maioria das vezes, usamos o nome de usuário como administrador e, se alguém executar um bot na sua página de login ou tentar adivinhar os detalhes de login, essa pessoa poderá acessar o painel do WordPress. Para corrigir isso, podemos alterar URL da página de login do Wordpress. Vamos fazer isso. Primeiro, vou ao painel do WordPress fazendo login no site do WordPress, e aqui vou acessar os plug-ins e adicionar um novo plugin. E aqui vou pesquisar o apresentador do WPs H Login, agora temos esse login oculto do WPs, plug-in e, atualmente, ele não foi testado com nossa versão do não foi testado com Mas vamos tentar instalá-lo. Quando você confere esta lição, ela pode ser compatível com seu site. Eu clico em Instalar agora e clico em ativá-lo com sucesso e agora vou revisar o set in set in, podemos ver o WPs hd fazer login Basta clicar nele e, quando eu desço até aqui, podemos especificar o URL de login e o URL de quatro oh four oh página não encontrada, que significa que podemos criar uma página personalizada quatro páginas não encontradas e defini-la aqui e, por enquanto, vamos alterar apenas a URL de login. Para fazer isso, você pode simplesmente alterar esse texto, então vou adicionar aqui o login do GA desta forma e sempre lembrar de memorizar esse URL ou o texto que você vai adicionar Vou apenas adicionar o login. Se você esquecer esse URL, não conseguirá acessar o painel do WordPress. Você precisará editar o banco de dados e o arquivo de plug-in. Sempre se lembre disso. Vou apenas adicionar o login e clicar em Salvar alterações e, em seguida, clicar em Logotipo. Quando clico em Logout, o URL da página muda para login e, agora, se eu tentar adicionar o administrador do WP, ele se referirá à página quatro em quatro. Vamos adicionar o login aqui, para que agora você possa compartilhar esse URL sozinho com o nome de usuário e a senha. Se alguém tentar adicionar o administrador do WP ou tentar fazer login, essa pessoa não conseguirá fazer isso, e isso ajudará a manter o site profissional e ninguém saberá sobre a página de login do seu site Ok, agora eu clico em Entrar no site. Aqui podemos ver a atividade das tendências do Word na semana passada. Na verdade, eu não preciso de datas, então vou para a opção Screen e retomarei atividade do Worden no ícone da semana passada e Earl 108. Crie campos personalizados usando o plugin Campos personalizados avançados: Olá, pessoal. Agora temos que criar esta seção dedicada ao nosso provedor. Portanto, esta é a página do membro da equipe no elemento em que não temos um widget para criar equipes Temos caixa ortográfica e caixa de imagem, mas se criarmos esta seção com essa caixa de imagem ou caixa ortográfica, um problema é que não podemos adicionar esse Então, como exemplo, vamos criar um Flexbox e clicar aqui para adicionar elemento e pesquisar imagem Ok, aqui está a aparência da caixa de imagem e não tem esse tipo de link, o link de visualização do perfil, vamos marcar a caixa ortográfica e editar De qualquer forma, o Orthobox não vai funcionar. Outro problema é que até usamos esse tipo de caixa de imagem, acho que atualmente você tem dez membros da equipe. Mas, no futuro, dentro de alguns meses, sua empresa contratará mais três membros, o que significa que a empresa precisará adicionar esse novo membro da equipe editando o design do site. Mas se criarmos uma seção diferente, podemos adicionar os membros da nossa equipe, o que significa que vamos para a página de administração do WordPress. Se tivermos uma seção aqui, como membros da equipe, podemos facilmente adicionar membros da equipe usando essa seção. Então, quando adicionamos os membros da equipe, o WordPress adicionará automaticamente esse membro da equipe à nossa seção de provedores dedicados. Para fazer isso, podemos usar o plugin de campo personalizado. Os plug-ins de campo personalizados nos permitem criar um tipo de pose personalizado. Atualmente, temos tipos de pose, como postagens e páginas, mas com esse plugin de campo personalizado, podemos desbloquear o verdadeiro potencial do wordpress e também estamos usando o elemento pro. No elemento pro, temos elementos loop grid e loop carasa, que significa que podemos adicionar modelos inteiros a essas seções Agora você pode não entender isso completamente, mas nas próximas lições, você entenderá claramente sobre os tipos de pose personalizados e o poder do elemento profissional. Vamos começar. Primeiro, vou ao painel do WordPress e, aqui nos plug-ins, clique em adicionar novo plug-in e pesquise um apresentador personalizado do tipo POS Agora obtemos esse tipo de resultado e aqui o que selecionamos são esses campos personalizados avançados do mecanismo WP, clique em Instalar agora Em seguida, clique em Ativar. Ok, eu ativei. Se clicarmos em exibir detalhes, podemos ver que o campo personalizado avançado transforma o site do Word em um sistema de gerenciamento de conteúdo completo, fornecendo as ferramentas para fazer mais com seus dados Vamos começar bem, agora você verá um item de menu chamado ACF Neste item do menu, primeiro, vou para o tipo de pose. No tipo de pose, podemos criar um novo tipo de pausa. Eu clico em Adicionar novo e aqui vou definir o rótulo como provedor. Na verdade, nossos fornecedores. Vamos adicionar um provedor. E o nome singular será provider e a chave de postagem será adicionada automaticamente Atualmente, não temos nenhuma taxonomia existente, então não selecionarei nada e a visibilidade será pública Então, aqui eu apenas clico em Salvar alterações. Quando eu clico em Salvar alterações, você verá no item de menu uma nova seção chamada Nossos provedores. Se eu clicar em provedores de EO, ele deve estar vazio e ok. No entanto, o ícone não está relacionado aos nossos fornecedores. Para alterar o ícone, clicarei em configuração avançada na configuração avançada, clicarei em visibilidade na visibilidade. Aqui temos o conjunto de ícones e aqui podemos selecionar um ícone relacionado ao nosso site ou à nossa seção de fornecedores. Vou adicionar esse tipo de ícone e, em seguida, conceberemos as mudanças Eu simplesmente mudo assim. Ok, a primeira parte está concluída. Em seguida, vou para grupos de campo em grupos de campo, clicarei em Adicionar Nu e aqui podemos adicionar os campos nos quais queremos armazenar os dados de nossos fornecedores. Vamos ao conteúdo do nosso site. Aqui está o conteúdo do nosso site e, em nossa seção dedicada ao provedor, temos o nome, a função e a breve descrição e , em seguida, a descrição do empréstimo. Também temos uma imagem. Vamos adicionar esses detalhes. O primeiro rótulo de campo será o nome do provedor, nome do provedor e esse espaço será assim, então não adicionarei nenhum valor padrão. Antes de fazer isso, precisamos adicionar o título do grupo de campos. Adicione o título do grupo de campo, adicionarei o campo de nossos provedores assim, então aqui vou eu. Então, aqui, basta adicionar um grupo de campos de tipo de texto, e agora eu clico em AddFel para adicionar um novo campo e aqui o que precisamos para adicionar essa função aqui rolo de cópia e aqui tipo de campo, temos muitas opções para selecionar Vamos verificar os tipos de campo, e aqui temos a opção de selecionar. Vamos adicioná-lo como seleção e, em seguida, adicionarei rótulo do campo como rolo e o nome do campo será adicionado automaticamente, e aqui podemos adicionar rolos. Então, atualmente, vamos ver as funções desses provedores. Na verdade, eles têm papéis diferentes. Portanto, podemos simplesmente adicionar de campo do tipo caixa de texto para isso porque não temos nenhuma função repetida Então, vamos mudar esse tipo de campo para caixa de texto ou texto. OK. Agora, novamente, clico em Adicionar novo e aqui podemos fechar aqui, aqui, podemos clicar em fechar campo. E tudo bem, agora o que temos que adicionar é uma breve descrição. Basta copiar esta breve descrição. E vamos colocá-lo como rótulo de campo, e aqui, vamos mudar esse texto para área de texto e clicar em Fechar e Adicionar Arquivo para adicionar um novo campo E vamos ver. Agora, aqui temos a descrição do empréstimo, basta copiar. E para este, podemos adicionar o editor. Aqui, temos o editor visual, para que possamos clicar no ViswEditor e aqui, como rótulo do campo, podemos adicionar a descrição do empréstimo, clicar em fechar e no campo, então o que precisamos adicionar é a imagem Portanto, para a imagem, adicionarei apenas o rótulo do campo como foto de rosto e, em seguida, o tipo de campo será imagem O formato de retorno será matriz de imagens, e acho que agora temos campo. Portanto, temos o nome do provedor, descrição resumida do rolo, a descrição do empréstimo e a abreviatura. Sim, quero dizer, basta mudar isso para um nome. Não é necessário adicionar o nome do provedor, basta adicioná-lo como nome. OK. Se você quiser criar um tipo diferente de passado ou um tipo diferente de site, você pode adicionar esse tipo de campo conforme desejar. Para este, isso será ótimo e aqui temos que definir a regra. A regra mostrará esse grupo de campos se aqui pudermos definir a pose e for igual ao nosso provedor. Você se lembra de que criamos nosso tipo de profissional como nosso fornecedor? Portanto, podemos adicioná-lo assim e, atualmente, só precisamos ver esse grupo de campos dentro desta seção de provedores. Então, vamos clicar em Salvar alterações para salvar esse grupo de campos. Agora, se eu for até nossos fornecedores e clicar em adicionar novo provedor OR, e aqui temos os detalhes do nosso provedor, então podemos aumentar isso assim. E aqui temos o nome, uma breve descrição da função, uma descrição e a foto de rosto para adicionar essa imagem Portanto, isso é semelhante à postagem, mas aqui temos campos personalizados que podemos usar para adicionar detalhes dos membros da nossa equipe. Então, vamos adicionar esse conteúdo à seção O provider e continuar a lição. Então, aqui, selecione rolo e cole assim e copie a breve descrição, cole assim, e aqui temos a descrição do empréstimo para a descrição do empréstimo, vou apenas copiar isso como um texto como este. Mas se quisermos, podemos adicionar estilos a essa descrição do empréstimo e agora temos que adicionar a foto de rosto Vamos adicionar a foto de rosto para adicionar a foto de rosto, clico em Adicionar imagem e aqui podemos acessar nossa biblioteca de mídia e clico em carregar arquivos e em selecionar arquivos , aqui temos a imagem de nossos provedores, então eu seleciono todos eles e clico em abrir para fazer o upload de todos Agora vamos descobrir a imagem. A primeira imagem é da médica Sarah Thomson. Essa será a primeira imagem. Adicione o nome do médico ao texto ALT e clique em C CLC. Acabei de adicionar assim. OK. Agora, aqui, adicionarei o título de doutora Sarah Thompson e não adicionarei nenhuma descrição Em seguida, clico em publicar para publicar os detalhes do provedor. OK. Agora, se verificarmos aqui, podemos ver os detalhes do médico. Tudo bem, então vamos continuar adicionando os detalhes do nosso provedor e eu vou aqui e copiarei o nome do médico ou o nome do provedor, copiarei a função e a breve descrição, a descrição do empréstimo. Por fim, a imagem, adicione o nome ao título e vá para adicionar imagem. Então vamos ver a imagem. Esta é a imagem em ALT tanks, clique em CLF e depois em Publicar Agora podemos clicar aqui em Novos nossos provedores e aqui vamos obter o nome do próximo médico aqui e o nome aqui. Na verdade, não precisamos desse campo de nome porque já temos o título como nome, mas, por enquanto, vamos mantê-lo assim. Enfrente a descrição errada, curta longa, e adicione uma imagem. Doutora Emma, aqui está o médico que Emma pode publicar, clique em adicionar novo Nossos provedores aqui adicionarão o resto dos médicos e atenderão você. Adicionamos nossos médicos com sucesso. Vou até nossa seção de fornecedores e clicarei em provedores ELO. Aqui estão os provedores Earl que temos Agora, se quisermos, podemos clicar em Editar ou enviá-lo para a lixeira ou fazer qualquer tipo de coisa. Atualmente, se clicarmos em, não veremos os detalhes porque não os configuramos Na verdade, não precisamos configurá-los dessa forma e, na próxima lição, vamos adicionar esses detalhes à página inicial, como 109. Crie nossa seção de provedor — parte 01: Olá pessoal, acabamos de adicionar os detalhes do nosso provedor e agora é hora de criar o site. Em nosso arquivo Figma, aqui está a seção que precisamos criar Aqui temos um carrossel e vamos começar. Primeiro, vou até o elemento ou editor e vamos remover essa seção porque não precisamos dela. Clique aqui para criar uma nova seção e descobrir a altura da seção. Em seguida, copiarei o texto e, aqui, clique neste ícone de adição para adicionar um título e adicionar um texto de título como este, depois vá para o centro de alinhamento de estilo e tipografia será o cabeçalho e a cor do texto será essa cor Agora, novamente, clico no contêiner. No contêiner, alterarei conteúdo B para a largura total e a direção será a coluna, a vertical, o item de alinhamento será o centro Ok. Na verdade, vamos criar o conteúdo com a caixa de tarefas e, em Avançar, clique aqui e adicione a margem superior a 120. Ok. Agora, aqui, vamos ver o tamanho intermediário. O tamanho intermediário é 60, então vamos ao design do wordpress, e aqui vou selecionar o contêiner. Contêiner, vou adicionar um 60 como este. Agora, o que temos que adicionar é esta seção. Para adicionar esse carrossel, podemos usar o loop de carrossel Vamos adicionar um loop de carrossel. Para fazer isso, vou pesquisar loop aqui e quando pesquisamos o loop, obtemos o item loop arousel Eu apenas adiciono assim. Esse carrossel de loop é uma grade de loop que permite que os modelos ou os elementos rolem de um slide para outro. Podemos criar um modelo e, usando essas consultas, podemos fornecer elementos ou dados que queremos adicionar a esse carrossel ou adicionar a esse os modelos ou os elementos rolem de um slide para outro. Podemos criar um modelo e, usando essas consultas, podemos fornecer elementos ou dados que queremos adicionar a esse carrossel ou adicionar a esse loop. Vamos fazer isso. Primeiro, precisamos criar um modelo. Para fazer isso, clicarei em criar um modelo e aqui clicarei em OK. Agora, se você conferir aqui, criamos o item elemento loop, que é nosso modelo. Aqui, vou pesquisar o item 370 do loop de elementos. Aqui, vamos alterar esses detalhes e ver o que acontecerá primeiro Definirei o número de slides como três e exibirei, que significa quantos lados queremos mostrar aqui, serão três e o lado em Scroll será um e aqui terá a mesma altura. Vamos até o Query. Na consulta, a alteração é feita aos nossos fornecedores e , em seguida, vamos clicar em publicar e ver se podemos editá-la ou não. Aqui, clicarei em Editar modelo novamente. Ok. Volte. Ok, agora vou para o modelo e aqui podemos editar os detalhes do modelo. Acho que há algo errado com meu navegador, então vamos fazer isso de novo para que você entenda claramente o que fiz primeiro Vou até a página inicial do site e clicarei em Editar com elemento E aqui, vamos rolar até aqui. Ok. Agora vou selecionar esse guarda-sol circular, e aqui seleciono o tipo de modelo conforme colocado e crio um modelo Em seguida, adiciono o número de telas deslizadas como três e as telas deslizantes para baixo como três Se eu fizer com que seja como dois, só vou ver dois deles, mas precisamos de três assim. Então eu disse que a consulta como fonte será nossos provedores e esses detalhes serão padrão e, se quisermos, podemos mudar Ok. Agora vamos editar o modelo. Então, para fazer isso, eu clico em Editar modelo. Ok. Agora, aqui, eu posso editar o modelo. Então, primeiro, clicarei aqui e verificarei os detalhes, depois clicarei em adicionar elemento. Eu adiciono um elemento, temos o título da postagem , o conteúdo da postagem, o recurso, as informações da postagem da imagem, mas não precisamos de nenhuma delas. Então eu adiciono a caixa de texto assim, e então você verá as tags dinâmicas Basta clicar e clicar nele, você pode ver detalhes como adicionar data de pausa, ID de força e coisas assim, mas precisamos adicionar o nome do membro da equipe aqui Acabei de clicar neste campo ACF. Ok. Agora, se olharmos aqui , primeiro, temos esse papel. Vamos adicionar o rolo primeiro. Aqui vou clicar neste campo ACF e clicar aqui. Então aqui temos o papel. Acabei de clicar em Croll on Advance, não precisamos adicionar nada antes ou depois de precisarmos criar uma função Agora, o problema é que não vemos nenhuma informação, mas podemos acessar esse conjunto de itens de loop e aqui podemos selecionar a visualização definida e alterar essa postagem ou item específico, configurá-lo como nosso provedor e clicar em Aplicar e visualizar desta forma. Quando eu fizer isso, vai aparecer assim. Primeiro, vamos escolher esse espaço em questão para fazer isso, eu clico nesse contêiner e aqui vamos avançar, torná-los como zero, assim. Quando fazemos isso, simplesmente nos livramos desse espaço E. Agora eu clico neste título que eu já adicionei e aqui vou para Estile e na tipografia, vou mudar a tipografia vou mudar a Vamos ver, é pi 20, vamos ver nosso parágrafo, é pit 20 regular. Agora vou conferir aqui. O nome é título da pose, mas não precisamos do título da pose aqui. Em vez disso, precisamos do nome do provedor. Se acessarmos nossa seção de provedores e clicarmos em AD, você verá que adicionamos o título da postagem como nome do provedor. Além disso, criamos o nome do nosso provedor no campo personalizado avançado, então vou usar esse nome em vez de usar o título desta postagem. Clique aqui e remova-o, clique com o botão direito do mouse e clique em Con Dilete agora aqui eu vou pegar o título como este e aqui, clique em tags dinâmicas e Affeld, em seguida clique no ACFfeld e a chave será Esses campos de tag dinâmicos estão disponíveis apenas no elemento pro. Esse é um elemento do recurso profissional, qual podemos criar um modelo ou criar um único modelo e configurá-lo para a seção Pago. Em seguida, os dados que solicitamos no campo dinâmico serão adicionados automaticamente. Como exemplo aqui, você acha que precisamos adicionar o título da força. Podemos simplesmente clicar nesse campo dinâmico e clicar em forçar um título como este e eu o duplicarei Vamos ver se queremos adicionar hora ou hora da postagem, a hora da postagem aparecerá assim e, se quisermos a data da postagem, a data da postagem será exibida assim. Só precisamos definir essa tag dinâmica de uma vez o banco de dados se conectará esse campo e nos fornecerá detalhes. Agora vamos deletar isso. Aqui definimos o nome, não o título. Vamos definir o Affeld e clicar aqui, clicar no nome do valor agregado ir para Estyle Vamos ver os detalhes. É 25, acho que está diminuindo. Fábrica C, 25 normais e aqui temos os mesmos detalhes. Agora temos que mudar a cor do texto para essa cor preta. Antes de alterarmos o espaçamento e outras coisas, vamos adicionar os detalhes aqui Em seguida, temos que adicionar uma breve descrição. Para adicionar, vou clicar no elemento e vamos pesquisar algo parecido. Vamos adicionar outro título e, desta vez, a tag STML será P ou parágrafo Um ladrilho, vamos definir a tipografia como parágrafo e a cor é essa cor preta Agora, no conteúdo, clique na tag dinâmica e, aqui, role para baixo, clique no campo ACF E clique aqui, a chave deve ser uma breve descrição como esta. Ok. Agora temos que adicionar a imagem. Vamos adicionar a imagem. Para adicionar a imagem, eu clico aqui e busco a imagem. Ok, aqui temos a imagem. Vou adicionar a imagem na parte superior e definir a resolução para cair e clicar nessa tag dinâmica. Na verdade, clique nesta tag dinâmica e aqui no campo de imagem ACF, clique aqui, selecione a foto da cabeça e a imagem adicionada como esta resolução de imagem estará completa, sem legenda Links. Ok. Agora, o que temos que adicionar é esse perfil de visualização. Por enquanto, vamos adicionar apenas um botão simples para ver o perfil. Vou pesquisar BTN ou botão de botão e botão Rager como este e ir para Estyle em Estyle Vamos ver os detalhes. Já estamos neste botão aqui. Basta copiar os detalhes do botão daqui. Vamos fazer isso. Ou vamos criar isso novamente. Para fazer isso, vá para Estilo e na tipografia, selecione o botão e, em cor, basta clicar em Cor do contexto e defini-la como primária e como Na verdade, não precisamos de nenhum plano de fundo e sombra do quadro que não seja da caixa deve ser assim e ainda temos o plano de fundo. Agora não temos nenhum histórico. Agora, aqui, eu removo os preenchimentos e, com antecedência, removerei os preenchimentos, que estarão cheios, tornarei o conteúdo padrão, o tipo é padrão e temos que adicionar Clique na biblioteca de ícones aqui, vamos verificar o ícone. Na verdade, precisamos desse ícone. Aqui temos o ícone. Clique nele e clique em Inserir e a posição do ícone será N. Ok. Agora, aqui temos um problema. Temos um espaçamento enorme e vamos ver o espaçamento dos ícones. É o espaçamento e o estilo do ícone Z, a posição à esquerda para remover o espaçamento, podemos adicionar margem negativa 110. Como usar o carrossel de loop - Parte 01: No elemento de, temos um recurso interessante chamado loop carusel. Vamos pesquisar o loop aqui, e aqui temos o loop carusel Com esse carrossel de loop, podemos adicionar conteúdos dinâmicos, como pausar campos personalizados, pausar tipos de pose personalizados que já criamos usando campos personalizados avançados, conectar e, se você usa comércio eletrônico, pode adicionar A vantagem disso é que só precisamos criar o design do arusel por uma vez e, em seguida, só precisamos criar conteúdo no painel do WordPress e eles se adaptarão automaticamente ao design que criamos usando o loop Vamos nos aprofundar e fazer alguns exercícios com o post. Primeiro, vou ao painel do WordPress do nosso site e vamos criar uma postagem. Eu vou para Earl Post. Atualmente não temos nenhuma postagem, então vou me esforçar para gerar alguma postagem. Então, aqui vou adicionar MPMP Você se lembra que, em nossas aulas anteriores, falamos sobre solicitações de IA, então eu apenas uso essas instruções, e aqui vou atribuir função de médico clínico que tem redação de artigos, experiência em redação e tarefas Quero que você gere dez artigos, e Não precisamos desse, e aqui geramos dez artigos, geramos dez artigos. Ok, esse prompt funciona, então eu pressiono End e vamos ver que tipo de artigos recebemos Ok, acabei de gerar a estrutura do artigo ou os dados para o artigo. Não precisamos disso, então eu paro e vou digitar Eu preciso artigo real pelo menos com 500 Ok, vamos ver. Vamos ver. Isso é apenas um exemplo, então não tente fazer isso. Na verdade, esses são artigos muito pequenos, mas isso funcionará para Beckley Então, aqui, devo dizer que preciso de dez artigos reais. Digamos que sejam dez artigos reais , pelo menos 500 como este. Quando o gerarmos dessa forma, obteremos dez artigos reais. Ok, acabamos de gerar dez artigos como esse, e agora o que precisamos fazer é adicioná-los ao site. Vamos ao site e aqui vou postar e clicar em EL Post. Atualmente, não temos nenhum artigo ou postagem, então clico em Nova postagem e, aqui, vamos copiar esse título e colar o título aqui. Depois vou copiar esse conteúdo e colar aqui. Na verdade, temos que melhorar isso. Na verdade, e se dissermos ao Deepsek para gerar esse conteúdo para o editor de blocos do Wordpress Então, vamos dizer, você pode gerar esse conteúdo para o editor de blocos do Wordpress? Então, eu posso editar sem precisar cavar e vamos copiar o conteúdo. Vamos ver o que vai acontecer. Eu gero com o conteúdo DML, e aqui vou remover todo esse conteúdo aqui DML Temos uma tag DML, então podemos simplesmente adicionar esse conteúdo dentro dessa tag HTML Pode levar algum tempo, mas vamos esperar para ver se funcionou ou não. Ok, aqui temos que dizer que o nome da clínica deve ser família JB Vamos contar isso na próxima parte. Então, por enquanto, eu apenas copio o código HTML, colo o código HTML e clico em pré-visualizar, e ele ficará assim. E aqui, vamos mudar isso para J. Não podemos mudar assim Eu tenho que ir ao TML e encontrar essa parte. Sim, sim, como a família JV Clei. Ok, agora está tudo bem, e agora eu clico em Compostar e aqui temos que definir a imagem em destaque Para criar uma imagem em destaque, usarei o Canva e, não se preocupe, usarei todas as imagens e os artigos na seção de recursos Então, agora estou aqui no Canva, clico em personalizar e vamos criar 600 por 400 como se fosse a imagem principal E aqui, vamos copiar o título. Vamos copiar como se fosse a saúde da família. Não, não aquela, aqui, aqui. Sim, saúde da família, vá até os elementos , ande assim e vá às fotos. E nas fotos, temos esse tipo de foto. Vamos torná-lo maior. E você não precisa desse. Em seguida, clico em C Share, clico em Download, seleciono JPG de teste e clico em Download. Ok, agora vou ao site, clico em Conceito de imagem em destaque e vamos adicionar a imagem baixada desta forma. Em seguida, clique em Conceito de imagem em destaque. E vamos clicar em Publicar Publicar. E agora eu posso ver o primeiro. Clique com o botão direito do mouse aqui e clique em Abrir em uma nova janela. Aqui está nossa postagem e, atualmente , ela não está aparecendo muito bem porque não criamos um modelo para nosso artigo de blog, um único artigo de blog, faremos isso em aulas futuras, mas, por enquanto, isso funcionará. Agora eu clico em Nova postagem e crio a nova postagem para a segunda postagem. Aqui está a segunda força, copie o quarto título, e isso não é bom para escrever um artigo real. Isso é apenas para aprender sobre o carrossel de loops e esta postagem pode nos ajudar a criar nossa seção de página de blog. Vamos. E aqui vou copiar o conteúdo. Digamos, você pode gerar o conteúdo para o editor de blog Wordpress? Na verdade, vamos mudar isso e dizer: você pode gerar cerca de você pode gerar cerca conteúdo de postagem em cerca de dez postagens e dez postagens, o conteúdo para adicionar o editor de blog do WordPress, que eu possa adicioná-lo sem edição. Além disso, o nome da clínica é JB Family Clinic, e vamos ver o que vai acontecer Ok, não está funcionando, então agora vou copiar esse comando e ir para o GPT No Ja GPT, adicionarei esse comando e, nos códigos duplos, adicionarei a pose Então, aqui, não precisamos do primeiro. Precisamos deles daqui. Vamos ver. O post, cinco, seis, sete, oito, nove, dez. Ok, agora coloque esses conteúdos, e vamos ver se isso não, não, não, isso não está funcionando. Devo dizer que acima de nove postagens de conteúdo para o editor tress em DM em HTML, abaixo de 94 Ok, agora clico em consentimento, e agora ele deve ser gerado em SDML. Veremos: Ok, não vai funcionar Ok, ele é gerado no formato SDML. Não precisamos desse cabeçalho mas precisamos apenas do texto daqui, então vamos lá, o artigo foi gerado e agora eu só preciso adicioná-los. Este é o segundo artigo. Acho que não precisamos disso e precisamos disso também, e aqui temos o título, e aqui vou apenas copiar esse conteúdo para esta tag de parágrafo para este parágrafo. E aqui, vamos adicioná-lo. Não, não, clique aqui e pesquise THDM e escreva assim Na pré-visualização, ficará assim. Ok, então vá para postar no post. Temos que adicionar a imagem em destaque e vamos copiá-la e fazer o download da vacinação infantil. Clique no recurso Concept Dimage, clique aqui e adicione assim Em seguida, clique no recurso Conceitual Dimag e clique em publicar, publicar Ok, agora clique em adicionar nova postagem, e aqui temos a terceira postagem, copie este título e aqui temos a força real. Eu apenas copio como esta chave. Agora, aqui, HTML, HTML personalizado, cole, clique em Visualizar, parece bom, e aqui temos que adicionar o estresse como família. Vamos gerar nossa força. Vamos ver Então vamos clicar aqui para definir a imagem em destaque, e eu continuarei criando a postagem e voltaremos para 111. Como usar o carrossel de loop — parte 02: Olá, pessoal. Agora temos o post e vamos começar a aprender sobre os carros circulares. Então, o que precisamos fazer é criar uma nova página, ir para as páginas ER e clicar em AdnwPage e aqui no Adtitle adicionar um título Vamos chamá-lo de Blog. Então, isso é só para testar. Talvez possamos usar esta página para o site real. Então, vamos publicá-lo e tudo bem, agora eu clico em Editar com o elemento de tudo certo, vou clicar aqui e clicar na caixa Complexa, depois adicionar esse contêiner de coluna direta e aqui vou pesquisar Loop Carsel Aqui temos o loop Carsel, vou apenas adicioná-lo e, quando adiciono isso, posso ver esse tipo de design Aqui temos a opção de criar modelo ou, se já tivermos um modelo, podemos pesquisá-lo aqui, mas nesse caso, precisamos criar um novo modelo. Nosso objetivo é mostrar essa postagem nesta página de bloqueio. Vou apenas clicar em criar modelo e clicar em salvar, aqui está o nosso modelo e, se passarmos o mouse sobre aqui, podemos ver o nome do modelo Agora, o que posso fazer é adicionar itens a esta seção. Primeiro, vamos criar um contêiner do tipo coluna de direção, e eu clico aqui, então, com antecedência, eu tenho que remover a margem e o bloco, depois no layout, vou clicar aqui, então aqui podemos adicionar o elemento. Por exemplo, vamos adicionar uma imagem e vamos adicioná-la assim. Então, aqui temos uma imagem e, no elemento pro, temos tags dinâmicas. Usando essas tags dinâmicas, podemos adicionar dados personalizados. Por exemplo, se adicionarmos diretamente a imagem daqui, vamos adicionar essa imagem da nossa caixa de mídia e ela permanecerá a mesma. Mas se clicarmos aqui na tag dinâmica e aqui, podemos dizer imagens. Como exemplo, vamos definir o recurso Dimage e, quando definirmos o recurso Dimage, ele será dinâmico Se eu explicar mais, posso clicar em Salvar e voltar e aqui temos a postagem em destaque Dimage Você se lembra que nós já criamos a postagem e colocamos toda essa postagem aqui? Eu clico em Editar modelo e agora clico em Editar modelo. Então aqui, clique em Editar e vamos remover essa tag de imagem em destaque e basta adicionar esta imagem da seção de mídia e clicar em Salvar e voltar aqui, só vemos essa imagem estática. Esse é o poder da tag dinâmica e, na consulta, podemos definir o tipo de dados que queremos obter aqui. Então, no futuro, criaremos nossa seção de fornecedores e seção de revisão usando esses carros circulares para criá-las Usaremos campos personalizados avançados. Quando criamos tipos de pose usando campos personalizados avançados, podemos selecionar a fonte como esse tipo de pose. Atualmente, a fonte é postal e aqui podemos definir a data que queremos adicionar, mas vou fazer isso como e podemos definir o pedido por detalhes e aqui vou definir o pedido por data e o pedido será DESC, e temos dois tipos de pedido DESC significa curto prazo decrescente, o que significa que, se ordenarmos por data, podemos ver a postagem mais recente até a postagem mais antiga Se o definirmos como ASC, podemos ver primeiro na postagem mais antiga e a última na última postagem Vamos torná-lo como DESC e bom. Agora, o que precisamos fazer é criar o modelo. Agora eu clico em Editar modelo e clico em San Okay. Agora, aqui, eu clico neste ícone de lápis, e acho que você entende e agora sabe sobre as tags dinâmicas e vamos remover essa imagem desta forma. Agora, o que temos que adicionar é uma postagem. Aqui temos muitos elementos. Se quisermos, podemos personalizar elementos. Então, vamos adicionar o título e, no título, vá para Estilo, clique no título como subdin e a cor E agora, no conteúdo, clicarei nessa tag dinâmica, e aqui posso ver as tags Earl que adicionamos na postagem Então, se eu clicar no título da postagem, obteremos o título da postagem que criamos. Agora, o que podemos fazer é clicar em adicionar elemento e adicionar a imagem em destaque. Aqui, vou adicionar a imagem aqui. Então, como fiz antes, clique aqui e na postagem, selecione a imagem em destaque e, por enquanto, manterei o estilo padrão aqui. Se eu clicar aqui e adicionar outro título, aqui podemos adicionar a data da postagem do especialista como esta, então aqui vamos mudar isso para botão e cor voltará e eu clicarei em Na verdade, clico na estrutura e aqui no contêiner, adicionarei o Roger pass. Vamos adicionar algo a isso. Agora vamos ver se queremos adicionar link, vou pesquisar aqui Link e talvez botão. Vamos adicionar um botão como este no botão ao texto, vou pesquisar como ler mais e em Link, clico na tag dinâmica, e aqui podemos selecionar o URL da postagem. E na opção Link, posso clicar em Abrir em nova janela. E agora, se eu clicar em Salvar e voltar, podemos ver nossa postagem assim. Se eu clicar na página dos EUA, e aqui está nossa postagem. Então, se eu clicar neste botão Leia mais, ele será redirecionado para a página de postagem Portanto, atualmente não criamos a página de postagem, mas se você ver a URL, apenas redirecionamos para a página de postagem Então, agora vou clicar em Editar modelo novamente. Aqui vou, no contêiner, removerei o título da imagem e o botão como este Agora, o que podemos fazer é criar elementos pré-construídos. Se eu pesquisar aqui após a chamada à ação, podemos obter esse tipo de widget e aqui, vamos definir a capa como clássica e definir a posição para a esquerda e aqui podemos definir a posição Mas, por enquanto, vamos continuar assim e, usando tags dinâmicas, podemos adicionar conteúdo dinâmico. Se eu clicar aqui e clicar na tag dinâmica, defina a imagem em destaque imagem em destaque ficará assim. No conteúdo, podemos adicionar o título como título e descrição da pausa Na verdade, não precisamos da descrição, então eu a removerei e o link será URL da postagem como este e clicarei em abrir nova janela. Agora, o que podemos fazer é nesse estilo, talvez mudemos a capa para a capa e ela ficará muito melhor . Nesse estilo, podemos definir o preenchimento, então vamos adicionar o preenchimento como 2020, um pouco maior, Dez serão trabalhos e nenhum conteúdo, vamos mudar a tipografia para su pad em e a cor do título será branca, e também temos o botão Vamos adicionar o botão 12 à esquerda e à direita, e a cor do texto do botão será branca. Na tipografia, defina a tipografia do botão, defina a cor de fundo como essa cor azul E na caixa, podemos adicionar altura conforme quisermos. Talvez vamos adicionar altura como 450. No efeito Her, podemos adicionar cores de sobreposição. Então, vamos adicionar a cor de sobreposição como preto. Aqui, altere a opacidade para assim. OK. Até aí, tudo bem , vou clicar em Salvar e em Preto. Quando clico em Salvar e Voltar, aqui podemos ver nossa postagem como esta. E eu apenas clico na caixa circular e aqui podemos alterar o número de slides Então, se fizermos com que seja como quatro, teremos apenas quatro controles deslizantes e lado por página Vamos fazer com que sejam dois , só ficará assim. E navegação, podemos esconder a seta se quisermos assim, mas eu quero mostrar as setas no estilo, podemos ir para a navegação e podemos alterar o tamanho do ícone desta forma e vamos mudar a cor para azul e a posição, vamos sair Na paginação, podemos adicionar paginação como essa e a cor será azul. Aqui está o poder das tags dinâmicas bca usel e das tags dinâmicas bca usel Se eu for ver as páginas, a página ficará assim e podemos personalizá-la como quisermos. Mas, por enquanto, este será um bom exemplo de como entender o carsel de loop no futuro. Em aulas futuras, aprenderemos e usaremos muito mais tags dinâmicas de carros de circuito e campos personalizados usando um plugue de campo personalizado avançado 112. Crie nossa seção de provedor — parte 02: OK. Agora, quando comparamos esse botão com o botão original, o ícone é um pouco maior. Como fizemos aqui, temos que usar CSS para aumentar o ícone. Mas o problema está neste modelo, temos botões repetidos. Aqui, temos apenas esse botão, mas agora temos uma situação diferente. Vamos lidar com isso. Primeiro, clicarei nesse botão e, como disse antes, selecionamos um botão, para que possamos criar um único código CSS e disponibilizá-lo para A desse botão. Para fazer isso, podemos usar a classe CSS. Aqui, adicionarei o nome da classe CSS como visualizar perfil, visualizar perfil, TN e, em seguida, clicar em Publicar para salvá-lo E agora temos o painel do WordPress. Para adicionar esse código CSS, posso acessar a aparência e clicar em Personalizar em Personalizar. Posso clicar em CSS adicional. E aqui eu posso adicionar o código CSS. Então, aqui podemos ver o design. Mesmo que não o tenhamos concluído, podemos vê-lo daqui. Ok, agora temos que aumentar esse botão, então, para fazer isso, vou colar o código CSS, o código da classe CSS e adicionar ponto porque usamos ponto para armazenar as classes CSS em cache e não vou me aprofundar muito sobre CSS. Por enquanto, vou apenas adicionar esse código para tornar esse ícone maior. Se formos para esta página inicial, vamos para a página inicial e aqui, clique em Editar com elemento e desça até aqui, depois clique nesta Edição e se formos para Avançar no Avanço, temos ESS personalizado e aqui temos o código que usamos para aumentar esse botão Vou apenas copiá-lo. Vamos copiar o conteúdo e ir para a personalização e edição aqui A partir daqui, preciso apenas dessa seção porque esse ID, nós não precisamos dele, vou apenas criar essa classe CSS assim e clicar na segunda página para adicionar esse conteúdo e, quando fizermos isso, nosso ícone ficará maior. Se eu removê-lo, é pequeno. Se eu adicionar, é maior. Agora eu clico em publicar e aqui vou clicar em Atualizar. Preciso atualizá-lo novamente porque o design não carregou bem. O que está errado? O site não está logado como queremos. Agora eu clico em editar o elemento ou acho que é um problema de cache, mas vamos ver, é cache. Agora, aqui, novamente, clico em Editar modelo para editá-lo e aqui podemos editá-lo aqui. Quando eu edito isso, isso afetará a seção. Se formos ao WP Admin e acessarmos o painel e aqui nos modelos, clico em Salvar modelos em salvar modelos, clico em publicado e aqui temos esse modelo que estamos editando Atualmente, seu nome é item de loop elementar. Vamos clicar em Editar e alterar esse nome para algo parecido nossos provedores dedicados e clicar em Atualizar. Podemos clicar aqui para editá-lo e editá-lo a partir daqui. Curta isso ou podemos clicar aqui para reprimir este e editá-lo aqui Editar a partir do site real é a melhor maneira, pois assim podemos entender claramente como será a aparência do design na seção de heróis. Novamente, tivemos esse problema, então vamos atualizá-lo e clicar em Editar com elemento ou rolar para baixo e, novamente, clicar em Editar Certo. Agora, aqui o que temos que adicionar é o espaçamento I. Se verificarmos o espaçamento no porco Mateen Brad, dois L. Vamos somar o Se eu clicar aqui, você pode ver que é um contêiner. Se clicarmos aqui e adicionarmos bruto como, deve ficar assim e vamos ver, são dois e é item como dois. OK. Agora, o que temos que fazer é adicionar os rádios desse canto e a sombra. Vamos adicioná-los. Para adicioná-los, isole o contêiner e, no contêiner, vou para Estyle on Estyle Clique em Obarder e na caixa de sombra. Vamos adicionar a sombra da caixa. Então, vamos copiar os detalhes da sombra da caixa daqui. Clique aqui, a cor é essa, então clique aqui para obter as cores CSS/ORGBA. Clique aqui A cor RGBA é essa e adicione-a assim. Agora, os borrões são 15 e X e Y zero. Vamos clicar aqui. Blurrinus é 15 e outros são zero. OK. Agora temos que adicionar cantos de raio Na verdade, o canto do raio deve ser adicionado para fazer isso, aqui temos o raio da borda Se eu clicar nesta seção e verificar o raio da borda aqui, é 20 Então, vamos fazer esse rádio como 20, veremos as mudanças. Eu adicionei, no entanto, não o colocamos na imagem para levá-lo à imagem, clico em editar na imagem e vou para Estyle No Estyle, podemos adicionar rádios de borda como el, mas apenas 20, não 20, mas apenas temos o raio da borda superior Então, vamos adicioná-lo. Portanto, não temos rádios corporais como 20 na parte inferior da imagem Então, vamos clicar aqui e no topo, fazer com que seja 20 e o top 20 para a direita, o que na esquerda será 20 e não na parte inferior, só precisamos adicionar os dez primeiros, à direita como 20 e bom, então temos que adicionar o espaço aqui, é 220. Vamos adicionar espaço inferior ou vamos adicionar esse preenchimento de contêiner A fenda do contêiner é de 20? Sim, é soltar o recipiente na parte inferior acolchoada em 20. OK. Agora temos que encontrar o tamanho intermediário. O tamanho intermediário é 20. Para adicioná-lo, temos que ir ao loop carasel Vou publicá-lo aqui e clicar em Salvar e Agora vai ficar assim, mas não parece bom. Temos que fazer a sombra projetada. Mas, por enquanto, vamos nos concentrar no tamanho intermediário para fazer isso, escolha o estilo e a diferença entre os tamanhos deve ser grande, deveria ser. OK. E antes de corrigirmos o problema da sombra projetada, vamos adicionar estilo à navegação e outras coisas. Então, na navegação, clique aqui. Ok, é com altura ts 220, então vamos fazer com teste de altura, 20, para fazer isso. Vamos para a navegação e, na verdade, não temos navegações para a esquerda e para a direita, vamos removê-la primeiro Para removê-los, vou para o conteúdo e na navegação, não precisamos mostrar setas e na geração de páginas, temos pontos e vamos para Estils em Estes, temos que ir para a geração de páginas, não a navegação e o espaço entre, será, pelo que me lembro, 20 anos e o tamanho é 20 por 20, o tamanho também será 20 em 2021, é 20 e a cor é essa cor primária não precisamos mostrar setas e na geração de páginas, temos pontos e vamos para Estils em Estes, temos que ir para a geração de páginas, não a navegação e o espaço entre, será, pelo que me lembro, são 20 anos e o tamanho é 20 por 20, o tamanho também será 20 em 2021, é 20 e a cor é essa cor primária e obtemos automaticamente a cor padrão como essa cor azul clara. Na cor O, vou usá-la como acento, porque não precisamos realmente adicionar a cor primária como cor de foco. Aqui temos um problema. Temos essa cor azul clara, mas não precisamos que seja azul claro, mas não há opção para corrigi-la, mas vamos manter essa cor assim por enquanto e vamos adicionar isso entre o espaçamento desse controle deslizante e a paginação, é 30, então vamos fazer com que seja 30 OK. Agora vou clicar em publicar e até agora tudo bem. Mas aqui temos muitos problemas. Vamos consertá-los um por um. 113. Crie nossa seção de provedor — parte 03: Olá, pessoal. Vamos corrigir os problemas que temos com essa seção de provedores dedicados. Então, para fazer isso, clicarei em Editar modelo e, quando entrarmos aqui, podemos ver claramente que essa imagem não se encaixa bem. Então, primeiro, clico aqui e seleciono a imagem, depois vou para Avançar, vou definir o tamanho como crescer e agora está exatamente assim. Agora eu posso publicá-lo e vamos ver no design e no design , ficará assim. Então, como segunda edição, podemos ver aqui que temos um preenchimento igual a zero, mas precisamos de um pouco de preenchimento para o lado esquerdo e direito Então, vamos ver se eu vou para o arquivo Figma e, no Figma, vamos ver o tamanho do bloco Eu seleciono um desses textos e pressiono todo o preenchimento, então vamos adicionar seis como preenchimento Agora, se adicionarmos preenchimento a esse contêiner, eu vou avançar e adiciono padin direito como seis e o padna esquerdo seis, você pode ver que a imagem também é Não podemos adicionar um padrão como esse. Em vez de adicionar um padrão como esse, precisamos adicionar preenchimento para os campos individuais Então aqui selecione o campo, vá para avançar e adicione Padin seis, deixe um seis Vamos fazer o mesmo seis à direita, seis à esquerda e para o botão. Agora eu clico em publicar e vamos ver o design. Reprima o design e agora ele parece perfeito. Agora, aqui temos um problema de alinhamento, vamos corrigir esse problema de alinhamento. Acabei de encontrar o problema. Se formos ao modelo e clicarmos em Imagem na imagem, dizemos tamanho à medida que cresce. Eu acabei de removê-lo. Quando eu o removo, ele está apenas consertado, e só aqui precisamos adicionar alinhamento automático. Em seguida, clico em salvar uma sacola e clico aqui, defino a altura igual. E agora, se verificarmos o design, ele ficará perfeito assim. 114. Crie nossa seção de provedor — parte 04: E agora temos outro problema. Se você verificar cuidadosamente os lados esquerdo e direito, não vemos a sombra escura, então temos que corrigi-la. Encontrei uma solução para esse problema consultando fóruns e pesquisando no Google sobre o problema. No Google, eu apenas pesquiso sombra projetada ou não mostrando no elemento ou no resultado do Luka E aqui está o resultado que encontrei neste fórum do Gita, eu tenho a solução Então, vamos aplicar essa solução. E como eu disse antes, você terá que fazer pesquisa no Google ou, se tiver alguma dúvida, basta pesquisar no Google. Se você conseguir isso agora, provavelmente outra pessoa o entenderá antes de você. Agora vamos começar o trabalho. Primeiro, tenho que remover a sombra atual, sombra projetada e o rádio de canto. Eu seleciono o contêiner e, no contêiner, temos que ir para E dies na borda E dies, tornar a borda zero e alterar a sombra da caixa para voltar ao padrão. Ok, agora eu clico em Publicar e agora, se virmos o design, ele não terá nenhuma sombra projetada. Em nossa imagem, ainda temos os rádios de canto da imagem. Se formos aqui e usarmos o estilo de imagem aqui, teremos rádios Border como na imagem Por enquanto, vamos continuar assim. E agora eu tenho que copiar esse código. Basta copiá-lo aqui e, na verdade, você pode ler isso, mas eu ainda não vou ler isso e esse trabalho com o design. Agora vou avançar com o avanço deste contêiner. O contêiner vai para Advance e aqui no ESS personalizado, no CSS assim. Agora eu clico em publicar por enquanto e vamos ver isso no design. Se verificarmos o design, agora podemos ver claramente a sombra esquerda e direita. Agora vamos corrigir isso de acordo com nosso design. Primeiro, temos que remover esse espaçamento. Vamos aqui. Se virmos o CSS, temos esse preenchimento e não precisamos dele Eu apenas o removo assim. Agora, se publicarmos e vermos o design, ele ficará assim. Na verdade, temos que adicionar o preenchimento. Vou adicionar o preenchimento como 20 por 20 e clicar em publicar. E aqui, se verificarmos o design, ficará assim. Na verdade, não precisamos do preenchimento superior, então vou remover o preenchimento superior e aqui o canto superior esquerdo, inferior Eu acho que o valor é, então vamos ver novamente o design, e agora ele ficará assim. Então aqui temos que mudar a sombra projetada. Para mudar a sombra projetada, temos que encontrar nossa sombra projetada. Então, irei ao nosso design rigma e selecionarei esta seção de fornecedor único E aqui temos a sombra projetada. E se eu clicar nesse Dev moot, posso ver o estilo CSS, e aqui temos o estilo box shadow Eu apenas copio. Vamos substituir essa sombra de caixa pela nossa sombra de caixa. Essa especificação mantém essa tag importante aqui e vamos publicar e ver o design Ok. Agora, o que temos que fazer é, na verdade adicionar top collins 20 e bottom B 2015 50. E vamos publicá-lo e vamos criar. Ok, a esquerda e a direita são 15 imitam nenhuma aqui, superior, direita, inferior, esquerda, ainda muito fraca, talvez dez sejam os produtos de 2010 E espero que o tempo esteja bom. Ok, até agora tudo bem. E agora temos que adicionar cantos arredondados. Adicionar cantos arredondados é muito fácil porque já tiramos o estilo daqui, copie esta etiqueta de estilo boat reduce 20 e coloque-a aqui assim. Vamos isso. Ok, agora está tudo bem e venha aqui e reprima o design. Quando eu reprimir o design, ele ficará assim e bem parecido com o nosso design Mas o problema é que temos essa lacuna. Então, vamos tentar corrigir essa lacuna. De acordo com o design anterior, apenas adicionamos 20 como margem, removemos porque adicionamos 20 como preenchimento na alfândega e eu atualizarei assim e agora diz perfeitamente: Aqui temos um problema com esse botão de visualização de perfil porque aqui está mais baixo e aqui está um pouco acima. Então, vou mantê-lo assim porque pode ser necessário CSS para corrigi-lo. Ok, agora o que teremos que fazer é ir aqui e clicar em Ponce e, em seguida, temos que ajustar o aqui e, na consulta, não na consulta sobre o layout, temos que ajustar o número de slides Atualmente, acho que temos cinco, temos um, 25 deles, cinco e clique em publicar. E aqui temos muita geração de páginas. Ok, para corrigir a inação da página, podemos acessar o layout e rolar slides na rolagem. Atualmente, temos um. Se definirmos como dois, podemos corrigi-lo assim, e agora vamos rolar dois slides ao mesmo tempo, assim. Ok, agora clique em C publish e vamos ao site e veja o design. Ok, vai ficar assim. Temos um problema aqui. Se verificarmos cuidadosamente este pacote, veremos o mesmo resultado repetidamente. Veja, agora esse médico está aqui e ainda assim, se verificarmos agora, os médicos ainda estão aqui. Então, para corrigir isso, clique aqui em editar Carsel e o problema é que atualmente temos apenas cinco fornecedores, mas decidimos rolar como dois Vamos fazer isso como três e, quando definirmos como três, funcionará bem. Vê? O motivo é que não temos detalhes de fornecedores suficientes para cumprir. Agora Earl está bem, e agora, se eu atualizar aqui, tudo funcionará bem sem nenhuma. Ok, experimente essas opções e obtenha o melhor resultado Se fizermos consultas, podemos definir o pedido como data e, se o definirmos como A, organizar os itens de menores para maiores, que significa que ele os mostrará primeiro e os adicionaremos primeiro Agora vou publicar e agora, se eu atualizar, adicionamos essa médica Sarah Thompson como o primeiro valor em nosso provedor, assim como no FIC Maple, e ela aparecerá corretamente porque alteramos no aztino Agora, acabamos de concluir nossa seção dedicada de provedores, e aqui podemos adicionar mais médicos ou mais provedores e torná-la melhor. Em seguida, temos que criar essa seção de contato. Também aqui temos que adicionar um pop-up facia a este link de visualização do perfil No futuro, nós também os faremos. 115. Seção "Entre em contato com o design" — parte 01: Olá, pessoal. Agora temos que projetar esta seção. Vamos começar. Primeiro, clicarei na seção e verificarei a altura. São 600. Vamos aqui e clicar no ícone de adição, selecionar Flexbox e flexbox tight será a coluna de direção, e aqui a altura média será seis, não 300, deve ser 600 e podemos alterá-la depois de projetarmos Ok, e a direção será horizontal bruta, e aqui, temos que adicionar esta seção. Primeiro, temos que adicionar o cabeçalho, e antes de adicionarmos o cabeçalho, temos que dividir essa única seção em duas, como fizemos aqui. Portanto, se verificarmos o contêiner, teremos um contêiner diferente nesta seção. Vamos fazer o mesmo. Então, primeiro, terei que clicar aqui para adicionar um elemento e clicar no contêiner e rastrear e soltar o contêiner desta forma. E então eu adiciono Dance e removo a esquerda e a direita desse contêiner. Então o que eu tenho que fazer é no layout, a direção será a coluna, e agora eu clico aqui para adicionar um título como este Copie o texto do título daqui, cole o texto aqui e adicione para quebrar a linha, depois vá para Estilo e a tipografia será o cabeçalho, então a cor do texto será essa cor preta Agora temos que adicionar essa caixa de ícones, podemos usar a caixa de imagem. Acho que a caixa de imagem funcionará, talvez não. Vamos adicionar a caixa de imagem, pesquisar a caixa de imagem e adicionar a caixa de imagem dentro desse contêiner no Estyle, defina a posição da imagem como esquerda Mas o problema está na caixa de imagem, não temos muitos recursos para adicionar as três linhas, então temos que fazer isso manualmente. Vamos vir aqui e primeiro mudar esse ícone. Para alterar o ícone, vou para o ícone do Google. Nos símbolos e ícones materiais, posso encontrar os ícones. Ícone de busca. Temos esse ícone de chamada e vamos ver os detalhes a partir daqui. Na verdade, é daqui. Vamos ajustar a largura para que fique fina assim. Ok, agora eu clico nesse PNG e vamos ver a cor antes de baixá-lo. A cor é essa cor azul, copie o código de cores e cole o código de cores. Acho que é o mesmo código de cores. Ok, agora eu clico em PNG, na verdade, temos que definir o tamanho. Então, aqui o tamanho é 60. Vamos tentar somar 60, 60 funcionará. Em seguida, clique em PNG e vá para a figura Musign e role aqui e clique neste ícone e remova este ícone vetorial, e aqui, selecione o layout do ícone e clique aqui e coloque o ícone assim Em seguida, temos que ajustar o ícone de seleção somente e ajustá-lo assim. OK. Agora também precisamos obter o ícone de localização. Este ícone funcionará, baixe-o, clique aqui, remova esse menu suspenso e selecione o layout do ícone nos vídeos de imagem, selecione o ícone suspenso e solte-o assim. Em seguida, selecione o ícone e reduza seu tamanho assim. OK. Então temos que fazer um relatório. Sim, ou essa. Vamos selecionar esse perfil de laboratório assim. Remova-o. Não, não esse ícone. Então, eu desmarquei corretamente o ícone, e esse será o OK. Coloque assim. Então e tudo bem, até agora tudo bem. E agora podemos baixar esses ícones, selecionar o ícone e clicar no ícone Exportar. Ok, vamos criá-lo. Primeiro, precisamos ter um contêiner como esse. Então, com antecedência, vamos fazer margem de preenchimento do contêiner como zero, então aqui, vamos adicionar a caixa de imagem primeiro e na caixa de imagem, clique aqui e uma linha estará aqui, uma linha será a direção , a linha horizontal, linha será o início e agora temos que criar outro contêiner dentro desse contêiner , porque este é esse contêiner é a linha horizontal, mas essas seções estão na vertical. Vamos ver aqui está o contêiner que adicionamos. Vamos colocá-lo dentro assim e, novamente, temos que adicionar e ficar assim. Aqui, vá para o layout e defina a direção, pois item da coluna ou linha vertical será iniciado, e agora podemos adicionar o título Vamos ver o que temos como título. Vamos adicionar três títulos ou podemos simplesmente duplicar este Primeiro, vamos criar os detalhes clicando aqui, cara aqui na tipografia de Esty estará substituindo a tipografia, depois a cor a cara aqui na tipografia de Esty estará substituindo a tipografia, depois a cor será essa cor preta. Então eu vou duplicá-lo por três vezes como esta. Em seguida, copiamos o texto e espaçamos o texto assim em cada gravata, alteramos para parágrafo e aqui está o número, acho que será em tamanho personalizado, então o último normal é 35. Vamos mudar essa família de fontes para 3535 regular. Agora vamos ver o tamanho do inbten, selecione um deles tamanho do Ibteen é dez, vamos selecionar o contêiner e definir a linha como dez Ok, vamos para o contêiner principal no contêiner principal, clique no centro de itens da linha desta forma. Agora vamos ver o tamanho da entrada. Também é dez. Então, aqui a coluna será 100 e clique no contêiner que tem o título Vamos aqui e conferir o tamanho da roupa de cama. É 30, aqui podemos definir a linha como 30. OK. Agora, o que temos que fazer é duplicar isso três vezes, vou clicar com o botão direito do mouse e duplicar, duplicar Agora, se virmos 30. Agora vamos copiar esses outros detalhes como este, primeiro o título e ele tem o mesmo texto e o endereço também tem o mesmo texto, e então temos que ler três textos, remover este e adicionar o botão e o botão estará aqui, na verdade, podemos usar esse Acho que podemos usar esse mesmo botão. Então, para fazer isso, vou clicar em Editar modelo e clicar em Salvar e sair e podemos simplesmente copiar a propriedade do botão daqui. Clique aqui e clique com o botão direito do mouse e clique em Copiar. Em seguida, clique em Salvar e voltar para voltar porque este é um modelo e, aqui, podemos facilmente clicar com o botão direito do mouse no botão e clicar em além desse bloco. Quando eu passo este dado, basta colar o estilo do botão e clicar aqui, então temos que adicionar o ícone, que o ícone seja uma seta. E não é esse tipo de flecha, vamos descobrir a flecha. Aqui clicamos nele, clicamos em Inserir. Ok, até agora tudo bem. Agora, o que temos que fazer é copiar o texto e colocar o texto aqui, e aqui temos um problema. Adicionamos a direita e a esquerda como seis. Vamos fazer com que seja zero aqui, porque não precisamos agir para a esquerda e para a direita, mas aqui. Em seguida, clicarei com o botão direito do mouse em duplicar isso e colocarei aqui e aqui também, não precisamos disso, desculpe, não daquele O controle é definido para opções e exclua este. Então, aqui teremos o ícone Vs do agendador e colaremos assim Então, vamos mudar o conteúdo. Agora temos que mudar o ícone, clicar nesse ícone e vir aqui. Em seguida, clique no ícone de entrada e clique em Exportar JPG, não precisamos de PNG. Selecione o ícone JPG, clique aqui, faça o upload do ícone, clique em CLEC e agora temos esse ícone e clique em exportar, javgoIcon e crie e coloque este ícone Agora temos o design do lado esquerdo acordo com esse design e agora temos que criar esse design do lado direito. Vamos fazer isso na próxima lição. 116. Seção "Entre em contato com o design" — parte 02: Ok, agora temos que projetar esta seção. Então, vamos começar. Primeiro, selecionarei essa imagem e clicarei em Exportar e definirei o tipo passe JPG e clicarei em Exportar. E aqui vou para Tiny PNG e corto essa imagem para que possamos otimizá-la Em seguida, clico no botão JPEG para baixá-lo. Ok, agora temos que adicioná-lo no contêiner principal. Então, vamos encontrar o contêiner principal. Então clique aqui. Aqui temos nosso contêiner principal, basta clicar no ícone de adição e pesquisar a imagem e colocar uma imagem como esta Sint foi adicionada, veja, vamos ver. Não, não é. Vamos adicioná-lo novamente. Temos que adicioná-lo aqui. OK. Tudo bem. Agora vou clicar na imagem. A imagem baixada, então aqui vamos copiar esse texto. Vamos adicionar isso como texto. Ok, eu clico em Selecionar e a imagem adicionada. Agora, o que precisamos fazer é selecionar esse contêiner e descobrir o padrão com o padrão com esse 550. Vamos adicionar 550, clique aqui para selecionar Px e 550. OK. E então o que temos que adicionar é espaço no meio, então clique aqui e também temos que tornar a resolução da imagem completa em etyleeGod e neste contêiner principal, vamos adicionar a coluna como 90, o tamanho do convite era 90 Agora, o que precisamos fazer é clicar no espaço entre e em uma janela maior, ela ficará assim e, em seguida, teremos que centralizá-la. Clique em Align center como este. Agora temos que adicionar esses dois itens, vamos fazer. 117. Seção "Entre em contato com o design" — parte 03: Agora temos que criar esses dois itens, então vamos começar aqui. Primeiro, vamos descobrir a largura, a largura é 213 e a altura é 152 Vamos vir aqui e clicar em nosso contêiner principal e, dentro do contêiner principal, vamos criar um subcontêiner como esse e colocá-lo após a imagem E agora o design foi alterado, mas vamos continuar e podemos corrigi-los. Clique aqui e vá para Avançar defina a margem e adicione um zero. Em seguida, no layout, podemos definir clicando aqui e clicando em configurar , então a largura era 213 Vamos fazer a largura 213 e a altura como 152. A altura do homem será 152. Na verdade, só podemos ajustar a altura com a qual precisamos definir. Então, nós já fizemos isso aqui. Então, se verificarmos assim, podemos ver que adicionamos esses detalhes. OK. Agora, o que precisamos fazer é clicar no contêiner e avançar na foto, definir a posição como absoluta. Ok, então podemos definir o conjunto de operações assim por enquanto, vamos mantê-lo aqui. E agora o que temos que fazer é adicionar esses textos clique aqui e clique no título e aqui no estilo, a tipografia será o cabeçalho , cor do texto será essa cor preta e o texto 247 assim, depois vou duplicá-lo e copiá-lo, depois colar assim e seu tamanho será menor. Acho que o tamanho está incluído, é a cama 25, cama Sim, é uma adição e clique aqui e, em seguida, adicione a cor de fundo a esse layout Vá para estilo no fundo do estilo, a cor será branca como esta. Agora temos que adicionar bordas, na verdade, adicionar rádios de borda. Se verificarmos o raio da borda, ele clicará nesse layout e será 20, vamos torná-lo como 20 no layout, centralizá-lo no centro do valor e descobrir o tamanho do convite O tamanho convidativo é dez. Vamos definir a tarefa dez, não a coluna. Na verdade, deveria ser uma fila. OK. Agora temos que adicionar o preenchimento, vamos verificar o preenchimento O preenchimento é 20, no contêiner, vá para adicionar e no preenchimento defina-o como OK. Agora temos que adicionar essa sombra de fundo para fazer isso, eu posso ir para estilo e estilizar a sombra da caixa, a sombra da caixa, vamos copiar os detalhes da sombra da caixa. Aqui, clique na caixa de sombra e copie as cores RGBA e venha aqui, acompanhe as cores RGBA, e o desfoque será 15 e os outros Vamos fazer com que esse desfoque seja 15. OK. Agora, digamos que esteja aqui, então vamos fazer a posição. Ao mesmo tempo, o deslocamento será assim e o deslocamento vertical será, na verdade, o que está Sim. E esquecemos de adicionar preenchimento ao contêiner principal, nosso preenchimento deve ser 120 Sim, é 120. Você vai adicionar na margem superior para preencher 1220. Novamente, selecione este e defina-o como este. Sim, até agora tudo bem e agora temos este, então temos que adicionar o segundo Vamos continuar da mesma forma, primeiro clique aqui para adicionar o contêiner. Vamos colocar um recipiente assim e vamos colocar embaixo da imagem assim. OK. Então, com antecedência , dura zero, e vamos descobrir a largura, a largura é 213 fixel 213 E então vamos estilizar e adicionar uma cor de fundo como essa. Em seguida, vamos copiar o texto e adicionar o texto aqui para adicionar texto dentro desse contêiner. Então, aqui para adicionar o texto real, e aqui, digamos que o tamanho do mesmo dia do parágrafo, mas não é o lado do parágrafo, não. Sim, é 40 como tamanho da fonte. Então, vamos fazer com que esse tamanho de fonte seja 40 por meio de um manual como este. Ok, então vamos duplicar isso e copiar este, colocar esse texto aqui E no estilo, a tipografia será um subtítulo. Ok, agora, coloque-o no centro, esse texto no centro também e clique no contêiner, no contêiner no layout, torne-o um centro de alinhamento e vamos descobrir o tamanho intermediário O tamanho intermediário é dez, na linha, faça dez e no preenchimento será A) faça acolchoamentos. E quanto ao preenchimento esquerdo e direito? Os acolchoamentos esquerdo e direito estão muito bem, muito bem, o esquerdo estará muito bem. Algo errado. Vitória, 40 regulares. Temos que aumentar o Vamos fazer a esquerda e a direita, mas zero. Não, não funciona. Temos que aumentar isso sem muito. 215-22-0220 funcionará. Ok, até agora tudo bem. E agora temos que adicionar o canto. Então veja o raio do canto, raio do canto como Vamos ver o raio do canto, o raio do canto é dois estilos na borda, o raio do canto é dois vazios, temos que adicionar a sombra da caixa, o código da cor da sombra da caixa, temos que copiá-lo Defina o CSS e copie a cor RGPA aqui, devemos fazer isso 15 Agora parece bom. Agora, o que temos que fazer é avançar e a posição será absoluta e podemos colocá-la aqui. E agora vamos mudar o deslocamento e aqui está. Está no meio. Então, vamos adicioná-lo à horizontal média. Vamos fazer essa orientação horizontal para chegar aqui desta forma, isso deve estar bem no meio. OK. E esquecemos de mudar a cor do texto Vamos mudar a cor do texto. Ok, até agora tudo bem. E agora temos esses dois itens, e agora temos que adicionar a animação a esse item. Então, vamos fazer. 118. Seção "Entre em contato com o design" — parte 04: OK. Quando eu rolo para baixo, quero fazer com que esta seção animada de cima para baixo e, quando eu subo, ela deve estar no mesmo contêiner do dia, na seção do mesmo dia Quando rolamos para cima e para baixo, ele deve ir para a esquerda e para a direita na horizontal Então, vamos adicionar essas animações. Então clique aqui e , ao avançar, vá para efeito de movimento e em efeito movimento, em efeito de rolagem No efeito de rolagem, precisamos dessa vertical, então clique aqui na vertical e vamos ver se ela está em ação Na verdade, deveria ser assim. OK. Agora, vamos definir o ponto de vista. OK. Agora vamos criar uma nova seção para que possamos entender claramente a animação, clique aqui e adicione Maxt 600 minutos de altura e 600 e agora funcionará assim Vai descer, clique aqui e vamos parar quando quiser aqui. Então, estamos em movimento aqui e vamos parar com isso, certo? Aqui, não, não, certo? OK. Agradável. Agora temos que adicionar o mesmo efeito a este. Clique aqui e no efeito de movimento avançado, clique no efeito de rolagem E aqui temos que adicionar a rolagem horizontal. E quando eu rolo, deve ficar assim. Então, aqui, vai assim e depois para baixo, quando eu bater assim, eu deveria parar aqui mesmo. Então, vamos ver. OK. Agradável. Agora concluímos totalmente a seção de entrar em contato com a Clínica da Família JB Ok, aqui, acabei de encontrar um problema. Então, se eu aumentar o tamanho do site, esta seção será exibida aqui. Assim, podemos simplesmente corrigi-lo, então clique aqui e vá para avançar com antecedência , defina a orientação horizontal como correta, e agora podemos defini-la aqui. É como aqui? Vamos ver. OK. Agradável. Clique em publicar 119. Corrigir o problema da sombra de caixa: Quando eu verifico o site, consigo ver esse tipo de sombra de fundo e o raio do canto, então não precisamos dela aqui, e eu sei o motivo disso, vamos corrigi-la Se formos ao provedor R, avaliarei o modelo do provedor R no carrossel Loop e clicarei no contêiner Então, se eu for para Advance e CSS personalizado, aqui temos o CSS, então abrimos o site em New Tab. Vamos ver, e aqui vou remover esse CSS pressionando Command, um comando para recortá-lo e clicar em Con Pablish agora, se eu verificar o site, o problema será corrigido quando o removermos daqui, podemos ver que o plano de fundo dos elementos do provedor dedicado também desaparecerá. Para corrigir isso, primeiro, vou colocar isso assim e aqui posso ir para o layout e, no layout, adicionarei uma classe CSS. Vamos adicionar nosso painel de provedores. Esse nome pode ser qualquer coisa, mas vou adicionar esse tipo de nome. Em seguida, copiarei isso e acessarei o CSS personalizado e, aqui, adicionarei nosso painel de provedores assim. Vamos fazer dez, somar assim, adicionar dez, adicionar assim e vamos esperar que seja prata e vamos ver, está corrigido aqui, mas aqui temos o problema. Na verdade, temos que adicionar essa classe CSS dois, não neste contêiner. Acho que devemos adicioná-lo ao Carsel, então vou remover aqui e publicar, desculpe, temos que ficar aqui Eu apenas os removo. Vamos adicioná-los assim. E esperemos que isso funcione, por favor, então clique em convento novamente aqui, clique aqui E então vamos tentar editar a classe CSS aqui. Acho que funciona. Parece que está funcionando e clique em publicar. Então, novamente, vamos para Editar modelo, o contêiner no CS aqui novamente, temos um problema. Nós só temos um CSSU. Não adicionamos o espaço aqui agora, Allgood, então agora eu clico em publicar e agora, quando eu verifico, deve funcionar Ok, agora está funcionando. 120. Seção de revisão do design — parte 01: Todos, agora temos que criar essas famílias Y confiáveis, como a seção Q. Esta é a seção de pré-visualização. Para criar isso, podemos usar as mesmas técnicas que usamos para criar nossa seção de provedores dedicados. Vamos começar como fizemos antes vou para o painel do Votress e aqui podemos criar um grupo avançado de campos personalizados para adicionar as avaliações Então, aqui, atualmente temos nosso campo de fornecedores e eu clico em Novo. E aqui vou dizer o nome como campo de avaliação do cliente. E então eu clico em Salvar alterações. Na verdade, antes de criarmos o grupo de campos, precisamos criar os tipos de pose. Então eu clico nos tipos de força, e aqui temos os tipos de pose de nossos fornecedores, e aqui temos as avaliações dos clientes, o tipo de postagem, adicionar o nome rural como avaliação do cliente e o nome singular será a avaliação do cliente e o tipo de pose e será a avaliação do cliente, adicionar o nome rural como avaliação do cliente e o nome singular será a avaliação do cliente e o tipo de pose e será a avaliação do cliente, e não precisamos de nenhum nome de texto e a visibilidade é pública e clique em salvar alterações Agora, na configuração avançada, podemos mudar de laboratório. Na verdade podemos adicionar ícones a esse campo personalizado. Então, atualmente, ele tem avaliações de clientes como este ícone de alfinete. Então, se eu for para a visibilidade aqui, posso ver o ícone aqui, vamos adicionar como uma estrela. Ok. Qual estrela de avaliação funcionará com isso, selecione a estrela e clique em Salvar alterações. Ok, é Secky, agora eu vou para os grupos de campo e aqui vou editar nossas rodas de avaliação de clientes que já criamos, e no campo, vou clicar em Editar e primeiro temos que adicionar um nome, na verdade, podemos adicionar esse nome como título Se formos até nossos provedores, provedores e aqui temos nossos provedores, então eu clico em Editar e quando edito, podemos adicionar essa médica Lisa podemos adicionar essa médica Lisa ou o título como o nome do revisor, como aqui em MR está o nome do revisor e na descrição, podemos adicionar a avaliação e precisamos do campo personalizado para a Na verdade, vamos adicionar um campo de descrição como esse campo de imagem à foto de rosto. Vamos fazer isso. Aqui, adicionarei o campo de descrição, que significa que a área de texto e o rótulo serão texto de revisão. Vamos revisar. Não é necessário adicionar texto basta revisar e o nome do campo será revisado. Não precisamos de nenhum valor padrão, então eu clico no campo. E aqui temos que selecionar isso como imagem. Essa imagem. Ok. E a tabela de campo será fotografada na cabeça e o retorno será uma matriz de imagens e bom. Agora vou para a configuração definida na regra de localização. O tipo de postagem será igual à avaliação do cliente, e agora clico em salvar alterações. Um bom. Agora, se eu for para a seção de avaliação do cliente e clicar em Avaliação do novo cliente, aqui temos um lugar para adicionar o título como nome e avaliação, depois a imagem da captura Se eu acessar o conteúdo do site, podemos ver o nome do cliente. Copie o nome do cliente e coloque-o como título. Então, aqui, temos a descrição e, em seguida, temos que obter a imagem. Atualmente, não temos imagens. Temos essas poucas imagens. Talvez na pasta de imagens, possamos ver as imagens. Temos esses avatas de avaliação em nossa pasta de imagens. Aqui temos a pasta de imagens e, na primeira revisão do projeto, os Avatas Vou apenas destacar todos eles e vamos adicionar a imagem e colar tudo, o que significa que podemos usá-los quando adicionamos a imagem real. Então, aqui temos o primeiro Avatar e clique em Selecionar e clique em publicar, publique. Ok, vou adicionar o resto das avaliações dos clientes. Então, para fazer isso, clico em adicionar nova avaliação de cliente e aqui copio o nome e a descrição. Copie o nome com base em uma descrição e coloque-o como resenha, depois encontre o David e aqui está o David, ocultamos, publicamos e publicamos a resenha Eu farei o resto e nos vemos na próxima lição. 121. Seção de revisão com elemento de revisão: Gostaria de criar a seção de resenhas de maneira simples, também mostrarei o caminho. Podemos simplesmente usar elementos de revisão do elemento e usá-los. Esta lição será a lição antes de criarmos o carrossel acima, então não se preocupe na próxima lição, você verá como criar o carrossel no exterior Ok, agora eu clico no ícone de adição e aqui pesquise a revisão. Ok, aqui temos uma caixa de resenhas , coloque-a assim. E aqui temos que adicionar itens. Então, adicione os itens primeiro, temos que encontrar o item. Ok, no conteúdo do site, temos os detalhes, então vamos adicionar um por um, mas teremos o nome e não teremos um título, remova-o e teremos a avaliação como esta, para que não precisemos do ícone, remova o ícone para uma imagem. Vamos adicionar uma imagem como essa. OK. Agora vamos fazer o mesmo com a corrida. Vou adicionar essas cinco avaliações e até breve. Ok, adicione os slides ou as resenhas, e agora o que temos que fazer é colocar o lado para visualização. Serão três lados para visualização na opção adicional. Atualmente, manterei a opção padrão e, no estilo, temos que alterar as opções. lado intermediário será 20 e a cor da borda deve ser nenhuma e o raio da borda é 20, borda com deve ser zero, a cor da borda também deve ser não e o preenchimento estava muito bom, o preenchimento estava muito bom, então se verificarmos aqui, podemos ver aqui que o preenchimento Então, agora no cabeçalho, não precisamos de uma cor de fundo para o separador, não precisamos de uma cor de fundo para o separador A única coisa que precisamos é a sombra projetada. Vamos tentar adicionar a sombra da caixa após a conclusão deste design e temos que ir para o texto. No texto, a cor do nome será preta e a tipografia será a subedição Sim, é um tipo de subtítulo, e agora, no título, não temos um título, então não falamos sobre E a cor da resenha será o texto e a tipografia será Na imagem, vamos ver o tamanho da imagem. O design Figma, com o tamanho da imagem 64 por 64, faz com que seja 64. Agora, aqui, temos que encontrar a lacuna, a lacuna não é, são dois L e o raio será 60 Vamos fazer com que seja 60. Não precisamos de ícones. Não vamos editar nenhum detalhe do ícone e aqui temos um ícone de revisão. Vamos ver o tamanho do ícone de avaliação. É 23 por 23. Temos um espaçamento 23 é o que é isso, é seis, e a cor é vamos ver a cor, copiar o código de cores e colar o código de cores aqui O fato é que ainda não vemos as avaliações, vamos descobrir como mostrá-las. Em outra opção, temos uma avaliação? Não. Ok, aqui temos que adicionar a classificação. Vamos adicionar a classificação como cinco, assim. Está bem? OK. Eu entendi você. Eu entendi você. Cinco. Sim, a classificação é sempre cinco porque, para o site, adicionamos a melhor classificação para o Okay, agora até agora tudo bem e obtivemos um resultado semelhante e ainda temos muito o que fazer. Então, se formos para Estyle e agora tivermos que definir a parte de navegação na navegação, definirei a seta como zero porque não precisamos de setas Vamos ver se há uma maneira de remover as flechas. Não. Não vejo uma maneira de remover a flecha, um estilo, podemos fazer isso. Ok, e a paginação deve ser duas. Acho que está espaçando o espaço de paginação entre 20 e o tamanho 20 Então, vamos fazer o tamanho 20. A cor é a cor primária, cor ativa será essa cor. Desculpe, a cor é uma cor de destaque e a cor ativa será essa cor. OK. Agora, o que está faltando? Então, vamos ver, vamos ver. Aqui, estamos perdendo o plano de fundo. Então, vamos aos slides e temos? Sim, temos cores de borda. Temos uma maneira de adicionar a borda, mas não na sombra projetada. Então, vamos ver, vamos ver. Deve haver uma maneira ou deve haver um lugar para adicionar a sombra da caixa. Com antecedência, vamos ver a borda, definir o raio da borda como 20 e projetar sombra Não, ele foi adicionado a todas as seções ou, não vamos fazer isso, precisamos apenas adicionar ao slide. Então, eu deslizo, a cor de fundo está boa, as bordas são duas e o raio do corpo, a cor do boda não será branco Na verdade, não temos como adicionar sombra projetada, mas já criamos o CSS talvez adicionar esse código CSS aqui funcione. Então, vou selecionar o cuidador do loop. Neste caso, vamos selecionar esse loop Carsel. Você se lembra de que adicionamos CSS cast assim? E vamos descer até aqui. Vamos para Advance e em CSS, vamos, está funcionando. Uau, bom Agora vá para o conteúdo e eu não achei que funcionasse, mas funciona. Então, aqui vou creditar a borda com um corvo e a cor da borda não será Esse é o poder do CSS , então temos que remover o separador, é claro, e a lacuna será k. Acho que a lacuna está extinta, está muito bem, não seis muito OK. E aqui temos a classificação abaixo. Acho que não há como adicionar a classificação conforme abaixo. Sim, temos que criar ESS personalizado, mas podemos usar um modelo como esse usando o carasel de loop Essas são as limitações que também afetam os slides em slides Temos que configurar o teclado. Já marcamos o casamento. Oh, não, temos que colocar o alto até o fundo. Oh, talvez vamos clicar aqui e adicionar o fundo como 30, para que possamos obter os mesmos resultados. 81 é um pouco maior. Vamos adicionar o fundo como seis. Ok, agora está bom. E na navegação, os itens de paginação de navegação estão muito próximos, então vamos tentar corrigir Eu sei como consertar isso. Temos que 60 serão. Sim, vamos ver o que podemos fazer. Mas, por enquanto, vamos continuar assim, e agora temos que adicionar esse mesmo efeito. Para fazer isso, vamos ver o que podemos fazer. Primeiro, vou publicar isso e também não temos a opção de criar esse efeito acima, então temos que ignorar esse também. E agora vou atualizar e temos que encontrar uma maneira de adicionar sombra projetada aqui Portanto, essa é a desvantagem de usar os elementos pré-construídos, mas com o poder do elemento orp, podemos criar coisas personalizadas para nosso site e criar um site totalmente personalizado Agora, pelo menos, tente corrigir esse problema de paginação. Eu também me instalei. Ok, aqui, eu tenho uma maneira de esconder as setas e a vegetação deve ser pontilhada Ok, aqui temos uma maneira de adicionar o casado, mas não precisamos adicionar o com. Vamos fazer slides é chamado de três. Vamos fazer com que seja como quatro. Não, devem ser três aqui e os slides estão bem. Agora que consertamos uma coisa e ainda temos que adicionar a parte superior acolchoada, aqui, em bom estilo, não temos nenhum espaço de tamanho 20 entre. E com antecedência Vamos ver com antecedência. Acho que não temos uma maneira porque isso aconteceu quando adicionamos essa classe CSS, então temos que corrigir isso com CSS. De qualquer forma, não vamos usar essa análise da caixa de revisão, então vou apenas removê-la. Isso é apenas para ensinar você a fazer isso e temos que adicionar CSS, então não estamos focados em CSS neste curso. Acabei de remover essa parte e nos vemos na próxima lição, que é criar o rodapé 122. Seção de revisão do design — parte 02: Ok, agora adicionamos avaliações. Então, vamos começar a projetar. Então, aqui, primeiro, vamos verificar o tamanho desse contêiner. Então é 492. A altura é 492, então vamos fazer com que seja como 500 Então, primeiro, removerei esse contêiner desnecessário e aqui iPlexBx, clique na Ok, aqui, vamos avançar com antecedência. Vamos remover tudo que está preso e vamos fazer 140, 140 e direita e esquerda. Não, não, não é margem. Deveria ser acolchoado. preenchimento é 140 e o preenchimento também é 140, e a margem superior será Ok. Agora, vamos ao layout em layout. A altura máxima será de 500 pix. Agora, como primeira etapa, temos que adicionar esse cabeçalho. Vamos vir aqui, escolher o elemento e adicionar o cabeçalho, depois copiar esse texto, ajustar o ritmo do texto e colocá-lo no centro do alinhamento. A tipografia é cabeçalho e a cor do texto será esse texto Agora, o que precisamos fazer é adicionar esse carrossel. Vamos pegar o carrossel de loops. Vou acelerar esse ícone de elemento de anúncio e loop de pesquisa e aqui temos o carrossel de loop, adicione-o e agora eu seleciono o contêiner principal e, em bruto, farei com que seja 60 porque aqui temos o tamanho do convite Agora, vamos clicar nessa caixa de loop e primeiro temos que criar um modelo Vou clicar em criar um modelo e clicar em Sato criá-lo Ok, eu fui criado, e eu tenho que salvar um de volta. Ok, agora selecione o contêiner novamente. Na verdade, vamos selecionar a caixa circular e aqui nosso modelo foi adicionado automaticamente E não vamos nos preocupar com o número de slides por enquanto. E vamos para consulta em consulta. Vou definir a fonte como avaliações de clientes e vamos analisar os dados padrão e, em seguida, o que precisamos fazer é clicar em Editar modelo Ok. Agora vou clicar neste sinal de adição e clicar na caixa Plex e clicar nesta coluna de direção e ir para Avançar e remover a margem e o preenchimento Agora, como primeira etapa, temos que adicionar a imagem e o nome para fazer essa frase, adicionar elemento e pesquisar imagem e apenas adicionar a imagem desta forma. Aqui, clicarei na tag dinâmica e, no campo de imagem ACF, definirei a chave como uma foto de rosto de avaliação do cliente, desta forma, a imagem adicionada e a resolução da imagem estará completa E para mostrar o resultado, posso clicar no item Loop definido em e na consulta na configuração de revisão na Consulta, definirei a configuração de visualização da fonte, definirei a visualização de um item de postagem específico para análise do cliente e clicarei em Aplicar e visualizar. Tudo bem Agora vamos adicionar o resto dos detalhes e depois fazer o design. Agora eu tenho que adicionar o nome, então adicionarei o título dentro dele e, a partir daqui, definirei o título da postagem, pois lembro que o título da postagem é o ou podemos clicar em Editar e vê-lo Ok, aqui, o título da postagem é o nome do revisor. Ok. Agora vou mudar a cor e ver a fonte oito regular 25, o que significa que aqui, ela deve ser uma suposição, está legendada, deixe o sub d entrar, e agora vou duplicar esse texto e vamos aqui selecionar o tipo de pose aqui, remover o título da pose e clicar na tag dinâmica e no campo ACF, clique tag dinâmica e no campo ACF A chave será a revisão. Sim, a avaliação acabou de ser adicionada e seu tamanho deve ser o tamanho de um parágrafo. Então, vamos definir aqui, vamos defini-lo como parágrafo e no contêiner, vamos adicionar o tamanho intermediário, o tamanho do convite é o tamanho do convite, então vou para o layout e o tamanho da linha será Agora temos um problema. Atualmente, temos o conjunto de ícones , todos esses ícones são cinco, mas se alguém na revista Four Star tiver um lugar para onde, temos que personalizá-lo, porque se adicionarmos quatro ou cinco estrelas aqui, não poderemos personalizá-lo Vamos tentar fazer a próxima. Agora adicionamos avaliações. Então, vamos começar a projetar. Então, aqui, primeiro, vamos verificar o tamanho desse contêiner. É 492, a altura é 492, então vamos fazer com que seja como 500 Primeiro, removerei esse contêiner desnecessário e clico aqui na caixa lex, clique na coluna Cansado. Ok, aqui, vamos avançar com antecedência. Vamos remover tudo que está preso e vamos fazer 140, 140 e direita e esquerda. Não, não, não é margem. Deveria ser acolchoado. preenchimento é 140, e o preenchimento também é 140 e a margem superior será Ok. Agora vamos ao layout em layout. A altura do homem será de 500 pixels. Agora, como primeira etapa, temos que adicionar esse cabeçalho. Vamos vir aqui, elemento p, adicionar o cabeçalho, depois copiar esse texto, colocar o texto no espaço e colocá-lo no centro do alinhamento. A tipografia é cabeçalho e a cor do texto será esse texto Agora, o que temos que fazer é adicionar esse carrossel. Vamos pegar o carrossel de loops. Vou acelerar esse ícone de elemento de anúncio e loop de pesquisa e aqui temos o carrossel de loops, adicione-o e agora eu seleciono o contêiner principal e, em bruto, vou fazer isso como 60 porque aqui temos o tamanho do convite como 60 Agora vamos clicar nessa caixa de loop e primeiro temos que criar um modelo Vou clicar em criar um modelo e clicar em Sato criá-lo Ok, eu fui criado, e eu tenho que salvar um de volta. Ok, agora selecione o contêiner novamente. Na verdade, vamos selecionar a caixa circular e aqui nosso modelo foi adicionado automaticamente E não vamos nos preocupar com o número de slides por enquanto. E vamos para consulta em consulta. Vou definir a fonte como avaliações de clientes e vamos analisar os dados padrão e, em seguida, o que precisamos fazer é clicar em Editar modelo Ok. Agora vou clicar neste sinal de adição e clicar na caixa Plex e clicar nesta coluna de direção e ir para Avançar e remover a margem e o preenchimento Agora, como primeira etapa, temos que adicionar a imagem e o nome para fazer isso. Eu adiciono a frase, adiciono elemento e pesquiso a imagem e, sim, aqui, clicarei na tag dinâmica e, no campo da imagem ACF, definirei a chave como guia de avaliação do cliente, desta forma, a imagem adicionada e a resolução da imagem estarão completas e, para mostrar o resultado Posso clicar no item Loop definido em e em Query. Não, na configuração de revisão no Query, definirei a configuração de visualização da fonte, definirei o item de postagem específico para análise do cliente e clicarei em Aplicar e visualizar. Agora vamos adicionar o resto dos detalhes e depois fazer o design. Agora tenho que adicionar o nome, adicionarei o título dentro dele e, a partir daqui, direi o título da postagem, pois me lembro que o título da postagem é o nome, para que possamos clicar em Editar e ver Ok, aqui, o título da postagem é o nome do revisor. Ok. Agora vou mudar a cor e vamos ver a fonte normal 25, o que significa que aqui, ela deve ser uma suposição, se estiver legendada, deixe o sub d entrar, e agora vou duplicar esse texto e vamos aqui selecionar o tipo de pose aqui, remover o título da pose e clicar na tag dinâmica e no campo ACF, clique tag dinâmica e no campo ACF A chave será a revisão. Sim, a avaliação acabou de ser adicionada e seu tamanho deve ser o tamanho de um parágrafo. Então, vamos definir, e aqui, vamos defini-lo como parágrafo e, no contêiner, vamos definir o tamanho convidativo, o tamanho invertido é dois O tamanho do convite é dois, então vou para o layout e o tamanho da linha será dois Agora temos um problema. Atualmente, temos os ícones, todos esses ícones são cinco, mas se alguém adicionar uma revista de quatro estrelas, temos que personalizá-la, porque se adicionarmos quatro ou cinco estrelas aqui, não poderemos personalizá-la Vamos tentar fazer isso na próxima lição. Ok, agora adicionamos avaliações. Então, vamos começar a projetar. Então, aqui, primeiro, vamos verificar o tamanho desse contêiner. Então é 492. A altura é 492. Então, vamos fazer com que seja como 500. Então, primeiro, removerei esse contêiner desnecessário e clico aqui. Vlexbx, clique na Ok, aqui, vamos avançar com antecedência. Vamos remover tudo isso preso e vamos fazer 140, um, 40 e direita e esquerda. Não, não, não é margem. Deveria ser acolchoado. preenchimento é 140 e o esquerdo também é 140, e a margem superior será Ok. Agora, vamos ao layout em layout. A altura máxima será de 500 pix. Ok. Agora, como primeira etapa, temos que adicionar esse cabeçalho. Vamos vir aqui, escolher o elemento e adicionar o cabeçalho, depois copiar esse texto, fasear o texto e colocá-lo no centro do alinhamento. A tipografia é cabeçalho e a cor do texto será esse Ok. Agora, o que precisamos fazer é adicionar esse carrossel Vamos pegar o carrossel de loops. Vou acelerar esse ícone de elemento de anúncio e loop de pesquisa e aqui temos o carrossel de loop, adicione-o E agora eu seleciono o recipiente principal e, em bruto, vou fazer isso como 60 porque aqui temos o tamanho intermediário como 60. Ok. Agora vamos clicar nessa caixa de loop e primeiro temos que criar um modelo Vou clicar em criar um modelo e clicar em Sato criá-lo Ok, eu fui criado, e eu tenho que salvar um de volta. Ok, agora selecione o contêiner novamente. Na verdade, vamos selecionar a caixa circular e aqui nosso modelo foi adicionado automaticamente E não vamos nos preocupar com o número de slides por enquanto. E vamos para consulta em consulta. Vou definir a fonte como avaliações de clientes e vamos analisar os dados padrão e, em seguida, o que precisamos fazer é clicar em Editar modelo Agora vou clicar neste sinal de adição e clicar na caixa Plex e clicar nesta coluna de direção e ir para Avançar e remover a margem e o preenchimento Agora, como primeira etapa, temos que adicionar a imagem e o nome para fazer essa frase, adicionar elemento e imagem de pesquisa e apenas adicionar a imagem desta forma. Aqui, clicarei na tag dinâmica e, no campo de imagem ACF, definirei a chave como uma foto de rosto de avaliação do cliente, como esta Ok, a imagem foi adicionada e a resolução da imagem estará cheia. E para mostrar o resultado, posso clicar no item Loop definido em e em Query. Não, na configuração de revisão no Query, definirei a configuração de visualização da fonte, definirei a visualização de um item de postagem específico para avaliação do cliente e clicarei em Aplicar e visualizar. Agora vamos adicionar o resto dos detalhes e depois fazer o design. Agora tenho que adicionar o nome, adicionarei o título dentro dele e, a partir daqui, direi o título da postagem, pois me lembro que o título da postagem é o nome, para que possamos clicar em Editar e ver Ok, aqui, o título da postagem é o nome do revisor. Ok. Agora vou apenas mudar a cor e ver a fonte regular 25, o que significa que aqui, ela deve estar subdelimitada. Sim, então é sublinhar o sub d in e agora vou duplicar esse texto e vamos aqui selecionar o tipo de pose aqui e aqui, remover o título da pose e clicar na tag dinâmica e no campo ACF A chave será a revisão. Sim, a avaliação acabou de ser adicionada e seu tamanho deve ser o tamanho de um parágrafo. Então, vamos definir aqui, vamos defini-lo como parágrafo e no contêiner, vamos adicionar o tamanho intermediário, o tamanho convidativo é dois O tamanho do convite é dois, então vou para o layout e o tamanho da linha será Agora temos um problema. Atualmente, temos os ícones, todos esses ícones são cinco, mas se alguém adicionar uma revista de quatro estrelas, temos que personalizá-la, porque se adicionarmos quatro ou cinco estrelas aqui, não poderemos personalizá-la Vamos tentar fazer isso na próxima lição. Ok, agora adicionamos os comentários. Então, vamos começar a projetar. Então, aqui, primeiro, vamos verificar o tamanho desse contêiner. Então é 492, a altura é 492, vamos fazer com que seja como 500 Então, primeiro, removerei esse contêiner desnecessário e clico aqui na caixa Plex, clique na coluna Cansado. Ok, aqui, vamos avançar com antecedência. Vamos remover todas essas coisas e fazer 140, um, 40 e direita e esquerda. Não, não, não é margem. Deveria ser acolchoado. preenchimento é 140 e o esquerdo também é 140, e a margem superior será Ok. Agora vamos ao layout em layout. A altura do homem será de 500 pixels. Agora, como primeira etapa, temos que adicionar esse cabeçalho. Vamos vir aqui, escolher o elemento e adicionar o cabeçalho, depois copiar esse texto, fasear o texto e colocá-lo no centro do alinhamento. A tipografia é cabeçalho e a cor do texto será esse Ok. Agora, o que precisamos fazer é adicionar esse carrossel Vamos pegar o carrossel de loops. Vou acelerar esse ícone de elemento de anúncio e loop de pesquisa e aqui temos o carrossel de loop, adicioná-lo, e agora eu seleciono o contêiner principal e, no formato bruto, vou fazer isso como 60 porque aqui temos o tamanho do convite Ok. Agora vamos clicar nessa caixa de loop e primeiro temos que criar um modelo Vou clicar em criar um modelo e clicar em Sato criá-lo Ok, eu fui criado, e eu tenho que salvar um de volta. Ok, agora selecione o contêiner novamente. Na verdade, vamos selecionar a caixa circular e aqui nosso modelo foi adicionado automaticamente E não vamos nos preocupar com o número de slides por enquanto. E vamos para consulta em consulta. Vou definir a fonte como avaliações de clientes e vamos analisar os dados padrão e, em seguida, o que precisamos fazer é clicar em Editar modelo Agora vou clicar aqui e clicar caixa Plex e clicar nesta coluna de direção e ir para Avançar e remover a margem e o preenchimento Agora, como primeira etapa, temos que adicionar a imagem e o nome para fazer essa frase, adicionar elemento e pesquisar imagem e apenas adicionar a imagem desta forma. Aqui, clicarei na tag dinâmica e no campo de imagem ACF, definirei a chave como foto de rosto de avaliação do cliente, desta forma a imagem adicionada e a resolução da imagem serão completas. Para mostrar o resultado, posso clicar no item Loop definido em e na consulta na configuração de revisão em Consulta, definirei a configuração de visualização da fonte, definirei a visualização de um item de postagem específico para avaliar o cliente e clicar em Aplicar e visualizar. Tudo bem Agora vamos adicionar o resto dos detalhes e depois fazer o design. Agora eu tenho que adicionar o nome, então adicionarei o título dentro dele e, a partir daqui, definirei o título da postagem, pois lembro que o título da postagem é o, para que possamos clicar em Editar e vê-lo Ok, aqui, o título da postagem é o nome do revisor. Ok, agora vou apenas mudar a cor e ver a fonte regular 25, o que significa que aqui, ela deve estar subdelimitada. Sim, se estiver subdefinido o subtítulo e agora vou duplicar esse texto e vamos aqui selecionar o tipo de pose aqui , remover o título da pose e clicar na tag dinâmica e no campo af, clique nele tag dinâmica e no campo af, A chave será a revisão. Sim, a avaliação acabou de ser adicionada e seu tamanho deve ser o tamanho de um parágrafo. Então, vamos definir aqui, vamos defini-lo como parágrafo e no contêiner, vamos adicionar o tamanho intermediário, o tamanho convidativo é dois O tamanho do convite é dois, então vou para o layout e o tamanho da linha também será pequeno Agora temos um problema. Atualmente, temos o conjunto de ícones. Todos esses ícones são cinco, mas se alguém adicionar uma revista de quatro estrelas, temos um lugar para personalizá-la, pois se adicionarmos quatro ou cinco estrelas aqui, não poderemos personalizá-la Vamos tentar fazer isso na próxima lição. Ok, agora adicionamos os comentários. Então, vamos começar a projetar. Então, aqui, primeiro, vamos verificar o tamanho desse contêiner. Então é 492, a altura é 492. Então, vamos fazer com que seja como 500. Então, primeiro, removerei esse contêiner desnecessário e clico aqui na caixa Plex, clique na coluna Cansado. Ok, aqui, vamos avançar com antecedência. Vamos remover todas essas coisas e fazer 140, 140 e direita e esquerda. Não, não, não é margem. Deveria ser acolchoado. preenchimento é 140 e o esquerdo também é 140, e a margem superior será Ok. Agora, vamos ao layout em layout. A altura do homem será de 500 fixos. Agora, como primeira etapa, temos que adicionar esse cabeçalho. Vamos vir aqui, escolher o elemento e adicionar o cabeçalho, depois copiar esse texto, fasear o texto e colocá-lo no centro do alinhamento. A tipografia é cabeçalho e a cor do texto será esse texto Agora, o que precisamos fazer é adicionar esse carrossel. Vamos pegar o carrossel de loops. Vou clicar neste ícone de elemento de anúncio e pesquisar Loop e aqui temos o carrossel de loop, adicioná-lo e agora eu seleciono o contêiner principal e, em bruto, vou fazer isso como 60 porque aqui temos o tamanho do convite Ok. Agora vamos clicar nessa caixa de loop e primeiro temos que criar um modelo Vou clicar em criar um modelo e clicar em Sato criá-lo Ok, eu fui criado, e eu tenho que salvar um de volta. Ok, agora selecione o contêiner novamente. Na verdade, vamos selecionar a caixa circular e aqui nosso modelo foi adicionado automaticamente E não vamos nos preocupar com o número de slides por enquanto. E vamos para consulta em consulta. Vou definir a fonte como avaliações de clientes e vamos analisar os dados padrão e, em seguida, o que precisamos fazer é clicar em Editar modelo Agora vou clicar neste sinal de adição e clicar na caixa Plex e clicar nesta coluna de direção e ir para Avançar e remover a margem e o preenchimento Agora, como primeira etapa, temos que adicionar a imagem e o nome para fazer essa frase I, adicionar elemento e imagem de pesquisa e apenas adicionar a imagem desta forma. Aqui, clicarei na tag dinâmica e, no campo de imagem ACF, definirei a chave como guia de avaliação do cliente, desta forma, a imagem adicionada e a resolução da imagem estará completa E para mostrar o resultado, posso clicar no item Loop definido em e em Query. Não, na configuração de revisão no Query, definirei a configuração de visualização da fonte, definirei o item de postagem específico para análise do cliente e clicarei em Aplicar e visualizar. Agora vamos adicionar o resto dos detalhes e depois fazer o design. Agora tenho que adicionar o nome, adicionarei o título dentro dele e, a partir daqui, direi o título da postagem, pois me lembro que o título da postagem é o nome, para que possamos clicar em Editar e ver Ok, aqui, o título da postagem é o nome do revisor. Ok. Agora vou mudar sua cor e vamos ver a fonte regular 25, o que significa que aqui, ela deve estar subdelimitada. Sim, então está subtarde a legenda e agora vou duplicar esse texto e vamos aqui, selecionar o tipo de pose aqui, remover o título da pose e clicar na tag dinâmica e no campo ACF, A chave será a revisão. Sim, a avaliação acabou de ser adicionada e seu tamanho deve ser o tamanho de um parágrafo. Então, vamos definir aqui, vamos defini-lo como parágrafo e no contêiner, vamos adicionar o tamanho intermediário, o tamanho convidativo é O tamanho do convite é dois, então vou para o layout e o tamanho da linha diminuirá, agora que temos um problema Atualmente, temos os ícones, todos esses ícones são cinco, mas se alguém adicionar rotação de quatro estrelas, temos um lugar para personalizá-lo, pois se adicionarmos quatro ou cinco estrelas aqui, não poderemos personalizá-lo Vamos tentar fazer isso na próxima lição. 123. Seção de revisão do design — parte 03: Primeiro, veja isso. Temos um widget de classificação IA. Se o adicionarmos aqui e aqui, podemos definir a escala de classificação, vamos defini-la como cinco e, na classificação, podemos adicionar t dinâmico, que significa que precisamos criar campos personalizados avançados para que possamos adicionar pontos de avaliação Vamos fazer isso. Antes disso, se pesquisarmos uma avaliação, também poderemos ver essa caixa de avaliação e adicionar avaliações individuais a essa caixa de avaliação e personalizar o design. Nesse caso, vamos continuar com o carsel de loop e ver o que podemos fazer Agora vou para o campo personalizado avançado e o grupo de campos. No grupo de campo, temos que selecionar o campo de avaliação do cliente. Vamos editá-lo. Então, aqui temos que adicionar um novo campo. Esse tipo de campo será um número. Vamos adicionar o rótulo do campo , pois a avaliação é semelhante a esta. Agora eu clico em Salvar alterações e agora se formos para análise do cliente e revisão da capa, podemos ver novos campos de revisão, então vou fazer cinco e salvá-los. Ok, vamos fazer isso pelo resto. Na verdade, aqui, não precisamos adicioná-los manualmente porque já criamos isso. Podemos adicionar valor padrão a esse campo. Vamos para o campo personalizado avançado e o grupo de campos no grupo de campos para editar o campo de revisão cien E aqui temos que editar esta revisão aqui como o valor padrão, vou inserir cinco Não, não precisamos adicionar um novo campo. Então, aqui adicionamos cinco como valor padrão e clicamos em salvar alterações. E agora vamos às avaliações dos clientes. E se formos para esta análise, temos que ver a pontuação da avaliação como cinco. Acabamos de adicionar um campo vazio porque acho que quando removemos esse campo, ele não foi removido, então vamos voltar e aqui excluímos, não precisamos apenas excluir e clicar em Salvar alterações. Ok. Agora, nas avaliações vamos para MI e seu valor padrão é cinco. Ok, até agora tudo bem. E agora temos que adicionar o design. Vamos ao nosso item elementar, e aqui temos essas avaliações, vá para a classificação e, em tin advance, custom Hum, vamos adicionar o anúncio. Na verdade, temos que reprimir isso. Ok, nós já economizamos e isso é bom. Portanto, se adicionarmos como dois, isso será mostrado como dois, mas, nesse caso, podemos definir a tag dinâmica, clicar no campo avançado da tag dinâmica e clicar na roda Advancnumber que analisamos Tudo bem, até agora tudo bem e agora eu posso publicá-lo e, se quisermos, podemos vê-lo no design. Ok. 124. Seção de revisão do design — parte 04: Ok, vamos editar o modelo e melhorar o design. Eu clico em Editar modelo e vamos lá. Vamos ver, primeiro temos que fazer essa imagem no lado esquerdo e o nome no lado direito, e a imagem que vejo é 64 por 64. Como temos que adicionar o raio do canto arredondado. Vamos fazer isso, primeiro eu seleciono a imagem. Um estilo, vamos fazer o centro de alinhamento e depois mudar a célula de pico para 64 e o raio será 30, 30 não é bom, mas cerca de 60, 60 funcionarão perfeitamente Parece bom, então o que eu tenho que fazer é criar um novo contêiner, vamos criar um contêiner como esse e avançar, não aqui. Selecione o contêiner que acabamos de criar e, com antecedência, remova a margem e o preenchimento e adicione a imagem dentro do nome do contêiner dentro do contêiner Em seguida, selecione o contêiner e, no layout, mude a direção para uma linha como esta e, em seguida, faça com que ele se alinhe ao centro. Aqui temos um pequeno problema Se verificarmos que essa imagem não está perfeitamente alinhada, talvez tenhamos que definir essa imagem de tamanho médio porque, em Avançar, podemos adicionar preenchimento para cima para menos, não para preenchimento, a margem superior, vamos fazer com que a margem passe para cima vamos fazer Sim, agora vai ficar perfeito e eu clico no segundo contêiner, e aqui temos que adicionar a lacuna da coluna. Se verificarmos aqui e virmos a coluna, ela está muito bem, vamos fazer isso também. E agora temos que cuidar desses EAs. Copie a cor das estrelas e clique no estilo r one. Vamos mudar essa cor assim. E quanto ao tamanho? O tamanho da estrela é 23 por 23 e o espaço é seis. Vamos fazer o espaçamento como seis e o tamanho é 23 por 23. Ok. Agora, o que temos que editar? Ok, até agora tudo estará perfeitamente alinhado, e entre os tamanhos 12 aqui Acho que já adicionei isso no meio. Se não, sim, já o adicionamos. Ok. Agora, o que precisamos fazer é adicionar o efeito de fundo como fizemos aqui. Já criamos o código CSS e a classe CSS. Vamos adicioná-lo. Antes de adicioná-lo, vamos adicionar os preenchimentos ao redor dessa caixa. Vamos ver os padrões aqui. São dois e aqui, bem, e esse tamanho de caixa é 300. Vamos fazer esses detalhes, selar o contêiner e com antecedência, há um PaddinaSTL Então, a largura será 300. Não, a altura será 300. Vamos fazer isso. Ok, e o raio da esquina Vamos ver que o raio do canto é 20, então, em grande estilo, o raio da borda Ok, acho que está tudo bem, então clique em publicar ou clique em sete emblemas E agora só precisamos adicionar essa classe CSS. Então, vamos tentar encontrar essa classe, e assim por diante, temos que selecionar o loop carel No carsel de loop com antecedência, aqui temos a classe CSS, então vamos copiar a classe e selecionar esse loop CaruSelo advance. Vamos adicionar o CSS plus aqui e vê-lo adicionado assim Agora, o que precisamos fazer é descobrir o tamanho convidativo. O tamanho convidativo é 20, aqui, temos que ir para Estyle. A diferença de estilo entre deve ser Ok. Agora, vou publicá-lo e até agora está tudo bem e acabamos de adicioná-lo. Porém, quando verificamos o design, podemos ver na terceira análise vemos apenas a metade dessa análise. Vamos criar esse efeito para fazer isso, aqui temos que ir ao conteúdo. Sobre o conteúdo do layout, primeiro precisamos descobrir o número de slides. Então, vamos ver que atualmente temos apenas cinco slides. Então, vamos fazer isso como cinco, e o slide na tela será dois. Então, agora você só verá dois, mas não se preocupe. Vou mostrar como corrigi-lo, e o slide on Iroll será um deles Então, se formos para o set, aqui temos o slide offset Vou adicionar o slide offset à esquerda. Quando eu adiciono à esquerda, vemos apenas o slide daqui. Na verdade, deveria ser assim. Agora, e se aumentarmos essa largura de deslocamento? Quando adicionamos a largura do deslocamento, ela aparece assim, mas precisamos que ela mostre mais Para fazer isso, podemos simplesmente adicionar o deslocamento com 200. Digamos que 200 será o tamanho. Deveria ser um pouco maior. Vamos fazer de 20 a 30 a 52. 50 será o melhor tamanho até agora, tudo bem. E agora, na navegação, não preciso mostrar as setas, então esconda as setas Na paginação, quero ver o ponto como a paginação. Vamos adicionar estilo a esses pontos. Vamos usar o estilo de paginação. Os pontos intermediários serão 220 e os lados dos pontos serão 20 espaço entre os pontos será 20, tamanho será 20 e a cor será essa cor primária Agora o espaçamento deve ser, eu acho que é 30, é 20 Vamos fazer com que seja 20. E agora temos um problema, temos aqui muitos pontos por cima Vamos fazer com que a cor seja azul. Ok. Agora, para reduzir essa contagem de pontos, temos que mudar o slide em Scroll. Vamos fazer com que sejam dois. Então, dois serão perfeitos. Então, agora dois slides serão alterados assim. Ok, agora eu clico em Publicar e aqui temos uma seção de revisão como 125. Design de seção de rodapé: Olá, pessoal. Agora temos que projetar esse rodapé Então, vamos fazer isso. Primeiro, vou ao nosso modelo de elemento e não precisamos dessa seção, então vamos excluí-la e clicar em publicar, depois temos que criar o modelo de rodapé, então vou para o administrador do WP e, no WP Admin, e, no WP vou para os modelos e salvarei E se clicarmos em Publicar, podemos ver o modelo e já criamos o modelo principal, mas não adicionamos nenhum conteúdo. No entanto, criar a seção Puta é muito fácil. Basta clicar em adicionar novo modelo e aqui você pode selecionar o tipo de modelo. Aqui, nesse caso, isole o pé e adicione o nome e clique em Criar modelo Eu já fiz isso e aqui vou clicar em Editar com elemento. Eu acho que você já vai fazer isso também. E aqui não pense nesses dois, vamos começar a projetar. Vou fechar o contêiner que eu já criei, depois clico em passar e clico aqui e clicar no contêiner do tipo coluna de direção. Vamos aqui. Em seguida, clique aqui para descobrir que a altura é 42, quatro. Vamos adicionar a altura mínima como 42, desculpe, 42, quatro. Ok, e primeiro temos que criar esta seção. Para criar essa seção, podemos criar um novo contêiner. Então, vamos transformar essa direção em bruto e , em seguida, clicar em mais segundo e adicionar um contêiner como este. E neste recipiente, remova com antecedência todos os acolchoamentos e margens. OK. Primeiro, temos que adicionar esse logotipo, selecionar o logotipo e clicar em Exportar e clicar em Exportar logotipo, e aqui vá aqui e pesquise a imagem e adicione a imagem assim, clique aqui e arraste e roube o logotipo que acabamos criar e clicar em Selecionar e aqui em Link, clique aqui e clique em URL personalizado, e aqui temos que adicionar o título da página inicial Aqui, podemos simplesmente selecionar as tags dinâmicas e clicar na URL do site, então será a URL da página inicial e teremos que criar essa cor nessa cor preta Vou copiar o código de cores do Figma design e clicar no contêiner principal em Estyle, clicar no tipo de plano de fundo e adicionar a cor assim Até agora, tudo bem. Em seguida, no estilo da imagem, defina o alinhamento como esquerdo e agora temos que adicionar este texto, então vou apenas copiar o texto mais o segundo título no título aqui, colar aqui e os tamanhos do texto parágrafo e alinhamento à esquerda, então a cor será branca Não precisamos pensar na largura desse conteúdo, pois podemos corrigi-lo depois de desse conteúdo, pois podemos corrigi-lo concluirmos o design e, em seguida, no que precisamos adicionar esses links de mídia social. Por que aqui pesquisar o ícone social e aqui temos o ícone social. Eu apenas os arrasto e roubo assim e aqui podemos adicionar os ícones Vamos ver que tipo de ícone temos. Temos Facebook, Twitter ou X vinculados no Instagram. Vamos adicionar esses sistemas Twitter Este é o ícone que você deseja. Facebook, Twitter, vinculado, isso deve estar vinculado e aqui temos que adicionar o URL do link por enquanto, não vou adicionar nenhum URL, depois clicar em adicionar item e adicionar o próximo item, que é o Instagram. Clique aqui para pesquisar na estrela aqui temos o ícone do Instagram. Agora, o alinhamento deve ser voltado e a forma deve ser arredondada e um estilo deve mudar a cor oficial para personalizada Na cor primária, vamos fazer essa cor de preenchimento como essa cor azul como essa e a cor secundária será branca como essa. Até agora, tudo bem. Vamos descobrir o tamanho desse ícone. É 56 por 56. Vamos fazer esse tamanho, pois 56 56 é demais porque adicionamos o espaço, vamos diminuir o tamanho e vamos fazer com que 28, 28 seja pior. E acolchoamento, o acolchoamento deve ser pequeno. Então, vamos ver o espaçamento entre esses ícones. Vamos pegar um ícone aproximado. Vamos fazer uma estimativa aproximada de que deveria ser seis. Vamos fazer com que seja de seis em pixels e seis. Ok, agora podemos mudar isso para 56 assim. Está bem? E o espaçamento é dois, vamos fazer com que isso não tenha preenchimento, o preenchimento seja seis, o espaçamento é Agora vamos ver o raio do canto, clique aqui e o raio do canto é nove e vamos aqui, depois no raio da borda, não no raio do canto OK. E no IconHo a cor primária será primária, cor secundária será secundária, será assim e agora temos que adicionar o tamanho intermediário Se verificarmos o tamanho intermediário, é 20, adicione a lacuna entre as linhas aos contêineres. Deixe o contêiner na linha de layout ter uma lacuna de 20. Esta seção está ok. Agora temos essa seção de links rápidos. Vamos criar. Pode simplesmente duplicar esse contêiner desta forma, clique com o botão direito e duplique Agora, aqui, o que temos que adicionar é texto do link selecionado e aqui remover esta imagem e aqui alterá-la para link fraco e alterar o tipo de gravital d desta forma e, em seguida, temos que adicionar o assim no menu é fácil Também removerei esta seção e aqui o menu de pesquisa. Vamos pegar esse menu de pressionamento de palavras , colocá-lo assim e selecionar o menu. Por enquanto, vamos selecionar o menu principal, pois o menu e o layout serão iniciados. O alinhamento vertical será iniciado Acho que está começando. É e aqui temos que mudar o design. Então, antes de fazermos qualquer coisa, vamos mudar o design. Então, a tipografia será composta por botões e a cor do texto também será essa cor branca, como essa, entre os tamanhos, vamos fazer um ponteiro. Não, não precisamos de um ponteiro, então vamos ao conteúdo e ao alinhamento vertical ponteiro não é uma animação, não é um indicador. Nós não precisamos disso. E o ponto de interrupção móvel não será nenhum, porque não precisamos adicionar o menu suspenso móvel ou o menu Hamburger a esse menu Putter E agora vamos para Estyle em eTyleOh vamos transformar a cor do texto em primária e ativa, transformar a cor do texto em primária e Algod, agora temos que mudar esse Aqui temos o número de testes e se adicionarmos esse S? Funcionou bem. Tudo bem. E quanto ao tamanho intermediário? I entre o tamanho é 30. Vamos fazer com que o tamanho intermediário seja 30. Aqui, não, não aqui no contêiner, entre o lado da fileira deve estar 30. Ok, vamos duplicar esse contêiner e criar o terceiro menu antes de fazer isso, temos um problema, então esse menu não está à esquerda, então vamos torná-lo Adicione padina zero horizontal e ficará perfeito assim OK. Agora, aqui, o que temos que fazer é adicionar as informações de contato, copiar as informações de contato. Mude o título desta forma, então o que temos que fazer é adicionar essas informações. Vou remover esse menu e aqui adicionarei um título contêiner recém-criado e, nesse estilo, alterarei tipografia para o parágrafo e a cor do texto será branca É um parágrafo? Sim, é um parágrafo. Sim, eu paragrafo. Copie o telefone. Escreva apenas um telefone como este, depois adicione o PR assim e vamos duplicar isso e aqui está o e-mail, copie o e-mail e cole assim Então temos o endereço, copiamos o endereço e duplicamos este com o endereço e o BR para quebrar a linha Então temos horas para duplicar isso. On ns at the Bo. Agora, o que temos que fazer é encontrar o tamanho do inbten. O tamanho do dormitório é dois. No entanto, entre aqui as informações de contato e o texto são 30. O contêiner principal entre ou o tamanho deve ser 30 e eu clicarei aqui para adicionar um novo contêiner a este contêiner. Remova a desculpa, vou clicar aqui e remover a margem e os preenchimentos, depois colocarei esse conteúdo dentro desse contêiner, selecionarei o conteúdo e o colocarei dentro desse contêiner assim Acho que esse deve ser o e-mail principal, bom e selecione que a linha de layout do contêiner e da linha deve ser cobrada E aqui temos outro problema, então não precisamos desse preenchimento, se removermos isso Quando removemos isso, está corrigido, mas precisamos do preenchimento, podemos adicionar o espaço entre os dois dessa forma. São dois. Sim, são dois. Tudo bem, até agora tudo bem e agora temos o conteúdo, e agora o que temos que fazer é clicar no rodapé principal e aqui temos espaço como 30 na parte superior Vamos fazer os 30. Clique no preenchimento e, na parte superior, faça 30, 140 e, à esquerda, 140, assim Agora, no layout, temos que adicionar o espaço uniformemente ou o espaço entre eles deve ser o caminho. Novamente, se verificarmos, novamente, se verificarmos, temos 88 como o tamanho intermediário. Vamos adicionar 88 como o tamanho intermediário. Aqui, o tamanho da coluna deve ser 88 assim. Agora ficará assim e é muito bom que tenhamos um problema. Esta imagem deve ser para que o único que possamos fazer é clicar na imagem e na margem, basta adicionar uma margem negativa na parte superior desta forma. Ok, isso será baseado. Então, agora clique em publicar e agora temos um rodapé perfeito, e então temos que criar essa parte de direitos autorais Agora, se verificarmos isso no design, vamos abrir essa nova janela e rolar para baixo, o rodapé ficará assim Aqui temos que adicionar espaçamento para que possamos simplesmente clicar aqui e, em Avançar e na margem, adicionar Margem no topo 20 Publique e vamos ver o design. Agora temos que adicionar o crédito da foto, então vamos editar a próxima lição. 126. Seção de direitos autorais de rodapé do design: Agora vamos criar essa seção de direitos autorais. Vamos começar. Primeiro, vou até o rodapé e vamos criar um novo contêiner, e nesse contêiner, temos que mudar a cor A cor é a cor que temos na seção acima, para que possamos facilmente usar o que estilizamos em cores, deixar a cor usar nossas cores globais. E aqui, vamos descobrir o tamanho, a altura é 64. Na verdade, calculamos a altura usando esse texto e, por enquanto, vamos adicionar essa borda branca. Vamos descobrir os detalhes da fronteira. O traçado é um pixel, então vamos aqui e podemos pesquisar facilmente HR, temos um divisor, então basta colocá-lo assim e um tipo, a cor deve ser branca e a lacuna deve ser zero OK. Acabamos de adicionar o divisor e agora temos que adicionar isso pegue uma cópia do t e vá para Main Butter e clique aqui para adicionar o título, adicione um título Fez. Vamos adicionar o título, texto aqui e a gota do dragão neste contêiner assim OK. E no estilo, mude para Acho que o tamanho é do tamanho do botão e secundário. Vamos ver. Vamos ver. Sim, o tamanho é do tamanho do botão. Sim, deveria ser médio, certo? Sim, médio 20, médio. OK. Bom. Agora, o que precisamos fazer é adicionar um pouco de espaçamento. O espaçamento é de 20 por 20, certo? Sim, é 20 por 20. Então, no título, avance com antecedência, preenchimento superior deve ser e o preenchimento inferior deve ser 20 OK. Então, o que precisamos fazer é adicionar o texto. Então, aqui temos que adicionar a corrente aqui. Para adicioná-lo, podemos simplesmente ir até aqui e, na tag dinâmica, podemos obter a data atual. Vamos ver a data atual aqui. Temos a data e hora atual, selecione-a e o formato da data será, vamos ver o formato da data. O formato da data está correto, mas só precisamos da data. Não precisamos, só precisamos do aqui. Vamos ver se nos preparamos para usar apenas a personalização. No modo personalizado, podemos simplesmente adicionar esse Y e remover o resto dos detalhes como este. OK. Agora, com antecedência, podemos adicionar essa parte de direitos autorais. Adicione apenas os direitos autorais em Depois estará o resto do Depois será o resto dos detalhes como este. OK. Deveríamos ter um espaço. Ok, bom. E agora glicon publique para publicar o design, e agora, se virmos no design real, ele ficará assim E aqui temos um problema. Os ícones são muito grandes, então vamos corrigir isso, clique aqui. E no tamanho, vamos torná-los um pouco pequenos, como 45, fazer arroz quatro e o espaçamento istelo, e agora está bonito e clique em publicar Acabamos de criar toda a seção da página inicial. Agora, o que precisamos fazer é adicionar a animação e tornar esse design compatível com dispositivos móveis e , em seguida, temos que fazer a próxima lição. 127. Adicionar efeito de movimento: Ok, agora vamos adicionar o efeito de movimento ao nosso site. Então, já estamos em algum efeito de movimento. Por exemplo, se eu clicar neste título e, com antecedência, ir para o efeito de movimento, ir para o efeito de movimento, podemos ver o desvanecimento na animação de entrada normal Portanto, a partir da segunda seção, não adicionarei itens individuais, em vez disso, adicionarei para toda a seção. Então eu clico na seção e avanço com antecedência sobre o efeito de movimento na animação de entrada, faço com que ela desapareça, assim Então, vamos fazer a próxima seção e a próxima seção. Portanto, toda vez que você cria um site, pense sempre no usuário. O usuário não precisa de nada sofisticado. Ele precisa ter uma maneira simples de obter uma solução para o problema deles. Portanto, temos que resolver isso em vez de adicionar muitas animações e complicar nosso site Portanto, adicionar esse tipo de efeito de movimento simples nos dará o melhor resultado. Ok, agora eu clico em Publicar e no rodapé, não vou adicionar nenhum tipo Imagine. Ok, agora se eu verificar o design, vamos abrir o design em uma nova guia e ele ficará assim. OK. Agora, no próximo vídeo, vamos corrigir o problema de responsividade ou tornar o site responsivo para dispositivos móveis 128. Corrigir problema responsivo - Parte 01: Ok, vamos tornar nosso site responsivo para dispositivos móveis. Antes de entrarmos no celular e no tablet, vamos ver a aparência do nosso site na versão para desktop. Para fazer isso, podemos usar a ferramenta de teste responsivo do site. Ou você pode simplesmente usar o verificador de responsividade móvel do Google e você verá muitos resultados, então eu obterei esse E aqui, atualmente, se eu adicionar o URL do nosso site, ele nos mostrará apenas a página do modo de mantenedores, e também é conhecido como responsivo para dispositivos móveis, não precisamos nos preocupar com a No entanto, precisamos tornar o site ativo para verificar a capacidade de resposta do celular Então, vamos fazer isso. Acesse o site, painel, aqui e aqui, clique no modo de manutenção. E aqui, vamos escolher o modo a ser desativado e clicar em Salvar alterações. Ok, agora eu clico em Verificar. Na verdade, eu tenho que limpar o cache. Ainda não falamos sobre o cache, mas se você ver esse tipo de cache, plug-in ou esse tipo de, posso simplesmente clicar em poleiro e ir aqui, clicar em Verificar Ok, aqui, nosso site será exibido em um desktop de tamanho 1024 e não ficará nada bom, mas podemos resolver isso no tablet para você Vamos descobrir um tamanho diferente e clicar nesse tamanho e depois clicar no terceiro tamanho, e aqui vai ficar assim, então eu vou ao nosso editor, e aqui temos a versão para tablet, e o tablet fortet mostrará de dez a 24 fixos, que significa que podemos ignorar o 1024, mas a partir daqui, temos que considerar o design Na verdade, no 12 18, acho que isso também se aplicará ao tablet. Vamos ver, e então temos que ir para esse tamanho e ok, aqui temos um problema com esses botões. Então, vamos consertar isso. Acesse o design e clique aqui para ver qual é o problema. Primeiro, vamos ver a configuração do contêiner, clicar no contêiner e o contêiner ficará cheio com. Ok, não há nada para consertar. E aqui, vamos ver a imagem na imagem que não temos nada para corrigir e vamos ver esse contêiner. Ok, aqui temos 90 como preenchimento e margem esquerdos, então vou removê-lo Em seguida, irei para o contêiner principal e o layout. Vamos fazer com que seja um espaço entre eles. No entanto, aqui temos um problema porque esse especialista confiável tem o direito de corrigi-lo. E se adicionarmos a coluna gasass 90 60. Vamos adicionar esse GaAs 60, e quando adicionarmos o Gapass 60, tudo ficará perfeitamente bem e, aqui, temos que justificar o conteúdo Agora está corrigido e vamos publicá-lo e clicar em Heck para verificar o design Aqui dizemos esse problema para corrigi-lo, vou até o design e clico neste botão e no lado direito, temos espaço. Se removermos esse lado direito, deslocando, poderemos ganhar algum espaço como esse E aqui vamos fazer deste site dois, porque no design aqui temos o SS 20 e aqui temos entre os tamanhos 20. Ok. Agora, se publicarmos e verificarmos o design, isso deve ser corrigido. Nós podemos verificar. Ok, eu consertei assim, e ok, agora vamos para a próxima seção. Aqui, temos alguns problemas de alinhamento, então não há muito que possamos fazer sobre isso, mas vou revisar a página e a única coisa que podemos fazer é remover a altura igual e ainda assim ela se ajustará de acordo com o texto, mas vamos aqui, mas não será um grande problema Então, vou clicar no carrossel e aqui vou remover a mesma altura, e veja, quando fizermos isso, não parecia muito bom, mas vou publicá-lo E agora, se eu verificar o design, ele se ajustará apenas de acordo com o texto, o que significa que o ícone ficará alinhado com o texto, apenas a caixa de serviços não estará alinhada corretamente, mas isso é muito melhor do que Agora vamos para a próxima seção e aqui está bom, e agora vamos para a próxima seção e aqui está tudo bem e, no rodapé, está bom, vamos para o próximo tamanho na área Atualmente, estamos em 13 66, vamos usar esse tamanho . Esse tamanho parece bom, e aqui temos o mesmo problema que já tivemos, mas está muito melhor do que antes. Agora vamos para o próximo tamanho aqui, vamos ver se Earl está bem. Agora, essa parte ficará boa e agora temos um grande espaço na janela maior, ela ficará assim, mas acho que está bem porque está na janela maior, não na janela pequena. Então, vamos manter isso assim. Ok. Vamos passar para a versão para tablet. No design, vamos clicar em Tablet Prod criar a partir daqui Aqui temos muitas coisas para consertar. Vamos começar um por um. Primeiro, temos que corrigir o cabeçalho. Clique no cabeçalho para editar e aqui acho que temos um problema com a configuração do site. Se eu for para a configuração do site e, no layout, adicionarmos o preenchimento padrão. Na verdade, posso fazer todas essas alterações conceituais e, no preenchimento do conteúdo, na verdade, adicionamos o preenchimento, mas não podemos alterá-lo a partir daqui, então vamos voltar e reconhecer o cabeçalho para editar o cabeçalho e aqui, raspar o contêiner e avançar, remover o preenchimento desta essas alterações conceituais e, no preenchimento do conteúdo, na verdade, adicionamos o preenchimento, mas não podemos alterá-lo a partir daqui, então vamos voltar e reconhecer o cabeçalho para editar o cabeçalho e aqui, raspar o contêiner e avançar, remover Quando removermos o acolchoamento, ele ficará assim Em seguida, vamos adicionar a patente direita como 30, máx . 20 e os acolchoamentos esquerdos 20. Ok, eu seleciono esse segundo contêiner e vamos deixar direção vertical e justificar que o conteúdo será iniciado e, a partir daqui, nosso logotipo está bom Se eu avançar, temos uma margem superior de 20. Não, são 20, ok. Quando alteramos as opções ou os valores a partir daqui, isso só se aplica tablet Potrit, não se preocupe, nada acontecerá Então, aqui aqui, temos margem superior de 24. Vamos fazer com que seja zero. Na verdade, temos dois. Então aqui temos a margem superior passagem 24 e a parte inferior, sete, então vou clicar aqui e vamos adicionar a margem negativa novamente. Ok, vou manter isso configurado. Aqui temos a adição para passar 30, vamos mudar para 220 e para a direita, basta clicar aqui em uma cadeia e a direita será zero, parte inferior também será zero, a esquerda será zero. Agora está centralizado e agora temos que pensar em menu a menu. Vou mudar esse ponto de cozimento para celular e, Vou mudar esse ponto de cozimento para celular quando mudarmos o ponto de interrupção para celular, podemos ver o menu completo e, em seguida, temos essa caixa de imagem A caixa de imagem tem uma largura personalizada, vou deixá-la cheia assim. Ok, até agora tudo bem. Agora vamos fazer com que essa entrada seja de tamanho duplo. Portanto, o tamanho do Ibuttwin deve estar no contêiner e Vamos fazer dos profissionais 20, 22 semanas, 15. Sim, 15 vai ficar bem. Então, quando verificarmos esse ícone do Claus 24, ele será maior E por causa desse ícone, esse menu será maior. Então, quando o menu for maior, essa imagem de fundo não será exibida corretamente, então vou esconder esse ícone do Claus 247 no tablet Para fazer isso, seleciono a caixa de imagem e vou para Avançar em Avançar. Clique em RSF Sis, depois clicarei em Hight no tablet Ok. E agora eu clico em publicar e vamos ver a prévia real, mas temos que ajustar mais. Mas, por enquanto, vamos ver a prévia do tablet. Verifique. A pré-visualização do tablet ficará assim, mas aqui temos mais para editar. Então, como primeira etapa, clico aqui e vamos adicionar a parte inferior do bloco como 20, assim, clico em publicar e clico aqui, margem superior será 20. Isso vai ficar bem? Sim, está tudo bem. Agora eu clico em publicar, vamos verificar novamente. Agora está muito melhor e eu gosto desse design. Se não gostarmos nem um pouco disso, podemos simplesmente ocultar toda essa seção no tablet e criar uma nova seção. Mas, por enquanto, isso é muito melhor e agora vamos passar para a seção de heróis e o resto do design. 129. Corrigir problema responsivo - Parte 02: Ok, agora temos que criar esse design de página inicial adequado para o tablet Eu clico na página Editar e isso me redirecionará para a página inicial e aqui temos a seção de heróis, então eu escrevo contêiner e clico em Editar contêiner E aqui, o que temos que fazer é primeiro ir para Advance on Advance, vou mudar o bloco de notas para 60. O preenchimento esquerdo será de 60 a 60 é maior Vamos fazer com que seja 30 30 assim e a parte inferior será 30 e na parte superior, temos que torná-la maior que 150. E quanto a 160? 160 é muito curto e isso deve ser assim. São 230. Tudo bem, parece bom e o tamanho da fonte está bom, acho que qual é o tamanho da fonte? Seu tamanho de fonte é 60, talvez possamos reduzi-lo, mas, por enquanto, acho que está bom. Clique em publicar e, se quisermos reduzir o tamanho da fonte, basta clicar na configuração lateral e aqui temos fontes globais e clicar neste ícone de edição e aqui temos a versão Ptrit para tablet, para que eu possa fazer isso como 50 50 vai ficar bem. Vamos fazer 52 e subdin vamos fazer 20, 21, Ok, o parágrafo será 18 e o botão será 21 Ok, agora clique em Const changes, alteramos a fonte global para que ela se aplique ao resto do design ou design como este Agora, novamente, estamos aqui, boa aparência e apertando o botão, se quisermos, podemos reduzir o tamanho do botão um pouco menor, como 20, 30, 20, 30, assim. Agora temos a próxima seção e o cabeçalho está aqui o que temos que fazer. Primeiro, é uma grande bagunça, primeiro clique no contêiner e, em seguida avance a partir do preenchimento e adicionamos o preenchimento Acho que o adicionamos como 30. Vamos ver, o preenchimento direito e esquerdo deve ser 30. Vamos fazer com que 30 seja 30, a esquerda seja 30. Agora temos que mudar essa posição, então clique aqui e avançando aqui, temos o offset Vamos colocar aqui e funcionará assim e temos que consertar essa caixa de imagem, a caixa de imagem e, com antecedência, fazer o deslocamento assim E aqui temos um problema. Na versão para tablet, não temos espaço para essas duas seções, então eu posso clicar no contêiner e no layout, mudar a direção para a linha e isso vai subir e descer assim. Então, na fila, adicionarei o Gap pass 20 assim. Então clique aqui, tudo parece bem, e agora eu tenho que mudar isso novamente. Vamos alterá-lo para que o offset seja assim. Então aqui parece bom e os botões estão bons aqui o que temos que fazer, clique aqui e avance, remova o preenchimento, faça o preenchimento direito como 30, paddinus esquerdo 30 Ok. Aqui, esses ícones parecem bons. Se quisermos mais espaço no Carsel, podemos exibi-lo como um só O design ficará assim e está muito melhor do que antes, e outros espaçamentos são bons, mas se quisermos, podemos alterar essa linha 60 para 30 ou 2020 e não precisamos nos preocupar com a coluna Ok, até agora tudo bem. Em seguida, temos nossos fornecedores dedicados. Aqui, temos um espaço enorme para remover o espaço, posso simplesmente remover a margem para zero. Agora está bom e clique aqui, depois remova o preenchimento aqui, será 30, 30 . Isso é muito bom, podemos adicionar dois provedores ao mesmo tempo e ficou bom, então vou continuar assim Até aí tudo bem, então o que temos que fazer aqui. Aqui temos, novamente, uma grande bagunça, clique aqui e, em Avançar, remova os preenchimentos e faça o padrão direito como 30, preenchimento esquerdo como 30, como fizemos antes, podemos ir para o layout e mudar a direção para a coluna e tudo ficará bem. Se quisermos, podemos aumentar essa imagem e o texto na parte inferior Vamos fazer isso. Para fazer isso, podemos avançar facilmente. Temos que observar com antecedência, precisamos clicar no contêiner, então clique no contêiner e, com antecedência, podemos alterar o pedido. Vamos fazer com que seja N e será assim. Mas não funciona lá, então vamos dizer isso. Agora temos um problema aqui, este funcionará bem, mas o inferior não está funcionando. Eu clico neste contêiner e na margem superior, está na margem superior 70 e aqui, eu clico neste e com antecedência, altero o deslocamento para assim, até agora tudo bem Tudo bem Agora não temos nada para consertar aqui. Então vamos voltar e aqui está uma grande bagunça, clique aqui e , com antecedência as duas margens superiores devem ser 1 a 20 e o preenchimento esquerdo deve ser 30 A direita é 30 e a esquerda é 30. Então aqui temos esse carrossel de loops e aqui podemos simplesmente mudar esse lado nesta jogada Agora parece bom. Sim, isso é muito fácil e eu clico aqui e aqui temos um ritmo de 30 Vamos fazer com que seja assim. Por enquanto, tudo bem aqui, temos que mudar 62 20. Se quisermos, podemos criar esse centro, mas não precisamos fazer isso agora ou podemos simplesmente nos alinhar como se esticássemos Podemos fazer do alinhamento a si mesmo um alongamento. E agora temos que editar o rodapé. Acho que a página inicial parece boa. Então, vamos ao rodapé e, novamente, é uma bagunça. Antes de prosseguirmos, clico em publicar para publicar as alterações E se formos para a versão desktop, nada mudará porque mudamos tudo na versão para celular ou tablet. Ok. Agora desça e aqui, clique em Rodapé, depois clique em Salvar e deixe aqui o que temos primeiro, eu clico aqui em Avançar. O preenchimento direito é 30, e o preenchimento esquerdo é Agora, o que precisamos fazer é que a lacuna da coluna seja menor. Vamos fazer com que seja assim 30. Ok. E para melhor uso, podemos centralizar esse texto para que ele não fique muito perto do texto do lado esquerdo e aqui temos um grande problema vá para o estilo e altere o tamanho assim. espaçamento deve ser seis, vamos seis e faça um preenchimento assim. Parece bom. Aqui tudo ficará bem. Não temos muito o que editar lá, então eu clico em par ao vivo. E aqui temos um problema na parte superior, eu tenho que adicionar um preenchimento É parte do 20 Recon Publish. Agora vamos dar uma olhada no design. Agora vai ficar assim. Aqui temos um problema e o resto do design funcionará perfeitamente, mas temos um problema com isso. Caixas, na verdade, podemos removê-las. Se os removermos, não teremos esse tipo de problema no tablet e no celular. melhor maneira é escondê-los no celular e no tablet e vamos mantê-los apenas na versão para desktop. Mas se você quiser, basta ajustá-los de acordo com o site A, mas é um grande incômodo Assim, você pode conversar com seu cliente e removê-lo. Nesse caso, vou remover todos eles. Então, não quero dizer se esconder. Eu clico em Editar a página para editar a página inicial. E aqui, veja, vamos ver, aqui, clique em todo esse contêiner e, em Avançado, podemos ir para Responsivo e ocultar a porta móvel e ocultar no Agora, ele não será mais visto no celular e no tablet e podemos fazer o mesmo com isso no ID responsivo, mostrando apenas no desktop Novamente, aqui, clique aqui em Advance hide, aqui, resposta pode ser publicada e tem boa aparência, então, se a testarmos no site, não teremos mais esse problema Agora temos apenas os itens que só queremos ver. Talvez possamos corrigir isso se adicionarmos o carrossel de loop, mas eu crio um modelo diferente e adiciono esses detalhes usando o avançado cust temple, mas não sei se funcionará ou não, vamos continuar assim 130. Corrigir problema responsivo - Parte 03: Ok, agora temos que usar a capacidade de resposta móvel ou tornar nosso site compatível com dispositivos móveis Portanto, de acordo com o Google ou o Jamini cerca de 55 a 65% dos visitantes visitam sites usando o celular Portanto, tornar nosso site responsivo para dispositivos móveis é muito importante Então, vamos começar. Primeiro, como fizemos antes, podemos fazer isso a partir do cabeçalho. Vá para o cabeçalho e no cabeçalho, atualmente está assim. Primeiro e depois, clicarei no contêiner e, no contêiner, vamos fazer o preenchimento de 15 por 15, à esquerda e à direita será de 15 por 15 e aqui temos um problema Precisamos que esse menu de hambúrguer esteja no lado direito. Vamos consertar isso. Eu clico no contêiner e no layout, vamos seguir a direção Ok, vamos adicionar largura a isso. Eu clico neste item do menu Hamburger e aqui, defino o alinhamento à esquerda e, em seguida, o layout será, e ? Não, isso deve ser horizontal. E um estilo, vamos ver o botão de alternância no botão de alternância, vamos definir vamos Vamos definir esse tamanho como 35 de largura de borda, não precisamos de uma borda. E vamos mudar a cor para essa cor primária. A cor de fundo será acentuada ou vamos tornar a cor de fundo como cor primária e a cor será branca como esta Então temos que colocar isso aqui. Vamos tentar fazer isso com antecedência, vamos mudar com dois em linha sem padrão, sem largura total, não. Vamos personalizá-lo e adicionar o personalizado. Quando adicionarmos o personalizado com, ele ficará perfeitamente alinhado Vamos adicionar um personalizado com um 50. Vamos ver o que vai acontecer. Quando fazemos isso, fica assim. Para consertar isso, eu vou aqui. Vamos torná-lo em toda a largura. Quando o colocamos em toda a largura, ele fica assim e fica bem. Ok, aqui, aqui, isso está muito perto, para consertá-lo para o contêiner, vamos no acolchoamento direito e esquerdo O topo será 20, não há problema em ter 20 no topo, e o direito será seis e o esquerdo também será seis. Em seguida, no layout, a lacuna da coluna será 15 e a lacuna da coluna também será seis Agora clique aqui em Avançar, vamos alterá-la com isso. Aqui ainda temos o problema. O ícone é muito grande , então pressione o botão Tittal, o tamanho deve ser O tamanho será mais ou menos assim, e agora queremos fazer esses centros de alinhamento para fazer isso, podemos remover esses 20 inferiores e agora está muito bom Agora, o que podemos fazer é alterar a largura dessa imagem ou a largura desse logotipo. Vamos criar um logotipo com 80, vai funcionar, e agora podemos remover o tamanho intermediário e outras coisas e ganhar mais espaço. Aqui devem ser seis. E na linha, a coluna deve ser zero ou seis t deve ser zero. E agora esse botão tem mais largura para respirar, então vamos aumentá-lo. OK. Agora, nesse estilo, o tamanho do botão de alternância deve ser aumentado. Assim. Agora está muito bom, e agora temos que cuidar desse menu suspenso. Ok, para fazer isso, temos que ir para o menu suspenso e para o menu suspenso Vamos fazer um preenchimento vertical, e a distância será zero A tipografia será um botão. A cor de fundo será essa cor, cor do texto será o texto e a cor do texto está ativa, cor do teste é essa. No Ha, não precisamos da cor de fundo. Vamos manter a cor de fundo branca e, se estiver ativa, será a mesma. Agora parece bom. Ok, agora nosso menu ficará assim, e tudo bem, vou publicá-lo e vamos vê-lo no design responsivo Aqui está o celular e vamos verificar o ponto de interrupção do celular. Na verdade, temos que girá-lo assim e vamos subir e clicar em verificar Oh, aqui temos que esconder esse. Então, para ocultá-lo, clicarei nele e, em responsivo, ele deve estar oculto na porta móvel e clicar em publicar e agora eu verifico e tudo funcionará Na verdade, temos que adicionar preenchimento na parte inferior. Vamos adicionar aqui o contêiner, padrão inferior deve ser 20 assim, depois publicamos e vamos verificar no celular. Parece que é assim. Vamos adicionar essa lista de menu a partir daqui para fazer isso, podemos clicar facilmente aqui e em um menu suspenso de estilo, a distância será essa e clicar em publicar e ver o design. É muito bom e talvez vamos dar uma olhada em um ponto e dar uma olhada. Agora está parecendo bom. Agora, o que precisamos fazer é verificar isso no outro celular. Eu ficarei assim no Apple iPhone 8. Aqui, o que dizer do Samsung Galaxy? Vai ficar assim. E aqui temos o Apple iPhone X, e é muito bom. Então, agora temos que mudar o cabeçalho porque o texto do cabeçalho não parece nada bom. Então, vamos clicar aqui para editar a página inicial. Ok, na página inicial, primeiro, vou clicar aqui e depois em Ti ou Graffy nesta manchete Tipografia, vamos clicar aqui e acessar os telefones globais. Em telefones globais, vamos ver que o cabeçalho, o tamanho do botão principal ou o tamanho do texto serão 44, talvez 40 funcionem e o subdin seja 18. Que tal 20. 20 vai ficar bem. O parágrafo será 18 e os botões serão 18. Agora clique em salvar alterações e vamos clicar em voltar ao Editor e aqui vamos para o título Então, no título, temos muitos problemas, então temos que selecionar a tipografia Não sei por que não parece bom, mas vamos ver, vamos ver. Ok, então temos que ir para contêiner e atualmente temos a direita e a esquerda como 30, então vamos fazer com que seja 15, 15, a parte inferior também deve ser 15, tipo 15 e essa fonte não está boa, 40, vamos reduzir a fonte com 35, será 37 38. 36 será o melhor tamanho. Vamos fazer com que seja 36 e o tamanho do texto do botão também deve ser reduzido. Vamos fazer essas mudanças. Primeiro, publicarei a configuração atual e, aqui, clique na configuração lateral, clique na configuração lateral, depois vá para Camarões Goble e cabeçalho por cabeçalho Isso deve ser 36 e o subtítulo vamos reduzir isso para 18 e o parágrafo é 18 Não, não, se den deve ser 20, se o parágrafo for 18, o botão será 18. O tamanho do botão está bom. O tamanho do botão está ok, clique em agora. Salve os perigos, clique em voltar ao Editor e vá para o contêiner. OK. Agora temos que cuidar desse botão porque o botão não está com boa aparência, então vamos avançar. Vamos ao estilo e ao estilo. Devemos ter que reduzir o preenchimento, para que o preenchimento superior seja 12, seja 50 Que tal 15:15, 50. Uh, nenhum topo será 20, direito, 15, inferior, 20. Ok, será o melhor amigo. Portanto, se alinharmos o centro do texto, ficará muito mais claro, mas quando o alinharmos no centro, difícil de ler Então, vamos colocá-los assim. Sim, é bom aqui. Então eu vou publicá-lo. E agora vamos ao design responsivo e ver o design no telefone e é o Apple iPhone X. Ok, não é ruim Rotacione-o. Ok, está parecendo bom. Agora temos que continuar. Então, aqui, essa imagem está boa. E aqui temos isso, vamos lá. E tudo bem, escondemos essa parte 100% cuidadosa no celular, então não precisamos nos preocupar com isso. Então, vamos até o contêiner, e vamos virar à direita como 15 e a esquerda como 15. Ok, aqui temos um problema com o botão, então vamos fazer esses dois botões assim e o espaço entre linhas será 15. OK. E aqui está esse botão na parte superior. O motivo é que estamos na margem máxima de 20, então vou torná-la zero. Agora parece bom. Ok, parece que está bem. Então vamos aqui e aqui com antecedência para a direita, 15, esquerda 15. Fácil. Então aqui, essas partes estão procurando. OK. As peças estão bem e espero que isso funcione, esteja funcionando. Podemos reduzir essa lacuna. Então, vamos para Estilo na paginação. Vamos transformar essa lacuna em 15. Sim, 15 funcionarão. Então, aqui temos nossa seção de fornecedores, e aqui temos que adicionar uma margem superior. Então 12120 vai ficar bem, talvez possamos fazer 90, mas já adicionamos 120 a essas coisas. Então, vamos mantê-la entre 1 e 20. Ok, não temos nada para editar. Na verdade, temos esse link que não parece bom. Então, sim, vamos editá-lo antes de editá-lo. Trocamos a gordura direita e a esquerda? Não, vamos fazer isso de 15 por 15. Agora, vamos publicar essas alterações e vamos editar o modelo e, aqui, vamos selecionar o botão. Não está carregando no momento, mas está tudo bem neste botão. Desculpe, vamos fazer com que a margem seja zero na verdade, aqui temos a parte inferior como dez. Vamos manter como dez e temos que mudar a parte superior superior para zero, parte inferior será menos dez Acho que vai ficar bem, agora, clique em Publicar. Na verdade, podemos clicar em Salvar e voltar. E vamos ver o design. Ok, vou levar algum tempo. Ok, eu carrego. E aqui , está muito abaixo. Talvez tenhamos que adicionar algo como 50. Então, vamos clicar em Editar contêiner e aqui, na verdade, ele ainda está carregando. Então, vamos esperar até carregá-lo. Ok, vamos clicar novamente no modelo de edição e aqui vamos passar para o celular. Aqui, selecione o botão e, com antecedência, vamos fazer com que essa passagem máxima menos -15 funcione Agora publique e pronto. Agora vamos para a página. Novamente, vamos para a visualização móvel e aqui está tudo bem. Ok, vamos para a próxima seção e essa imagem parece boa. E aqui está o que temos que fazer. Ok, vamos clicar nesse contêiner e, na verdade. Vamos fazer esses ícones no meio para fazer isso, clique no contêiner. Alinhar itens já está no meio, então vamos clicar nessa imagem e centralizá-la Eu ainda não fui ao centro. No entanto, vamos fazer esse centro assim, podemos facilmente colocá-lo no centro, mas temos que fazer com que esse botão também se alinhe ao centro, mas não um botão É uma imagem, vamos mudar isso para coluna e ela ficará no centro, então teremos que adicionar algum espaçamento aqui, talvez uma linha de dez OK. Agora está bom e vamos fazer o mesmo aqui. Clique no contêiner e torne-o centralizado assim, clique aqui, torne-o centralizado e clique no ícone ou no link, então o link deve ser -15 ou 15 E faça com que se alinhe ao centro desta forma. Também podemos centralizar este item, sim, sim. Aqui, novamente, temos que fazer com que a coluna de uma direção seja dez aqui, torná-la no centro que tome d no centro e esse botão deve ser -15 Em seguida, faça com que se alinhe ao centro, aqui temos que ficar bem. Agora que acabamos de criar essa seção, na verdade, removemos a esquerda e a direita? Não, aqui temos que fazer essa soma como 15 da esquerda e da direita. Tudo bem. Agora temos que consertar isso. Primeiro, clicarei no contêiner e, com antecedência, vamos virar à direita como 15 e à esquerda como 15. Então aqui temos o carrossel. Então, aqui temos esse carrossel de loops. Neste carrossel circular, o que temos que fazer é transformar o lado em exibição em E em compensação, vamos torná-lo zero. Quando fazemos com que seja zero, parece bom. Se quisermos, podemos simplesmente adicionar dez. Vamos adicionar dez porque quando adicionamos dez, os dois lados se tornam iguais. Ok, não temos nada para editar lá. Ok, agora vou clicar em C publish, e agora o que temos que fazer é editar o rodapé Parece muito ruim, mas podemos facilmente melhorar isso. Então clique em cFoter e aqui o de cima está ok e temos problemas Vamos fazer isso à direita e à esquerda como 15. Aqui, o topo será 20, o esquerdo será 15 e também o direito será 15. E aqui o contêiner, será 2020, 20 vai ficar bem. E aqui no menu, clique em alinhar itens e este será alinhado assim Agora vamos começar. Não é bom. Aqui, parece que está tudo bem. Alongamento. Quando o fizermos esticar, ficará bem. Então aqui, na verdade, temos que fazer nada aqui, apenas alinhar corretamente e na seção de direitos autorais, temos muito a fazer e aqui o direito será 15 Na verdade, também não há nada a fazer na seção de direitos autorais. E nesse estilo, tudo parece bem. Tudo bem. Agora clique em Publicar e vamos ver o design no iPhone X. Apple iPhone X, clique em verificar Ok, aqui está nossa seção de heróis, e aqui está nosso menu de hambúrguer, a seção de heróis, a seção A. Podemos fazer esse botão virar para a esquerda. Então, se chegarmos para a esquerda , será muito melhor. Então clique aqui para editá-lo atualmente no rodapé principal, agora estamos na página inicial E aqui, vamos deixar um item de linha à esquerda e também vamos fazer o mesmo. Não, não, temos que virar isso para a esquerda. Nós podemos fazer isso. Vamos ver, vamos ver, posição à esquerda. OK. Tudo bem. Agora também está à esquerda e, no estilo, podemos remover a esquerda como o. E aqui podemos adicionar a parte superior como 2010, parte inferior também como 20. No entanto, não é necessário adicionar fundo. Ok, agora clique em publicar e, novamente, agora vamos conferir no design real. OK. Agora, aqui está nossa seção sobre, e aqui está nossa seção de categorias, e nosso fornecedor recebe dez toques, avaliações e rodapé No rodapé, podemos adicionar algum espaço a essa tag de RH. Além disso, se verificarmos isso, a primeira parte está no lado esquerdo, mas daqui, vai para o meio, mas está tudo bem. Se quisermos, podemos simplesmente fazê-los sair, mas vou continuar assim e vamos fazer com que esse RH ou o divisor, melhor passe, talvez funcione Clique aqui para editar o rodapé e o que aconteceu. Neste contêiner, vamos avançar em Advance, a parte inferior será 220. Se algo acontecesse lá. Tudo bem, clique em publicar bem. Agora podemos verificar isso também. Ok, parece bom. Agradável. Nos vemos na próxima lição, que criará a próxima página. 131. Design da página sobre — parte 01: Olá, pessoal. Agora vamos criar uma página no elemento Wordpress do Pro. OK. Aqui está o nosso design Figma, então eu vou para o painel do WordPress, e agora vamos para a página R. Ok, aqui, vamos clicar em Nova página e o nome da página estará acima. Vamos copiar esse título como título. E aqui, vamos colar e clicar em Editar com o elemento de tudo certo. Agora, o que precisamos fazer é criar o site e, se verificarmos o elemento ou o site, teremos uma seção semelhante à seção de heróis, essa seção da página inicial é semelhante à seção sobre, o que significa que podemos usar essa seção da página inicial para criar uma seção Quero dizer, a seção de heróis da página inicial. Então, vamos fazer isso. Além disso, essa seção de heróis da página sobre a página do blog e da página contato sempre se repete. Vamos criar isso como um modelo, o que significa que podemos usá-lo repetidamente em nossas páginas Earl. Agora, por enquanto, vou publicar esta página sobre e aqui abrirei o painel do WordPress em uma nova janela e, a partir daqui, irei para o modelo e salvarei modelo aqui, irei para a seção e, na seção, clique em adicionar nova seção aqui, vamos selecionar o tipo de modelo e a seção de aprovação e vamos adicionar o nome. Vou adicionar o nome como seção de herói para subpáginas e clicar em criar modelo Vou simplesmente remover essa biblioteca porque não precisamos dela. Agora, se verificarmos a seção sobre o herói da página a sessão principal do herói da página inicial é bem semelhante Podemos simplesmente copiar esta seção da página inicial. Vamos fazer isso. Novamente, abrirei o site em nova janela e clique aqui em Editar com elemento de, clique com o botão direito do mouse e clique em Copiar e vamos para a seção de modelos, seção de heróis para modelo de subpágina e clique com o botão direito do mouse e clique em colar E simplesmente cola assim. Agora, o que precisamos fazer é remover coisas desnecessárias. Primeiro de tudo, se formos aqui, não, não aqui, se formos para o design Figma, podemos ver a altura A altura é 600, então vamos selecionar o contêiner e aqui ele tem 800. Eu apenas faço com que seja 600 e aqui não temos o botão, então vamos remover o botão e excluí-lo. Agora, a imagem de fundo. Aqui temos essa imagem de fundo. Vou clicar na imagem de fundo e em Exportar, alterá-la para JPEG e clicar no botão Exportar Agora vamos ao pequeno png.com e diminuamos o tamanho desse arquivo dessa imagem de capa Agora eu clico no botão JPEG para baixá-lo aqui, vamos aqui em estilo container Vamos mudar essa imagem. Clique na imagem e aqui temos a imagem que acabou de ser carregada. Aqui, vamos adicionar o texto alternativo ou o texto antigo e clicar em Conselecioná-la, acabou adicionada desta forma e não precisamos fazer nada e agora clique em Publicar Agora temos esse modelo e, se formos para a página A e clicarmos no ícone dessa pasta, podemos ver nosso modelo na seção Meu modelo. Atualmente, não temos a seção de heróis para o modelo de subpáginas, então vou repetir a página. Quando eu a colar novamente aqui, temos a seção de heróis Eu posso simplesmente clicar em Inserir e clicar em Aplicar. Simples assim, basta adicionar. Agora só temos que mudar o texto. Veja, esse é o poder do elemento ou modelo. Vamos ao design do Pigma e copiemos o título. Venha aqui, coloque o título aqui e a descrição, copie a descrição e cole essa descrição assim. Agradável. No entanto, se verificarmos a descrição, aqui há um espaço pequeno como este. Vamos fazer isso, podemos adicionar R aqui, temos que aumentar isso e vamos adicionar R aqui. Então vamos adicionar R aqui e, novamente, temos que adicionar R após essa tomada. Vamos aqui, vamos adicionar B assim. Ok, muito bom. Agora eu clico em C publish para salvar. OK. Agora vamos para a próxima seção. Esta seção também é semelhante a esta seção. Podemos simplesmente copiar esta seção da página inicial e adicioná-la aqui Vamos fazer. Aqui está nossa página inicial e eu clicaremos nesta seção , clicaremos direito do mouse e clicaremos em Copiar Em seguida, em uma página, clique aqui e clique em Colar. Clique com o botão direito e clique em Colar. OK. E por aqui, não precisamos dessa caixa de imagem, então vou selecioná-la e excluí-la. Não precisamos desse. Basta selecioná-lo. Exclua-o. OK. Agora está muito bom e talvez tenhamos que mudar algumas coisas que verificamos aqui, não temos dois botões. Só temos um botão. Vamos remover esse subbotão e, se verificarmos o tamanho da fonte, o tamanho intermediário é 60, e clicarmos no contêiner principal e na lacuna da coluna 60, não precisamos fazer nada e simplesmente copiar o texto primeiro desta forma, depois copiar o segundo texto, copiá-lo para aqui depois copiar Vou clicar neste texto e clicar em Condo Bigate e aqui vou apenas adicionar esse texto e aqui temos que adicionar o botão de solicitação de agendamento, vamos adicioná-lo E depois de projetarmos completamente este site, criaremos ações para esses botões. Por enquanto, vamos adicionar uma tag de hash a esses links e agora temos que alterar essa imagem No estilo de imagem, não temos nada. Então, vou clicar nessa imagem e clicar em Exportar e o tipo de arquivo é PEG, depois ir para Ti PNG, adicionar a imagem e colocar no rádio o tamanho do arquivo assim, depois vir aqui. Escolha uma imagem na imagem como esta, copie o texto antigo desta forma e clique em Ocultar e ela acabou de ser adicionada desta forma e não temos nada para fazer Agora temos que ir para a próxima seção e criar a próxima seção também é bem fácil. É assim que, quando criamos a página principal, podemos simplesmente copiar o conteúdo de lá. Então, posso clicar com o botão direito do mouse nesta seção sobre e clicar em Condupl agora, o que posso fazer é clicar no contêiner e clicar nesse contêiner dentro do contêiner principal e colocá-lo assim Agora, vamos mudar o texto. Aqui, vamos mudar esse texto primeiro desta forma, depois vamos copiar esse texto e depois o texto. Novamente, temos que adicionar sumin aqui, então copie o título do tum, duplique e cole Agora, um bloco, vamos mudar esse texto para usado, assim. Em seguida, temos que adicionar a lista de substitutos. Vamos clicar em Adicionar elemento e na lista de pesquisa. A lista de ícones funcionará, adicione-a assim. E aqui vou remover os itens e manter apenas um item e depois clicar neste texto para editá-lo, copiá-lo e colá-lo. Agora clique neste ícone e temos esse círculo. Clique em inserir para inseri-lo e vá para estilo sobre estilo, a cor do ícone é a cor primária e vamos ver o tamanho do ícone. O tamanho do ícone é 16 por 16. Faça com que não seja 60, 16. A lacuna veja a lacuna, aumente, pressione e a lacuna é oito, faça a lacuna oito e no texto, vamos mudar a cor para essa cor de tipografia Vamos ver que esse texto é tipográfico para que possamos manter os estilos de texto tipografia ou OK. Agora, o que eu tenho que fazer é duplicar esses itens por vezes e adicionar o conteúdo Basta copiar o conteúdo, basear o conteúdo aqui e copiar o conteúdo Aqui, então copie este conteúdo e copie este, passe-o. Agora, vamos alterar o tamanho intermediário aqui, o espaço entre eles. Vamos ver o espaço entre e é 20. Vamos criar um espaço entre 20. OK. Agradável. Agora temos que adicionar esse copiar/colar que tem esse sabor e não precisamos do botão, exclua o botão. Ok, agora, vamos ver. Agora temos que adicionar essa imagem para que a imagem, exporte-a como JB EG, clique no botão exportar nossa missão de Exportar para exportá-la Em seguida, em PNG minúsculo, adicione o PNG assim. Em seguida, clique em JPEG para baixar esta imagem e agora vamos até cerca, clique nesta imagem e clique em escolher imagem aqui, vamos apenas adicionar a imagem COVID, passe assim. Agora clique em selecionar bom. Agora, o que temos que fazer. Agora temos essa categoria com a descrição do empréstimo. Então, vamos fazer isso. É muito fácil porque já temos essa seção na página inicial, mas há algumas mudanças, mas precisamos apenas desse design. Então, vou copiar a seção inteira daqui e ir para a página e colar o conteúdo, e aqui não precisamos desse. Exclua porque não há nenhum botão aqui, ok. Agora, aqui, vamos copiar o título. Acho que o título é o mesmo que esse. OK. OK. Agora não precisamos desse recurso de carrossel Na verdade, podemos corrigir isso facilmente com grade, não com colunas. Então, vamos tentar. Eu clico em adicionar elemento e adicionarei uma grade como esta na configuração da grade, também definirei a massa da coluna e a linha será duas e as lacunas serão 20 assim. Então, o que posso fazer é adicionar essas estrelas. Primeiro, temos a verdadeira grade, vamos colocar essa grade na parte superior, então vou clicar aqui e adicioná-la assim. Então, a partir daqui, vou ver a caixa de imagem e adicioná-la assim na grade, removerei a margem e os preenchimentos e agora vamos adicionar esta aqui Então, novamente, temos este, depois este e agora temos que aumentar a contagem de linhas da grade. Clique em concreto, vá para o layout e altere a linha para três linhas e adicione-as desta forma. Agora acho que adicionamos o carrossel Dt I will mother, clicamos aqui, clicamos em Condolete e também não precisamos desse, então vou OK. Agora, isso está perfeitamente alinhado e não precisamos fazer nada Simplesmente aparece assim e agora temos que editar o conteúdo. Clique na caixa da imagem e em um estilo, altere o alinhamento vertical Topo. E agora vamos adicionar esses detalhes extras. Primeiro, temos o texto na descrição, vamos adicioná-lo assim e adicionar o BR, acho que deveria funcionar e adicionar outro BR, ok, bom. E agora esse texto deve aumentar um pouco para fazer isso. Podemos simplesmente adicionar a tag B dessa forma. Acho que não está funcionando. B. Não está funcionando, não poderemos usar a caixa de imagem porque temos essa linha extra, então temos que criar isso a partir do scribe ou podemos usar CSS, mas adicionar CSS é a maneira mais fácil Vamos adicionar o CSS e ver o que podemos fazer. Então, primeiro copiarei esse texto e substituirei esse texto e, como fiz antes, adicionarei duas linhas de quebra de BRO como essa e aqui adicionarei uma nova tag chamada span. Esta é uma tag HTML e uma extensão flash para fechar a tag span, e aqui adicionarei o subtítulo da caixa de categorias igual à classe class OK. Agradável. Agora, isso é um SMLC classe HTML que acabei de criar, então vou copiá-la e clicar em publicar e aqui vou para o web design personalizado dos EUA ou vou para o painel do nosso site e aqui temos a aparência e clicarei em Personalizar Na personalização, podemos adicionar ESS adicionais. Para adicionar ESS adicional, posso copiar o CSS novamente e vir aqui, adicionar pontos porque é uma classe e colchetes como esses, então adicionarei o tamanho da fonte como vamos ver, vamos ver O tamanho da fonte é 20, 20 x. Acho que isso deve funcionar agora. E vamos até a página sobre e reprimir isso e ver se funcionou ou não Ok, está funcionando. Este texto é maior que o texto da janela para confirmá-lo, vou abrir esta nova janela e dar uma olhada, certo, vá para o Inspec e esta No Inspec, temos span e aqui temos nossa classe CSS. Se eu realmente tenho o mesmo tamanho, não , é do mesmo tamanho, então não precisamos fazer isso. Esses dois itens dizem que este deveria ser 21. Aqui, eu tenho que fazer 21 assim e clicar em Publicar. Agora, se eu verificar a partir daqui, devemos ver o Teste 21, clicar aqui e aqui temos 21 e ver com a diferença, legal. Agora podemos fazer o mesmo com o resto desta caixa de imagem. Clique aqui e cole este texto e vamos para aqui espaçar o conteúdo real, então para obter o conteúdo real, vou para o nosso arquivo de texto de conteúdo e em texto a partir daí. 132. Design da página sobre — parte 02: Eu tenho as categorias com descrição pequena e longa. Então, primeiro nós já criamos, e depois temos a saúde da mulher, copie o texto e aqui está interessante Acho que sentimos falta disso. Então, vamos para a página inicial. E na página inicial, sim, simplesmente ignoramos a mulher, mas podemos fazer isso porque podemos obter a forma perfeita com esses seis itens. Então, vamos ignorar isso. Então, vamos fazer esse exame de saúde e cuidados preventivos. E em uma pequena descrição, adicionarei esta na descrição do empréstimo, aqui temos a descrição do empréstimo. Ok, então temos cuidados pediátricos. Então, para o tratamento periátrico, eu tenho que copiar essa descrição e colar assim, depois copiar o texto, o texto Na verdade, adicionamos o mesmo texto ao primeiro item, então temos que alterar o primeiro item e alterar os detalhes do primeiro item dessa forma, ritmo assim. Agora temos esse quinto ícone. Vamos aqui, andando assim, copiando o texto. Você pode não ver a parte que eu copio no texto porque eu a abro na minha segunda janela desta forma. Então, novamente, copie todo esse texto e vá para o subord mental, temos sua descrição OK. O último. Vamos copiar o formato daqui e colá-lo. Agora, fique assim, copie este, cole assim. OK. Agora, o que temos que fazer é colocar essa imagem no topo, como alinhamento vertical, no topo, e temos que fazer isso para um item, mas podemos simplesmente escrever e clicar em copiar e escrever e colar esse tipo Ah, não está copiando, então vamos clicar aqui e copiar. Em seguida, clique aqui e cole esse tipo. Nada aconteceu. Vamos ao estilo. Sim, eu aconteceu, mas não pareceu. Vamos aqui e fazer assim. Ok, clique em publicar e vamos conferir no design. Eu ficarei assim, o que significa que criamos com sucesso a seção de descrição do designer. Agora temos que projetar a seção de blocos. 133. Página de blog de design — parte 01: Olá, pessoal. Agora é hora de criar esta página de blog no Elementor Então, vamos ao painel do Elementor e agora estou na seção Earl Pages. E se formos para Post e Earl post, temos um post Então, vamos começar a projetar. E, novamente, vou para Earl Pages e, a partir daqui, temos a página do blog Então, por enquanto, vamos excluir esta página do blog e começar do zero, clicar na lixeira e, por algum motivo, o carregamento do site está muito lento Talvez seja por causa da minha conexão com a Internet. De qualquer forma, agora vou para a lixeira e clico em Excluir permanentemente Agora, o que eu faço é clicar nesta nova página do anúncio. Em seguida, adicionarei um título como o blob da JB Family Clinic. Em seguida, clico em publicar, basta publicar esta página e seguida, movo novamente esta parte e vou para o painel e, no painel , nas configurações e nas configurações, vou para Vermelho. Leituras: aqui temos um local para configurar as exibições de nossa página inicial Aqui, eu a defino como uma página estática e a página inicial é JB Family Clinic, que é a página inicial. Para a página de postagem, selecionarei este sopro de limpeza familiar JB Agora, aqui, podemos mostrar no máximo as páginas de cães, mas acho que podemos ajustar essas coisas depois de criarmos a página, mas vamos configurá-la a partir daqui de qualquer maneira. E aqui precisamos mostrar seis páginas por ou seis postagens por página. Então, faça seis e clique em Salvar alterações. Em seguida, estamos usando o elemento Pro, então temos recursos profissionais para configurar esta página do blog. Então, para acessá-los, acesse modelos e clique em Salvar modelos. O que vamos fazer é criar um novo modelo para nossas páginas. Os dados do Wordpress Earl, postagens de blog, comentários e outras coisas são salvos como arquivos Então, aqui vou ver esse arquivo e aqui vou adicionar o nome como modelo de arquivo Vamos fazer isso assim. O modelo está errado. Tudo bem, agora clique em Criar modelo. Para esta biblioteca, vou simplesmente removê-la ou, se eu acessar meus modelos, aqui podemos encontrar nossa seção de heróis para subpáginas Vamos inseri-lo e clicar em App Ok, aqui temos a seção de heróis que já criamos, e aqui, clico neste título e no título, vou apenas selecionar o título do arquivo como este e a pequena descrição, selecionarei a descrição do giv, e talvez tenhamos que adicionar essas informações Vamos publicar este e clicar em Adição e incluir Earl Se disséssemos isso que Earl fornece, podemos ver ou podemos todas as informações relacionadas aos autores, data, resultados da pesquisa, arquivo de postagens, categorias e outras coisas que serão carregadas neste modelo Agora eu clico em Salvar e Fechar e ele é publicado, e agora já configuramos a página de postagem do blog. Então, vamos às páginas e visualizaremos a página de postagem do blog, e veremos a prévia atual quando visualizarmos a página da postagem. Então, atualmente, ele não mostra nada. Então, vamos corrigir isso. 134. Página de blog de design — parte 02: Eu apenas tento coisas diferentes para resolver o problema, mas ainda não tenho sorte com isso. Então, vamos tentar um método diferente. Por enquanto, vamos criar a arquipágina e, quando tivermos a arquipágina, ela deverá carregar o autor, a categoria ou outras coisas, se alguém solicitar Aqui nós adicionamos o título do Archiv, e agora temos que adicionar essa parte do Arch Post Eu clico aqui, clico em Cplexbx e clico na coluna de direção, e aqui pressiono o elemento adicionar e arrasto a seção do chipost, e aqui temos que adicionar traço esquerdo e direito 41 40 e a esquerda também será 140, e a parte superior deve ser e a parte superior Vamos descobrir o melhor espaço a partir daqui. São 12. Sim, não é 60, é 1220. Ok, agora vamos ajustar esse design. E atualmente, vou manter a mesma configuração por enquanto, depois vou para o estilo E e, a partir daqui, vamos ver que a lacuna da coluna é 220 a 20 e a lacuna bruta também será 220 e o alinhamento, vamos fazer o alinhamento à esquerda na imagem, o raio da borda, vamos ver o raio da borda, o raio da borda é misto, mas temos que verificar, é Vamos adicionar o raio do corpo como 20. Na verdade, precisamos apenas dos 20 primeiros, não da esquerda, parte superior e da direita, pois o espaçamento está bom, então vamos para o conteúdo e, no conteúdo, vamos ver se a cor do texto é a cor padrão Vamos fazer com que seja a cor do texto e a tipografia será substituída Não é? Vamos verificar o design do Figma Sim, deve estar sub PedInf por algum motivo dessa alteração no arquivo Figma Não sei o que aconteceu, mas deveria ser moderado e, novamente, para a data, temos que mudar a cor primária O tipógrafo será um parágrafo, seu tamanho e espaçamento Na verdade, essa data deveria estar acima, mas vamos mantê-la aqui por enquanto e o espaçamento é igual Esse espaçamento será bom, não 12. Agora, como a cor será texto, a tipografia colorida será parágrafo e o espaçamento também será Acho que não temos mais o link liberado, mas tudo bem e a paginação, temos que ajustar a denação da página antes de ajustar a nação da página, vamos ajustar esse parâmetro de conteúdo e, para meta, não precisamos comentar, basta remover o comando e a data e, em seguida, temos que verificar o seguida, temos que verificar o Qual é o comprimento? Vamos copiar esse texto e acessar wordcounter.net e encarar o cheque e temos 150 caracteres e 22 Vamos fazer isso como 22, nada, vamos fazer com que seja 150 aqui, a meta deve estar inativa, não precisa de separador e não precisamos mostrar o botão leia mais para a criação da página, vamos definir o limite de páginas em cinco, o que está sendo As configurações são boas e, na verdade, precisamos. Vamos adicionar aplicar uma mistura personalizada e vamos ver, então o que precisamos fazer é ir para o estilo e, com antecedência, adicionar uma borda. Vamos descobrir aqui que temos a fronteira. Acho que vamos manter isso assim. Na paginação, podemos mudar a cor para essa cor azul e vamos ver essa E aqui temos o tamanho mínimo de seis, mas o espaçamento, vamos verificar o espaçamento espaçamento será 30 e aqui não temos muitas opções de personalização, então vamos continuar assim e clicar em publicar. Isso é melhor para as páginas de arquivo, mas precisamos criar uma página de postagem personalizada para melhorar nosso site Vamos fazer isso na próxima lição. 135. Página de blog de design — parte 03: Ok, agora temos que tentar outro método para criar essa página de bloqueio. Vamos começar. Primeiro, vou ao nosso painel do Wordpress. Então eu vou me sentar e ler. Nas leituras, desmarcarei a página de postagem e ela ficará assim, depois clico em Salvar alterações Agora eu vou para páginas e páginas Earl, e aqui temos a página de bloqueio, então eu clico em Editar e clico em Editar com elemento, tudo bem Agora, o que posso fazer é adicionar o cabeçalho no modelo M, e aqui temos a seção do herói, subpágina, clique em Inserir, clique em Aplicar OK. Agora vamos adicionar essas informações. Primeiro copie o título, cole aqui, copie isso. Você tem que colar aqui e vamos adicionar BR, BR aqui. O próximo BR estará aqui. Vamos ver. Vamos ver. Ok, agora a parte do cabeçalho está pronta. Agora, o que vou fazer é clicar em um novo contêiner e adicionar o contêiner da coluna de direção. E aqui, como margem e preenchimento e adicionar preenchimentos à esquerda e à direita, temos 140, assim Então, também temos que adicionar a margem superior como um, dois, agora o que temos que adicionar é força, clique em adicionar elemento e força de busca. Aqui temos o elemento força. Eu vou simplesmente soltá-lo assim. Ok, agora nossa força apareceu, e agora o que temos que fazer é fazer as mudanças. Se verificarmos esse design, ele ficará assim, então vamos trocar as capas e ver a estreia, então eu apenas mudo para um cartão e a aparência do cartão combinará melhor com E o que é conteúdo completo? Não, o conteúdo completo não é uma vantagem. As cartas são a forma de mostrar isso. Então, o que temos que mostrar é o título e o exercício. O tamanho do trecho será 100. Eu acho que é 150 assim, sim, são 150 caracteres. OK. Agora não precisamos mostrar os comentários, só precisamos mostrar a data e não precisamos mostrar o leia mais e também não precisamos de texugos e não precisamos de Avada. Agora único problema é que desta vez deveria estar no texto acima, mas infelizmente não podemos fazer isso Portanto, pergunte, a fonte será forçada e não precisaremos adicionar nenhuma condição de inclusão, então vamos ordená-la por data e formato DESC Em seguida, na paginação, faça a inação da página como números mais o anterior Se verificarmos isso no design, ficará assim ou podemos adicionar o recurso de rolagem infinita, mas isso será bom Para o anterior e o seguinte, temos que usar esse design em vez desse design. Agora temos que adicionar ou editar o estilo E. Vamos para o estilo E no estilo E. Vamos ver a lacuna da coluna, era 20, era 20 e aqui no meio o tamanho é 30. Vamos fazer com que o tamanho do estagiário seja 40. lacuna da coluna será de duas, a lacuna da linha será de 40 homens. E no carrinho, a cor de fundo será branca e a borda da borda. Na verdade, não precisamos de uma fronteira. O raio da borda, vamos ver se o raio da borda fica dois. Sim, o raio está em 20 como raio da borda, e será assim e o bloco horizontal será o preenchimento vertical horizontal do PAdemiac , vamos ver o preenchimento vertical e será assim e o bloco horizontal será o preenchimento vertical horizontal do PAdemiac, vamos ver o preenchimento vertical. 830. Vamos fazer com que tudo fique bem, e como efeito, não vamos adicionar nenhum efeito à sombra da caixa, vamos adicionar conchas de sombra da caixa, mas por algum motivo, não temos a opção de alterar a sombra da caixa, então vamos mantê-la como esta caixa devolvida e agora vamos para Imagem, espaço da imagem Por enquanto, podemos ser uma página em zero e, no conteúdo, a cor do título será a cor do texto. A tipografia será um subtítulo. O espaço que vemos, vamos ver esse espaço, é espaço. O que é essa meta? Acho que meta é essa data. Vamos mudar a cor para essa cor azul e não precisamos de um separador A tipografia será de parágrafo. Então, a cor de exceção será essa tipografia de cores, fase do parágrafo deve ser vamos ver o espaço, são dois Só que é muito longo, então vamos contentar e um tamanho de 20, 20 ainda maior, 15, dez personalizados, nada acontece. Por que não é, vamos ver, vamos ver no espaço da imagem, ok, mas na imagem, temos um problema porque ela não está alinhada na parte superior 136. Página de blog de design — parte 04: Ok, eu encontrei o problema. Então, nesta imagem, um estilo no cartão, adicionamos preenchimento vertical como 20 Se a removermos, a imagem será corrigida perfeitamente. E para este texto sobre conteúdo, adicionamos comprimento como 20. Nesse caso, temos que adicionar 22 porque os exercícios aparecem na contagem de palavras Então, se adicionarmos 24 e publicarmos , adicionaremos 22, então eu vou pré-visualizar que ficará assim. E agora, se apenas copiarmos esse conteúdo, ele aparecerá como 22 palavras. Ok, agora esse problema foi corrigido e temos que adicionar espaço a essa parte inferior. Então, vamos tentar fazer isso e também o tamanho intermediário desse título e da imagem é muito grande, então vamos tentar corrigir isso também. imagem, o espaçamento, vamos torná-la zero e publicá-la e vê-la no design real Agora está assim, e parece que fizemos tudo o que pudemos para criar essa seção de bloqueio, então agora posso clicar em publicar e precisamos fazer alterações paginação. Vamos até a paginação configurada e ver o que podemos fazer Primeiro, definirei o texto como tipografia e, normalmente, a cor será essa cor e como a cor será a cor primária no ativo, a cor será a cor primária e o espaço entre será, vamos fazer com que seja 20 e vamos ver a partir daqui, entre os tamanhos, o espaçamento será 20 e o espaçamento será 40 assim entre os tamanhos, o espaçamento será 20 e o espaçamento será 40 Infelizmente, fizemos esse design assim e temos que usar CSS personalizado para fazer isso, mas não vou fazer isso nesta aula Aqui, talvez no futuro, criarei uma videoaula para CSS e Wordpress e agora clico em publicá-la e vamos ver no design real e ficará assim, e se clicarmos nela, redirecionaremos para a única página de postagem do blog e temos que criar essa página. Por enquanto, vamos lidar com página do blog, tudo bem. Se clicarmos na segunda, ela irá para a segunda página e mostrará o restante do design. Além disso, podemos adicionar a rolagem infinita, mas acho que adicionar a rolagem infinita será melhor Então, na paginação, aqui temos rolagem infinita, que significa que vamos adicionar rotação, girar está Em seguida, clicarei em C publish porque isso é muito mais moderno do que a paginação Agora, se eu for chamado, a postagem aparecerá assim. Vou reprimir isso novamente e ver a postagem carregando e a postagem será carregada assim e isso é muito melhor No estilo de paginação, podemos mudar sua cor para essa cor azul A cor giratória será azul, essa tipografia, sem mais páginas, sem mais mensagens de postagem, será preta e estará no título, não no título, no subtítulo Portanto, o espaçamento será 40. E agora vamos ver o design. Vamos ver que isso está muito melhor do que antes. E agora vamos criar a única página de postagem do blog. 137. Página de blog de design — parte 05: Olá, pessoal. Agora vamos criar essa única página de postagem no blog. Não temos um design figma para a única página de postagem do blog Basicamente, precisamos mostrar a imagem da postagem do blog, depois o título e a postagem real do blog. Vamos fazer isso, o que significa que, em outros casos, se alguém clicar ou acessar a única postagem do blog, ela será exibida com um design melhor. Então, para fazer isso, vou para o painel no painel, vou salvar o modelo ou podemos acessar o Builder. Vamos ao Team Builder. Acho que não usamos a parte do Team Builder, mas as duas são praticamente iguais. Então, aqui estão nossos modelos atuais. Agora, aqui temos que adicionar uma única postagem. Atualmente não temos nenhum, então agora eu clico nele no botão Novo. Então, aqui recomendamos bloquear bibliotecas de postagem. Não vou usar essas coisas porque vamos projetar isso do zero. Então, primeiro, precisamos adicionar o cabeçalho aos meus modelos, temos a seção de heróis para nossas páginas, clicar em Inserir e clicar em Aplicar e aqui precisamos mostrar o título da postagem do bloco. Clique aqui e clique em tags dinâmicas em tags dinâmicas, aqui forçamos o título. Basta adicioná-lo assim. Então, para este, não vou usar a linha Safed, então vou tentar clicar e excluí-la Para esta imagem de fundo, temos que usar a miniatura do Post Vou clicar com o botão direito do mouse e clicar em Editar contêiner, e um bloco aqui, temos a imagem. Então, aqui, clique na tag dinâmica e, na postagem, temos a imagem em destaque. Vamos definir a imagem em destaque e ela ficará assim. Defina a resolução da imagem como imagem completa e os centros de posição na repetição noc e a exibição será automática Automático não é um bom padrão. Capa. Vamos fazer as telas como capa, o que significa que elas aparecerão assim. Em seguida, na sobreposição de fundo, vamos adicionar o Olay, basta adicionar uma cor de texto como essa e aumentar a opacidade um pouco assim e agora temos o título e a imagem o título e a Se publicarmos isso e clicarmos em adicionar condição, adicione um singular, mas se quisermos mostrar a postagem, podemos simplesmente adicionar a postagem, o que significa que somente esse modelo se aplicará à postagem deste site. Em seguida, clico em Salvar e fechar. E agora vamos para a página do blog do nosso site. Então, se entrarmos em uma dessas postagens, ela ficará assim, mas ainda temos que torná-la muito melhor. Eu ficarei assim e agora, novamente, vá para o nosso modelo e agora temos que adicionar o conteúdo. Vamos criar uma caixa de texto como essa e, no elemento aqui, temos conteúdo forçado. Temos que adicionar o conteúdo forçado dessa forma, então o alinhamento será à esquerda e a cor do texto será a cor do texto e a tipografia será e a tipografia Com antecedência, não temos nada para fazer e clicar no contêiner e, com antecedência, temos que adicionar a margem superior de um a 20, e a direita será 140, esquerda será 140, assim. Para este, 120 é um pouco maior. Vamos fazer com que seja como 60. OK. Aqui temos muitos itens. Aqui temos muitos itens para adicionar. Vamos adicionar informações forçadas e não precisamos do comando. Vamos adicionar navegação forçada para navegar outra força, então vamos adicionar uma tabela de conteúdo Mas acho que o índice não funcionará nesse caso, mas vamos adicioná-lo de qualquer maneira. Aqui, não tenho muita ideia, então clico nisso no modelo e, nos blocos, podemos ver outro design de modelo. Então, vamos pegar essa, e aqui, podemos adicionar essa parte de postagem afiliada, e vamos adicioná-la aqui, vamos relacionar satélites Vamos clicar em Inserir e aqui ele foi inserido, e eu quero ver esta seção de partes relacionadas. Então, antes de prosseguirmos, vamos editar esses estilos primeiro, temos aqui as informações da postagem e não precisamos mostrar ao autor. Só precisamos mostrar a data sem comentários, apenas a data e aqui no estilo no ícone, a cor do ícone será cor primária e o tamanho do ícone está bom. Vamos fazer com que seja como 16 e, no texto, essa cor do texto também será descolorida e a tipografia será Vamos fazer o intervalo entre os tamanhos 12. Se quisermos, podemos adicionar um divisor, mas não precisamos de nenhum divisor E aqui, vamos adicionar um passo 20 para esses dois grandes 15 para toda esta seção, e aqui temos uma tabela de conteúdo. Vamos adicionar uma tabela de conteúdo aqui e, para a tabela de conteúdo, vamos ao estilo. A cor de fundo será a cor de destaque que não está funcionando. Vamos adicionar cor de cinza assim. borda preta não funcionará, então não vamos adicionar nenhuma borda. Raio da borda, vamos fazer o raio da borda como no cabeçalho, a cor do texto será essa cor e o tipo grama será o Para a cor do texto, não vamos adicionar sublinhado a cor do marcador ficará assim Ok, agora na caixa, vamos fazer esse ícone ficar com a cor azul. Acho que são bons e estão contentes. Vamos continuar assim e agora o conteúdo da postagem está bom, porque só aqui temos que adicionar a cor do texto e a tipografia e todas elas são perfeitas Então, para o post anterior e o próximo, vamos ao estilo e a cor será essa cor, a tipografia será, vamos colocar no título, o que é esse título Não precisamos de um título. Então, aqui, vamos remover o título da força, mostrar a seta por seta, vamos fazer a cor dessa cor azul e no rótulo, o tipógrafo será um parágrafo como OK. Eu acho que isso é melhor. E se mudarmos a cor para azul? Sim, mudar a cor para azul será melhor. OK. Agora, aqui temos o conteúdo da postagem. E se quisermos, podemos adicionar uma parte da postagem relacionada Então, para fazer isso no elemento do anúncio, vamos até o título e colá-lo como anfitriões relacionados E um estilo, a tipografia será o subtítulo, a cor do texto será o texto e, cor do texto será o texto e em seguida, clique no ícone de adição para Aqui temos uma postagem logo na postagem, e só precisamos fazer isso para dois anfitriões como esse. Vamos copiar esse estilo de postagem da página de postagem. Aqui temos a primeira página, clique com o botão direito do mouse em copiar, depois clique com o botão direito e cole esse tipo assim. E aqui precisamos novamente de dois deles, e a página de postagem será duas e, por aqui, há no RH. Vamos adicionar uma divisória aqui para dividir essas duas seções, e acho que não precisamos fazer nada sobre estilo Vamos mudar a cor do divisor para a cor cinza assim. OK. Agora, vamos clicar em Publicar e ver a prévia real. Agora vamos para este post e o que aconteceu? Vamos para o FostPage e vamos ver se há algo errado assim Ok, agora vai ficar assim, e isso não é bonito. Temos que mudar a seção forçada afiliada. Então, para fazer isso, vá aqui, clique em Editar e aqui no conteúdo, a cor do título deve ser preta e deve estar no subdin e não precisamos mostrar , exceto esta E também não é necessário mostrar a meta, basta mostrar o texto com o botão ler mais e ordenar a Bíblia, vamos fazer a ordem aleatoriamente, assim, depois vamos fazer o espaço entre as linhas Vamos fazer com que a lacuna da coluna 20 esteja bem. E a caixa, com a imagem voltada para 20, está bem, ou o raio será 20, mas na parte inferior, deve ser zero e a esquerda também deve ser zero E no conteúdo, a lua de leitura ficará descolorida. A tipografia será um botão. Está tudo bem. Vamos fazer com que fique de frente para um 20. Agora vamos ao layout, alinhe automaticamente os botões. Agora, neste separador temos que mudar essa capa para carta Essa era a parte que faltava. Novamente, temos que editar todos os detalhes e forçar dois, sem a necessidade mostrar o exercício e o título que devem ser vistos, ler mais deve ser visto, não é necessário mostrar o nome do banco e o estilo do conteúdo e estilo do conteúdo e ler mais a cor do botão com essa cor E o que é esse grande espaço? Ok, agora clique em publicar, e isso é o que podemos mudar. E vamos ver isso no design real, ficará assim, e aqui temos outro problema. Precisamos mostrar claramente apenas o texto forçado para fazer isso. Podemos simplesmente duplicar esse divisor e adicioná-lo assim. Então, novamente, duplique e coloque aqui. Em seguida, ele será separado do resto do design e ficará assim. Isso é muito melhor, e vamos ver isso no design real. Então, vamos abrir cinco deles assim, e ficará assim. Na verdade, esse texto será muito melhor do que isso porque, anteriormente, apenas adicionamos texto fictício, mas precisamos adicionar um texto melhor para ver o melhor resultado e, sim, vejo um problema Vemos que a imagem de fundo se repete. Vamos corrigir o contêiner de edição, e a imagem de fundo não deve ser repetida. Na verdade, não é uma repetição, mas, por algum motivo, se repetiu. Ok, vamos lá. Para essa pose relacionada, isso é um pouco maior. Então, o que podemos fazer é adicionar o preenchimento direito e esquerdo 990, para que fique menor, talvez um por um Sim. 90 por 90 será perfeito. E aqui temos um problema. A altura da linha é muito pequena, então vamos para a altura da linha, não muito grande 1,1 0,21 0,4 Sim, 1,4 será melhor. Talvez 1,5 seja muito melhor. Sim. OK. Agora, aqui, vamos editar esta postagem e agora temos a página de postagem do blog e está funcionando bem. Mas quando virmos o URL, veremos a data. Para corrigir isso, podemos acessar o painel do WordPress e começar a leitura. Não, não na leitura dos links permanentes, podemos definir essa estrutura de link permanente como dia e nome para postar alterações de nome e Agora vamos postar, e agora, se verificarmos uma dessas postagens como essa, a URL será exibida assim e ficará muito melhor. 138. Formulário de contato para design — parte 01: Olá, pessoal. Agora temos que criar esse formulário de contato ou página de contato. Então, vamos até o painel do Press nas páginas, clique em Nova página, e o nome dessa página será contatado e clique em Editar Tielemento para abrir o Editor Elementor Tudo bem, como primeira etapa, clico neste ícone de pasta no meu modelo, verei esta seção de heróis para o modelo de subpágina, basta inseri-la Tudo bem. E vamos copiar o texto. Nós fazemos isso, então pegamos esse texto. Em seguida, adicione B como esses dois em pontos de ruptura como este. OK. Agora, o que precisamos fazer é adicionar este formulário e essa coloração clínica e abrir nossos ícones E vamos fazer isso. Para fazer isso, clico no ícone pas e no Plex Box, depois seleciono esse tipo de estrutura, e aqui K C também aqui, basta fazer a margem e o preenchimento como zero E se verificarmos esse design, temos um tamanho maior aqui e um tamanho pequeno ali. Então, vamos entrar nesse contêiner. Agora, aqui, vamos alterar essas duas colunas dessa forma e, ok, agora, como primeira etapa, temos que adicionar a margem superior e o valor total será 140 E aqui temos que adicionar este texto para copiar o texto e clicar aqui no título no título, pois este texto sobre tipografia de estilo será título no título, pois este texto sobre o título e a cor do texto será essa cor do texto Ok, o alinhamento será deixado, e então teremos que criar o formulário Então clique aqui no formulário de pesquisa. Então, o elemento de quatro tem esse formulário, vamos adicionar o formulário e clicar aqui ver o tamanho intermediário. Acho que é 220. É 220. Então, aqui, vamos colocar O como 20. OK. Agora, vamos adicionar o nome do formulário como contato. Formulário. E agora temos que adicionar esses detalhes. Primeiro, precisamos adicionar o nome completo, copiar a parte do nome completo e, aqui, vamos adicionar espaços reservados. Na verdade, o espaço reservado deve estar conforme o nome completo Então, vamos definir o espaço reservado conforme o nome completo obrigatório e marcar a caixa e a coluna necessárias serão 100 e o tipo será apostado. Para o rótulo, não precisamos do rótulo E então temos que adicionar Emas, temos imagens, não rótulo, espaço reservado, o rótulo será nove e, em seguida o que temos que fazer é adicionar esse número de telefone, removê-lo e clicar aqui, depois alterar esse tipo para cauda final Sim, aqui temos a cauda e o lugar para que haja. Na verdade, devemos adicionar um rótulo, e aqui podemos aumentar a altura dos rótulos assim. Portanto, devemos adicionar rótulos como esse. Ok, rótulos. Cópia rotulada como e-mail e aqui telefone. Agora, o próximo campo é assunto, é opcional. Adicionado como assunto e aqui neste dia rotule o texto como assunto e esse tipo será texto e o obrigatório é não, e aqui o número de telefone é O e-mail é obrigatório. OK. Agora podemos alterar o tamanho da entrada aqui, mas podemos alterá-lo a partir da tag de estilo. Então, por enquanto, vamos adicionar esses detalhes e agora temos a área de texto de mensagens. Portanto, o tipo será área de texto. Ok, a fila será cinco. Vamos ver, vamos ver. Quatro é melhor do que cinco assim e necessário, então vamos para o próximo, aqui temos o método de contato preferido e ele deve ser listado. Então, vamos colocar um espaço reservado e é opcional. O rótulo será o método de contato preferido, e aqui temos que mudar isso para CL e aqui temos que adicionar as opções. Então, vamos adicionar opções como e-mail, que diz inserir cada opção em uma linha separada para diferenciar entre rótulo e valor. Separe-os com a tubulação. Por exemplo, o primeiro nome se Ok, entendemos e, em seguida, aqui temos o pipeline e adicionamos Emil E aqui está o céu tão fino quanto It's a Zoom. Não, o Zoom não vai funcionar aqui. Então, vamos manter essas três opções. E se quisermos, podemos adicionar a opção multileon, mas aqui não precisamos de multileon Só precisamos atrasar um não. Se verificarmos o design, não veremos o espaço reservado Então, para adicionar o espaço reservado, apresentarei e adicionarei um método de contato preferido como este É um método de contato preferido pelo solo. E funcionará como solda plástica e não é um campo obrigatório, então vamos passar para o próximo item O próximo item é Clecoption. Como você soube de nós? Cleco, existem muitos tipos de campo para contornar esses tipos de campo e aprender todos eles. E vou copiar esse texto aqui assim. Então o rótulo será, como você ouviu falar de nós? E aqui, vamos ficar loucos, vamos guardar apenas esses itens E acho que aqui não precisamos adicionar a linha ppe porque só precisamos adicionar a linha cinco se usarmos texto separado ou tentarmos representar textos diferentes desse texto. Como exemplo no e-mail, se tentarmos obter um, ou seja , se quisermos receber um e-mail de alguém e se quisermos receber um ao enviar o formulário, podemos adicionar esse pipeline dessa forma. Ou aqui, neste caso, céu será dois e o telefone três. Então, se alguém enviar o formulário, receberemos esse texto como um, dois, três. Ok, não precisamos disso, então vamos removê-lo. E agora o que temos que adicionar. Aqui temos o upload do campo humano. Então, vamos adicionar um novo item, e aqui, digamos que o tipo seja upload de arquivo e o rótulo seja upload do documento. E aqui podemos definir o tamanho máximo do arquivo. Vamos fazer a opção de e-mail com anexo e isso não é obrigatório. Podemos adicionar tipos de arquivo permitidos, então aqui permitimos tipos de arquivo como PDF, JPG, PNG, JPG PNG. PDF, assim. Ok, agora apenas o visitante pode fazer o upload do documento do tipo JPG, PNG ou PDF, e no tamanho máximo, vamos fazer com que seja três O tamanho máximo do arquivo deve ser menor que três megabytes. OK. Agora acho que nosso formulário está completo, mas quando verificamos aqui, ele não tem nome. 139. Adicione código css para mostrar a etiqueta no campo do arquivo: Ok, agora temos esse problema. Nós escondemos rótulos. Então, quando ocultamos rótulos, não vemos esse rótulo de upload de documento, então basta escolher o botão de arquivo. Então, para corrigir isso, temos que adicionar o código CSS. Então, vou publicar isso e aqui está sua aparência, mas precisamos fazer o upload do texto do arquivo aqui. Então, primeiro, copiarei o texto e colocarei o texto assim, depois publicarei isso e agora vou para o painel. No painel, preciso adicionar esse código, então vou até a aparência e a personalização. Você pode encontrar esse código na seção de recursos. Em seguida, vou para CSS adicional adiciono o código CSS assim e clico em Publicar. Agora vamos vir aqui e revisar as mudanças. Agora podemos ver o rótulo. Encontre esse código na seção de recursos. Temos que adicionar o código CSS. Antes de fazermos isso, acho que esse tamanho é um pouco maior, então vamos vir aqui e fazer com que essa largura 60 e a largura desse segundo contêiner seja 40. Então, temos 100 tamanhos da largura. Ok, agora o que temos que fazer é adicionar 140. Página de contato do design — parte 02: Além disso, precisamos alterar o título desse botão para enviar, então vamos fazer isso aqui. Vamos descobrir o botão e vamos alterar o envio para o envio desta forma. OK. Agora vamos para Estyle in Estyle Vamos tornar a lacuna de coluna zero e duas lacunas de linha. Vamos ver as lacunas das linhas, as lacunas das linhas são duas. Micro lacunas 20, espaçamento entre rótulos, vamos fazer o espaçamento entre rótulos, zero por enquanto, e a cor será a cor do texto e o texto será a tipografia Não temos campo DML, então não precisamos nos preocupar com isso Então aqui temos o campo. Portanto, a cor do teste de campo será preta e a tipografia será o parágrafo Então, aqui, clicamos no campo, a cor de preenchimento é nenhuma, que significa que sua cor de fundo é branca, e na borda, temos a cor do traço como essa cor cinza, e a largura será uma. Então, vamos adicionar a aquarela desta forma e a largura desta. Na verdade, a cor da água deve ser dessa cor. Ok, então temos que encontrar o raio da fronteira. O raio da borda é seis, e vamos encontrar a cor do texto Cor do texto Essa cor , na verdade, é a cor do espaço reservado E vamos até o botão. Portanto, no botão, a cor de fundo do botão será dessa cor e o botão não estará cheio de botões, então a tipografia será o botão e a posição dos estilos de alinhamento ficará à esquerda, a cor do teste da cor do texto será teste da cor do texto Sim, a cor do texto é branca, e vamos descobrir as bordas. O raio da borda é 15 e aproximadamente o tamanho intermediário de 2020 por 30, 30 Portanto, o raio do corpo é 15, padrão de texto será superior 20, direito, 30, inferior 20 sobraram 30, assim. OK. O tipo de água será nenhum. Ah, vamos para a página inicial e conferir o estágio ao passar o mouse. Ainda não adicionamos os detalhes ao passar o mouse, mas vamos fazer com que nosso plano de fundo o mesmo. A cor do texto será alterada para preto Então, não é bom. Vamos tornar isso muito melhor. Talvez vamos mantê-lo como padrão. Não precisamos fazer nada. Devemos adicionar esse tipo de animação assim. conteúdo, acho que o lado da entrada deveria ser médio, e agora ficará muito melhor assim. Agora publique isso e vamos ver o design em Vou sair, para que fique assim. OK. O formulário está completo e agora temos que criar esta seção. E adicionar ações ao formulário será outra etapa obrigatória. Então, vamos fazer isso depois de concluir o design completo do site. 141. Página de contato do design — parte 03: Agora temos que projetar esta seção. É muito simples porque nós já o projetamos. Se formos até a página inicial do nosso site e rolarmos até aqui, teremos uma seção semelhante. Vamos editar com o Elementor para editar essa seção, editar a página e copiar a seção Role para baixo. Tudo bem. Vamos copiar um por um, cópia certa, venha aqui. Não, aqui, cole assim e aqui, copie é bem simples. Não. Acho que não precisamos desse. Podemos fazer o trabalho com esses dois itens. Então, primeiro copiarei, selecionarei o contêiner principal e enviarei o conteúdo justificativo para o centro E também no contêiner principal, vou para o layout e no layout, a coluna será 220, então teremos esse espaço e no subcontêiner, também a linha de gelo será 20 assim Eu acho que é 20, não é? São 30. A rosa tem 30 anos. OK. Agora, primeiro, o S é o mesmo, e então temos a localização da clínica, e aqui não precisamos desta, então exclua, e então temos o horário de funcionamento até o horário de funcionamento, eu apenas dupliquei este, depois baixei este ícone assim, depois venha aqui e clique assim, depois clique no ícone e adicione o ícone assim, depois selecione aqui e ele será adicionado assim então o que temos para adicionar esse texto. Copie a pasta aberta desta forma, depois aqui, copie o texto, clique aqui e passe o texto desta forma Agora temos essas três seções, e agora o que temos que adicionar é este mapa. Para fazer isso, clicarei no ícone de adição. coluna de direção da caixa de texto, e aqui o tamanho do convite estará no topo, será um, dois e, e o direito será 140 por 140 Agora vou pesquisar aqui no mapa. Aqui temos o Google Map, adicione-o. E agora vamos copiar isso. Vamos copiar a localização do mapa e colá-la assim e ela será exibida assim. Então, se quisermos, podemos ampliar um pouco mais e ajustar a altura. Então, vamos ver a altura aqui. A altura é 500, então vamos fazer com que não seja 400, 500 como altura, e é muito bom. Tudo bem. Agradável. Agora eu posso publicar isso, e aqui temos nossa página de contato. Isso ficará melhor nesse tipo de dispositivo. 142. Corrija cabeçalho: Olá, pessoal. Agora, apenas criamos as páginas do Earl, mas temos muito trabalho Ainda não fizemos com que essas páginas fossem responsivas. No entanto, vamos passo a passo novamente. Primeiro, na página inicial, temos muito trabalho a fazer. Então, vamos começar pela página inicial e tornar o site funcional Na primeira etapa, se eu verificar o link na página inicial, o link inicial está funcionando para bloquear nosso provedor, portanto, qualquer um desses links não está funcionando. Então, se eu clicar nesse ícone de chamada, ele não funciona dois e esse ícone de chamada não está alinhado corretamente, então vamos corrigir essas coisas primeiro para fazer com que tenhamos que editar o cabeçalho principal Então eu clico no cabeçalho principal para editá-lo no Elemental e vamos lá Então, primeiro de tudo, temos que mudar esse menu e, para mudar o menu, podemos clicar nele, ir para a tela do menu para gerenciá-lo. E aqui está o menu atual, mas esses links são links personalizados, então temos que alterá-los. Portanto, nos itens do Admeno, temos páginas. Então, se eu clicar em O view, podemos ver as páginas que temos. Portanto, temos que substituir essa página sobre, página do blog, página de contato, e nossa seção será o piloto Então, por enquanto, vamos adicionar esses itens ao site, e aqui vou alterar esse rótulo de navegação para aproximadamente, depois colocá-lo aqui, depois remover esse link personalizado e, em seguida, teremos contato. Vou remover esse link e tag personalizados e manter apenas o contato, então temos a página de bloqueio, então vamos alterar a possibilidade bloquear e remover o link personalizado. Agora esses itens devem ser trabalhados, então agora eu clico em Savino Então, o que precisamos fazer é quando alguém clica no link desse provedor, essa pessoa deve redirecionar para a página inicial Eu verifico se ele redireciona para a página inicial, nossa seção de provedores para esta seção Vamos criar essa funcionalidade. Para fazer isso, clique em Editar com o elemento à direita, desça até nosso provedor dedicado, clique aqui e vá para Avançar. De antemão, adicionarei o ID CSS. Vou apenas adicionar nosso provedor Ders e copiá-lo, depois publicar as alterações e agora ir para o Menu e no Menu, com a hashtag de nossos fornecedores, como esta Então, agora eu clico no menu Salvar e depois vamos ver a funcionalidade. Então, como primeira etapa, se clicarmos em A, ele realmente reagirá à página A dessa forma e vamos para a página inicial novamente. E se eu clicar em nossos fornecedores, isso se relacionará com a seção de provedores. Quais páginas fizeram isso? Acabamos de adicionar o ID ou apenas atribuímos o ID CSS a esta seção e, no Menu, apenas o adicionamos como uma hashtag aos nossos provedores Então, quando clicamos em nossos provedores, você pode ver aqui que temos uma hashtag OR provider OR provider, tag como esta Vamos ver aqui e vamos verificar novamente. Então, vamos para a página inicial e vamos verificar novamente, veja Quando eu faço isso, veja Quando eu faço isso, nossa tag de provedor aparece e esta seção é redirecionada para a página de provedores ou a página redireciona provedores ou a página para a seção de provedores OR, e se eu clicar na tag Con, ela será redirecionada para a página e se eu clicar na tag Con, ela será redirecionada para a De alguma forma, a partir daqui, se eu clicar em nossos provedores, nada acontecerá porque esse URL não está correto. Atualmente, se eu clicar em Nosso provedor, ele será adicionado após o URL da página de contato, mas esse ID do provedor OR está localizado na página inicial Então, se quisermos redirecionar, direcionamos esse URL para a página inicial desta forma Agora, se eu tentar reprimir a página ou acessar a página, ela será redirecionada para nossa seção de provedores dedicados Então, para corrigir isso, o que posso fazer é simplesmente copiar o conteúdo e ir ao Menu Aqui, em vez de apenas adicionar o parâmetro URL, posso adicionar o URL do site, depois a Ashtag e o parâmetro Em seguida, clicarei no menu Salvar e agora vamos ver a ação. Então, primeiro, basta ir à página inicial e agora estou na página inicial. Agora, se eu clicar em nosso provedor, ele será redirecionado para Nosso provedor, e se eu clicar em Contag e depois clicar em nosso provedor, ele será novamente direcionado para a seção Nosso provedor. Veja, agora está funcionando perfeitamente. Então, agora nosso menu está funcionando. Portanto, esse menu de rodapé está funcionando, mas precisaremos alterar o menu de rodapé Mas, por enquanto, isso é perfeito. E se verificarmos isso, ligue para nós 24 horas por dia, 7 dias se alguém clicar neste ícone, deve ler ou podemos adicionar funcionalidade para abrir o dialem do celular ou do PC e, no momento, ele não está funcionando Se verificarmos isso claramente, podemos ver claramente que há um problema no alinhamento. Então, vamos corrigir esses problemas. Agora estou novamente na cabeça principal Primeiro, vamos corrigir esse problema de alinhamento para fazer isso, clico no elemento da caixa de imagem e, em seguida, vou para Estyle in Estyle in content Se verificarmos o empate do gráfico, adicionaremos o traço Otto da altura da linha, mas vou transformá-lo em pixel e vamos adicioná-lo como um Agora ele sobe e , em seguida, o que vou fazer é clicar aqui para alterar este automático para um como este. Agora é só corrigir, e agora o que posso fazer é conter o espaçamento. Vamos adicioná-lo assim. Agora está muito bom. Talvez nove sejam a base. Sim, nove serão baseados. Então, agora publique-o e, como próximo passo, temos o chamado Link. Então, acesse o Google e pesquise a tag de link de chamada em HTML. E aqui temos a tag HTML, então só precisamos pegar essa parte da indicação, copiar essa parte da indicação e vir aqui. Então, no conteúdo, aqui temos um lugar para adicionar o link. Então, aqui eu apenas adiciono tell e agora o que eu tenho que fazer é adicionar esse número. Então, vamos adicionar esse número assim. É um número falso, mas adicione-o com o código do país. Publique-o. E agora vamos para a página inicial do site e, ok, aqui temos um problema de privacidade Mas quando clicarmos nesse ícone de chamada, ele abrirá o pop-up que diz: Abrir kip, o que significa que se fizermos isso no celular, ele abrirá o teclado de discagem Ok. Agora, aqui temos um problema. O problema é que removemos a altura da linha aqui no conteúdo, vamos tornar essa descrição tipográfica a altura da linha 30 e no título, vamos fazer com que a altura da linha seja a direita da linha Zero, publique e descanse no design. Ok, eu funcionei perfeitamente assim. Ok. Tudo bem Agora nosso menu está funcionando perfeitamente e agora temos que ir para a seção Heróis. 143. Marcação de solicitação de design — parte 01: Olá, pessoal. Agora temos que criar esta página de solicitação de agendamento. Então, vamos fazer isso. Eu vou para o painel do WordPress ou podemos passar o mouse aqui e clicar na página, e agora vou copiar isso Na verdade, vamos copiar esse título e clicar em editar com elemento. Tudo bem, como fizemos antes, clique aqui, clique nos meus modelos e aqui temos seção de heróis Wasa, clique nela, clique em aplicar Tudo bem Agora vamos adicionar o cabeçalho e dizer que primeiro copie o título, depois do título desta forma, então talvez tenhamos que adicionar BR Mas sem R também parece bom, e vamos copiar essa parte primeiro, e aqui, temos que adicionar BR ou quebrar a linha aqui. Assim. Ok. Agora precisamos adicionar esse formulário. Na verdade, no último vídeo do Figma, esqueci de atualizar esta seção, então vou atualizá-la e voltaremos 144. Marcação de solicitação de design — parte 02: Aqui no Figma design, temos os campos do formulário de contato Então, no GPT, podemos ver o campo do formulário de solicitação de agendamento. Então, vamos adicionar esses Sp primeiro, precisamos ter um nome completo e, atualmente, aqui temos um nome completo e, em seguida, um endereço de e-mail. E aqui temos o endereço de e-mail e, em seguida, o número de telefone. Número de telefone, então devemos ter um menu suspenso de serviços seletores Então, vamos copiá-lo e aqui, vamos usar essa caixa programada como um serviço seletor de solicitações como este e não precisamos clicar nessa e colocá-la OK. Então, precisamos ter uma data e hora preferida, então vamos copiá-la e publicá-la assim Então devemos ter uma mensagem ou notas adicionais, então vamos copiar isso. Então, vamos adicionar assim. Na verdade, é opcional. Então, vamos adicionar detalhes como esses e, em seguida, teremos o consentimento. Na verdade, não precisamos de consentimento, e o botão de envio deve ser solicitar agendamento e aqui vou remover essas duas opções. Então, este altere botão de envio para solicitar uma consulta. OK. Agora podemos usar esse formulário para criar nosso elemento ou formulário do Wordpress. 145. Marcação de solicitação de design — parte 03: Certo. Agora, aqui temos o formulário. Vamos aqui. Na verdade, podemos copiar esse conteúdo da página de contato. Vou abrir este site em Nova Janela e ir para Contato, e em Contato, clicarei em Editar com Elementor e aqui temos este formulário de contato Na verdade, vou apenas copiar a seção inteira corretamente, copiando C logo após Agora não precisamos desses itens. Em vez disso, precisamos deste, então vou colocá-lo assim. Na verdade, deveria estar aqui dentro. Não, não está dentro desse contêiner como este. Agora não precisamos desses três, então vou apenas selecioná-los e excluí-los desta forma. Agora, aqui temos o formulário primeiro, vamos editar o formulário. Aqui, primeiro precisamos do nome completo. Acho que já temos o nome completo aqui, e aqui temos que mudar isso para solicitar agendamento, ortografia, música, e agora é o formulário de solicitação de agendamento e aqui devemos ter o nome completo Vou fechar este e depois o endereço de e-mail, nome completo, aqui temos o endereço de e-mail e depois o número de telefone, acho que já temos o número de telefone, depois selecionarei um serviço. Vamos copiar a peça de serviço do seletor e não precisamos desse assunto, então vou alterar a etiqueta do assunto para serviço do seletor e a colocada será serviço do seletor e o tipo será Mais uma vez, adicionarei o rótulo. Agora, como fizemos antes, vamos adicionar informações primeiro, basta adicionar a opção vazia e agora temos que adicionar nossos serviços Earl Podemos encontrar nossos serviços na página de conteúdo, vamos ao conteúdo Ok, aqui temos o conteúdo ou aqui temos os serviços. Então, aqui temos oito serviços. Vamos copiar um por um e paginá-los. Vou fazer isso menor assim. Agora você pode ver facilmente a que horas copiar. Então, aqui primeiro, temos cuidados pediátricos, e basta adicionar todos eles. Agora temos os serviços. Vamos para o próximo campo e o próximo campo é a data e hora preferidas, copie-o e aqui vou remover essas coisas desnecessárias. Adicionar a nova etiqueta será preparada com data e hora. Vamos mover a solicitação. No local da solda, na verdade, temos que criar esse campo de data e hora Aqui temos o campo de data que deve ser obrigatório. No entanto, não temos um campo de data e hora. Vamos fazer isso assim primeiro. data preferencial, a data preferida é um campo obrigatório. Aqui, como espaço reservado, vamos criar apenas a data preferencial como essa, depois duplicar esse campo de data e alterar o rótulo para hora, e a hora não é obrigatória, pois e a hora não é obrigatória, essa hora é opcional Vamos remover esse rótulo à direita e adicionar o espaço reservado O espaço reservado será opcional. As palavras opcionais são. O tempo é opcional. Na verdade, temos que criar esse campo de hora, não assim, para que possamos selecionar a hora aqui e a data aqui desta forma. Ok, agora temos o campo de data e hora e, em seguida, precisamos ter uma mensagem adicional e não copiá-la . Vamos editar a área de texto atual, não é um campo obrigatório e esse campo de hora não é um campo obrigatório para Ok, tudo bem. Então, agora temos que mudar o rótulo do botão. Então, vamos alterá-lo, copiar solicitação de compromisso e pressionar o rótulo do botão desta forma, e está muito bom. Então, agora eu clico em publicar. E aqui temos que mudar o título e o texto. Então, vamos fazer aqui, copiar o título, passar o título, depois duplicado e copiar o parágrafo assim e mudar essa tipografia para parágrafo mudar Ok. E vamos ver que o tamanho interno entre o tamanho é 30, faça com que Acho que deveria ser 2020. Em seguida, temos que adicionar essa imagem. É bem simples. Podemos simplesmente copiar o conteúdo da imagem daqui, ou vamos criar um novo. Clique em Adicionar elemento e pesquisar imagem. E aqui, coloque a imagem assim. Clique aqui e podemos simplesmente baixar esta imagem. Clique em exportar e vamos ao Tiny PNG em, reduza o tamanho do arquivo dessa forma e faça o download. Em seguida, vamos adicionar a imagem assim e, no título de todo o texto, adicionarei a solicitação de agendamento e clicarei em Ocultar OK Agora vou clicar aqui e fazer com que esse centro de dispositivos seja assim. Ok, tudo bem, e agora temos a segunda página do pedido de agendamento. Vamos verificar isso na visão traseira. Ok, vou ficar assim, e acho que adicionar esses dois itens aqui será muito melhor. Então, vamos fazer isso. Vamos tentar adicionar este aqui, e este também aqui. Vamos verificar isso. Isso está muito melhor do que antes. 146. Link para página inicial: Agora vamos vincular nosso site WordPress. Vou para a página inicial e estamos prontos para acessar o link e corrigir os problemas no menu, e agora temos que ir para a seção de heróis e o resto. Vou clicar em Editar com o elemento Ok, agora temos esse botão de solicitar seu agendamento, então clico aqui para editar e ir para Etyle in Estyle ao passar o mouse, vamos adicionar uma animação flutuante como Grow Então, ele crescerá assim quando o visitante passar o mouse sobre o botão, e esse é um design simples, então isso é suficiente Mas se você quiser alterar a cor do texto dessa forma, você pode fazer isso, mas não faremos isso neste site. Ok, agora vou para o conteúdo, e sobre o conteúdo, temos que vincular esse botão. Então, para fazer isso, podemos simplesmente copiar o URL da página e colar aqui, então, para fazer isso, vou para o painel do site, abro o painel aqui. Em seguida, irei para páginas em páginas, copiarei a solicitação de compromisso, também copiarei o endereço do link deste u e aqui, vamos adicioná-lo nesta opção de link, vou adicioná-lo como aberto em uma nova janela. Agora, o visitante clica neste botão, ele abrirá uma nova janela e solicitará uma consulta na página de hoje. OK. Agora, aqui precisamos adicionar o UR para saber mais, aqui está o resumo A. Portanto, isso deve ir para a página A. Está na página, vamos copiar um link de página como este. Então venha aqui, uma URL de página como esta, e ela abrirá em Nova Janela e aqui no estilo, temos que adicionar a animação H, que a animação cresça e fique assim. provedores de MTO, estamos prontos para adicionar aqui a URL de nossos provedores, portanto, quando alguém clica aqui, ela deve ser redirecionada para nossa seção de provedores dedicados Facilmente, o que podemos fazer é acessar o site e aqui eu apenas copio esse URL e depois colo assim. OK. Agora, também em um estilo, podemos adicionar nossa animação como grow like this. OK. Agora, a próxima seção e aqui temos que adicionar um pop-up. Então, quando alguém clica em ver perfil, precisamos adicionar um pop-up e vamos fazer isso na próxima lição E antes de fazermos isso, vamos adicionar outros links. Então, aqui temos que adicionar o URL da chamada, então vou copiar esse número de telefone e clicar em clicar na imagem, e se alguém clicar na imagem, vamos ver esse URL personalizado, e se alguém clicar na imagem, ele abrirá o teclado de discagem do dispositivo. Então, agora temos que adicionar esse URL. Portanto, esta será uma página de contato em páginas que nos copiam e aqui adicione-a, abra-a em uma nova janela e agende uma visita, acesse a página de cobrança da solicitação de agendamento de hoje e cole o link assim e abra-o em uma nova janela E para esses links, se quisermos, podemos adicionar a animação de crescimento. Isso pode afetar o design, mas é adicionado e pode não afetar muito o Então, agora, o que temos que fazer é na página inicial, Earl Good. Agora pensamos em Earl, então se clicarmos nesses links, podemos ver isso na ação Então eu vou publicar isso. Deixe-me publicá-lo e depois vamos verificar. Portanto, se clicarmos neste botão Hero, ele solicitará uma consulta hoje. E se clicarmos aqui, ele deverá ser redirecionado para nossa seção de provedores e devemos agir nesse perfil de visualização E aqui, se clicarmos neste, ele será lido na página de contato e tudo funcionará bem. Então, agora vamos adicionar um pop-up a este link de visualização do perfil e nos vemos na próxima lição. 147. Crie um pop-up: Para avançar individualmente para planos especializados, podemos ter o pop-up Builder, mas, no essencial, não temos o recurso Pop Builder. Então, em nosso plano, temos o recurso Pop builder e agora vamos adicionar esse construtor de Popup Quando alguém clicar nesse perfil de visualização, ele ou ela aparecerá e, nesse pop-up, teremos mais detalhes sobre o provedor. Então, vamos fazer isso. Primeiro eu vou para o painel do WordPress e no painel do WordPress em modelos, você verá pop-ups. Então clique nos pop-ups. E atualmente não temos nenhum pop-up, então basta clicar em Adicionar novo pop-up, e aqui o tipo é pop-up e eu adicionarei o nome. Portanto, esse nome será nosso provedor. Vamos adicioná-lo como se fosse um pop-up. Nosso provedor aparece e clica em Criar equipe para jogar. Ok, aqui temos alguns designs de arte pop, mas vamos criar um do zero. Vou remover este. E aqui temos que editá-lo, então eu clico em Adicionar caixa Plex e clico na coluna de direção. E aqui, se eu for para o avanço do layout em layout e preenchimentos, removerei todos esses detalhes e, para preenchimento, vamos adicioná-lo como 20 superiores, à direita, 20 e os 20 inferiores à esquerda 20, vamos adicionar preenchimento como 20 e, em seguida, temos que adicionar Então, vamos fazer isso. Nesse caso, primeiro precisamos da imagem. Então, vamos clicar aqui e pesquisar imagem e adicionar a imagem assim, então, por enquanto, vamos adicionar uma imagem idiota Então, vamos adicionar essa imagem. Então, se você se lembra, criamos essa seção de nossos provedores usando o campo personalizado avançado como um tipo de pose diferente. Se formos para o painel e para o painel, teremos esta seção de nossos provedores como tipo de pose dedicado. Então, antes de adicionarmos essas informações, vamos criar o design. Então, primeiro, temos essa imagem e eu vou adicioná-la assim, então precisamos ter um título Então, neste caso, o título será para que eu abra o design do Figma Ok, podemos copiar essas informações daqui. Então, aqui teremos esse título como o primeiro título, depois vamos para estilo em estilo, mudaremos para um parágrafo assim e, no contêiner, vamos adicionar pro como Acho que vai funcionar. E, por enquanto, vamos adicionar um design básico. Então, novamente, eu crio um título diferente. E se você se lembra, eu sempre adiciono uma tag HTML às duas, mas isso não é uma boa prática. Na parte de SEO, vou explicar mais, mas por enquanto, vamos adicionar detalhes padrão. Então aqui, vamos adicionar a edição do nome desta forma, então o nome será subtítulo e a cor do texto será essa cor preta Então, aqui temos uma pequena descrição, mas precisamos adicionar a descrição do empréstimo. Então, se formos até nossos fornecedores e clicarmos em Editar, vamos diminuir isso. Então, aqui temos uma descrição. Por enquanto, vou apenas copiar esse texto porque só precisamos do texto. Então, agora vou duplicar esta seção e adicionar a descrição desta forma, e aqui vamos alterá-la para Ok, agora está bom, e então vou adicionar um botão como solicitar agendamento. Então, vamos clicar, na verdade, podemos copiar o botão daqui porque não precisamos criá-lo do zero, não. Então, vamos editar a página inicial e apenas copiar esse botão, copiar o botão , vir aqui, pressionar o botão assim, então ficará assim. E vamos deixar o botão tão cheio com o botão. Então, faça com que a posição seja esticada assim. Em seguida, altere esse texto para solicitar uma solicitação e um compromisso. Ou vamos marcar uma consulta, e está tudo bem. E agora o que eu faço é ir para contêiner e agora vamos ajustar o design, então vou fazer com que seja ainda muito baixo, talvez seis não 60, os seis funcionarão. E se quisermos, podemos adicionar mais desenhos, mas por enquanto, vou mantê-lo assim e aqui, clique na imagem e vamos fazer o centro do alinhamento e o raio da borda, vamos fazer com que seja 220 E vamos mudar esse alinhamento para o centro assim. E aqui, vamos fazer isso com dois, e agora vai ficar muito melhor. Novamente, o espaço em que a linha terá três será bom. E tudo bem, se quisermos, podemos adicionar as mídias sociais, mas não acho que isso seja bom. Mas se quisermos, podemos adicionar as mídias sociais, mas atualmente não temos nenhuma, então, se você quiser, também podemos adicionar uma breve descrição, mas acho que não precisamos de uma breve descrição aqui. Agora, essa será a aparência do design e vamos ajustar os detalhes do pop-up. Para editar o tamanho do pop-up e outras coisas, basta clicar neste ícone definido. Vou para a configuração de pop-up, e aqui podemos alterar a largura conforme quisermos, mas darei a largura de 600, talvez 680, ficará perfeita e podemos adicionar uma localização de pop-up assim, mas o centro horizontal e vertical será o melhor lugar e vamos fazer com que a altura seja para o conteúdo, o que significa que a altura será ajustada acordo com o conteúdo e, se quisermos podemos caber na tela, então será um pop-up maior. Mas, no nosso caso, vou ajustá-la ao conteúdo e aqui, se quisermos, podemos ocultar a sobreposição, mas acho que a sobreposição da cabine será boa aqui, temos um botão de fechar e vamos mostrar o botão de fechar e não precisamos de nenhuma animação de entrada ou animação de saída Se quiser, você pode adicionar uma configuração geral, não há muita coisa e, na visualização prévia, podemos verificar a visualização, mas, por enquanto, apenas adicionamos dados padrão, mas na próxima lição, adicionaremos uma tag dinâmica a todos esses itens. Temos um problema com esse botão. Nós iremos até esse botão. Veremos esse tipo de problema. Vamos fazer com que desapareça. Para fazer com que desapareça, podemos simplesmente centralizar esse conteúdo e o botão ficará menor. Agora, novamente, vá para a configuração pop-up e um estilo, fazemos mais coisas. Então, por enquanto, vamos fazer tipo de borda passe como nulo e o raio da borda seja dois, sem necessidade de sombra e sobreposição de caixa Eu gosto dessa cor de sobreposição, mas se quisermos, podemos simplesmente alterar a cor da sobreposição Mas acho que a cor padrão é melhor e, no botão Fechar, vamos aumentar um pouco o botão Fechar. Então, no tamanho, vamos torná-lo como 22, e a cor será azul. E não precisa fazer nada. E se quisermos, podemos mudar a posição, mas acho que essa posição é muito melhor. Ok. Agora, no Advance podemos adicionar horários, mas vou pular esses horários E aqui temos muitas opções, mas vou mantê-las como padrão e aqui podemos adicionar margem e preenchimento e também podemos adicionar código personalizado Ok. Agora temos esse pop-up, então vou publicá-lo e, quando publicado aqui, temos três guias. Vamos um por um. A primeira é a condição. Eu digo, aplique os modelos atuais a essas páginas. A partir daqui, podemos adicionar essas condições. Então, basta clicar em adicionar condição e aqui podemos incluir ou excluir. Por exemplo, se você não quiser mostrar o pop-up em uma página específica, vamos obter páginas específicas por página. Podemos clicar em Excluir e alterar todo o site para singular e aqui podemos selecionar a página inicial. Assim. Além disso, se quisermos mostrar essa página inicial somente pop-up, podemos definir Incluir na primeira página Nesse caso, precisamos configurar esse pop-up na primeira página. Inclua singular e primeira página. Se adicionarmos isso como site inteiro, esse pop-up abrirá em qualquer página. Nesse caso, não funcionará porque o botão pop-up exibirá o botão de visualização do perfil localizado apenas na página inicial Então, agora temos esses gatilhos. Eu digo, qual ação o usuário precisa fazer para que o pop-up seja aberto. Então, aqui, temos opções diferentes. Portanto, se quisermos mostrar o pop-up ao visitar um carregamento, podemos simplesmente ativá-lo no carregamento da página e aqui podemos adicionar segundos. Então, se eu quiser mostrar esse pop-up após 5 segundos em que o usuário acesse nosso site, posso adicioná-lo assim, mas eu avisarei, e aqui temos outra opção. Então, se estiver no iScall, podemos adicionar o pop-up quando Iscall aparecer no site Em seguida, temos que rolar para o elemento. Então, se abrirmos isso, podemos simplesmente definir uma seção usando a classe CSS. E quando o visitante rolar até essa seção, o pop-up aparecerá. Então, vou divulgar e, ao clicar , significa que se o visitante clicar no site, podemos abrir o pop-up. Então, se fizermos isso como três, então quando o usuário clicar três vezes, como um , dois, três, esse pop-up aparecerá na terceira vez. Então, aqui temos muito mais opções. Aqui temos a detecção de blocos de anúncios. Portanto, os usuários usam bloqueadores de anúncios para bloquear anúncios em nosso site, especialmente se você administra um blog do WordPress que tem sinais de anúncio ou outros anúncios Você pode identificar se o usuário usa o bloqueador de anúncios e, se não quiser que ele use o bloqueador de anúncios, basta ativá-lo Ok, agora temos a guia de regras avançadas. Aqui, são necessários requisitos para que o pop-up seja aberto. Neste caso, mostre após a tecelagem da página X. Se tivermos isso, podemos adicionar a contagem de páginas que verifica o usuário. Por exemplo, se eu adicionar esses cinco e o usuário visitar cinco páginas, o pop-up aparecerá. Existem muitos outros gatilhos, mas eu não vou passar por todos eles, brincar com Existem itens super legais que podemos usar para acionar pop-ups e chamar a atenção do visitante. Ok, agora vou para a página inicial do nosso site e vamos atribuir isso a um botão. Então, atualmente, não temos nenhum botão aqui. Então, para fazer isso, vou criar um botão para testar isso, então vou adicionar o botão aqui, e vou mudar o texto do botão para que eu não saiba assim no estilo, vamos mudar a cor primária para isso e vamos adicionar Padin 22 para melhorar você. Aqui temos que usar este link para fazer isso aparecer No link, clique em tags dinâmicas e, em tags dinâmicas, você verá o pop-up de ação. Agora, você pode clicar aqui e a ação abrirá um pop-up. Aqui podemos pesquisar nosso nome pop-up, nosso provedor pop-up. Clique nele e agora vou publicar isso, que significa que quando eu clico nesse botão, devemos ver aquele pop-up. Vamos tentar rolar para baixo, rolar para baixo assim. Em seguida, clique nele. Quando eu clico nele, o pop-up simplesmente aparece e eu posso fechar o pop-up. Quando clico em solicitar agendamento, na verdade, não configuramos esse botão de solicitação de agendamento, então vamos configurar. Aqui, isso deve ser redirecionado para a página de solicitação de agendamento, então vou receber o título como solicitar agendamento Aqui está o título da página de solicitação de agendamento hoje, cole e vamos abrir uma nova janela e clicar em publicar. Ok, agora vamos tentar isso de novo. E aqui vamos nós. Então aqui o pop-up apareceu, e se você clicar em solicitar agendamento, ele será redirecionado para a página de solicitação de agendamento de hoje, e podemos fechar o pop-up Ok, o pop-up está funcionando bem e eu removerei esse pop-up E agora temos que atribuir a ação do botão a esse perfil de visualização. Vamos configurar o pop-up e ver a ação. Por enquanto, publicarei isso e nos vemos na próxima lição. 148. Adicionar pop-ups dinâmicos com carrossel em loop: Aqui temos um problema. Acabei de definir o campo personalizado avançado para esse pop-up e, em seguida, acessar a configuração do pop-up e, na visualização, definir nossos provedores e clicar em Aplicar e Visualizar. Funcionou bem. Mas então o que eu fiz foi ir ao carrossel e configurar aquele pop-up nesse perfil de visualização e o resultado é que, quando clicamos no link, mostramos apenas esse tipo de pop-up O conteúdo não é carregado no pop-up, e isso é um problema com elemento e eles ainda não resolveram esse problema. Mas quando verifico a solução para esse problema, encontrei um vídeo do canal webqudn no YouTube e ele resolveu esse problema com sucesso Então, vamos aplicar isso à nossa seção de fornecedores dedicados. Portanto, para corrigir esse problema, precisamos adicionar um novo campo de tipo de URL aos nossos provedores e, em seguida, adicionar o link Popa lá Então, vamos fazer isso. Primeiro, irei para o campo personalizado avançado e, no grupo de campos, teremos nossos fornecedores. Eu apenas clico em Editar e aqui temos os campos, e agora precisamos de um novo campo, então eu clico no campo, e esse tipo de campo será Link. Em seguida, adicionarei uma etiqueta de campo como tinta pop-up como esta. Em seguida, clicarei em Salvar alterações e passarei para a próxima parte. Então, agora vou voltar aqui, agora aqui temos apenas um pop-up, mas para fazer isso funcionar, precisamos criar pop-ups individuais para todos os nossos fornecedores. Nesse caso, temos que criar cinco deles. Vou renomear esses pop-ups como nomes de provedores. Primeiro, copiarei nome desse provedor e depois clicarei em Editar detalhes, e aqui clicarei em Editar e, a partir daqui, mudarei para o nome do provedor e apenas clicarei em atualizar e agora clico em Editar com elemento aqui, o que podemos fazer é remover os detalhes avançados do campo personalizado e, como primeira etapa, temos que adicionar essas informações. Atualmente, aqui está a foto de rosto, escolha essa imagem de rosto em nossa biblioteca de mídia Aqui está, clique em Consilar , então temos esse título, clique aqui e vamos remover a dinâmica E adicione o rolo assim. Vamos adicionar rolo e, em seguida, o próximo, acho que é o nome, remova este. Então, vamos adicionar o nome do médico ou o nome do provedor desta forma e, no próximo, temos a descrição do empréstimo. Então, aqui temos a descrição do empréstimo, basta copiar e colar assim. Ok. Agora temos o primeiro pop-up, agora eu clico em publicar. Ok, agora nosso primeiro pop-up está concluído, então vou voltar e depois ir para a janela pop-up. E a partir daqui, vou duplicar isso. Para duplicá-lo, basta clicar em Exportar modelo e, aqui, clicar no modelo Implod e colocar o arquivo Jason assim, Importar e clicar em Continuar Em seguida, clico em Ativar e importar. Ok, agora eu vou para os pops e os pop-ups acabam de ser importados, e aqui está o original Aqui está o importado. Então, vamos clicar em Editar com elemento. Aqui, vamos mudar esses detalhes. Então, em nosso provedor, vamos pegar esse segundo e copiar o nome. Aqui está o nome. Mude o nome. Agora é fácil acompanhar o papel desse jeito. Então temos a descrição do empréstimo, copie a descrição do empréstimo. Cole a descrição do empréstimo aqui. Em seguida, verifique a foto da cabeça e vamos aqui. Mude o tiro na cabeça para o Dr. Carlos. Acho que é o doutor Carlos. Sim, selecione-o assim. Ok. Agora vou clicar em publicar e em condições, vamos adicionar o singular e aqui a primeira página. Clique em Salvar e fechar. Ok, agora está publicado. E agora aqui temos dois pop-ups. Vamos ver, sim. Aqui temos dois pop-ups. Na verdade, temos que mudar o título. Eu esqueci de mudar o título. Vamos clicar em Editar e colar assim. Em seguida, clique em Atualizar. Ok, agora temos dois pop-ups separados. Agora, o que temos que fazer é adicionar esses botões Pow up. Vamos para a página inicial. Agora clique em Editar com 112. Agora, o que precisamos fazer é adicionar um botão. Vou criar um botão como esse e há um design no botão, clique aqui. Vamos clicar aqui e, no link, temos que configurá-lo como pop-up , selecionar o pop-up e, em seguida, o pop-up do ouvido, temos que pesquisar o nome do médico. Então eu acho que temos a doutora Lisa. Então, vamos digitar DR, aqui temos o pop-up da Dra. Lisa. Então, agora vou mudar esse texto para DR Lisa. E, novamente, vou duplicar esse botão, vamos criar um contêiner e adicionar esses itens ao contêiner sem apenas mexer em nosso site Vou criar um novo contêiner como este, e então vamos adicionar o botão, e aqui vou remover, eu já não, aqui, vou remover esse botão, e ok, aqui adicionamos o pop-up, funciona, então agora o que eu tenho que fazer é duplicar esse botão pela segunda vez e podemos fazer isso facilmente se o contêiner estiver na direção de uma lacuna de ameixa mais dois Nós podemos ver isso claramente. Então agora temos que pegar o segundo para amigo aqui e na Terra mudar isso para DR Garlos e depois mudar o nome para uh Ok, agora eu tenho que publicar isso , publicá-lo e clicar em Agora vou descer e agora, se eu clicar aqui, o médico Lisa aparecerá, e se eu clicar aqui, o médico Carlos Propyle aparecerá assim Então, agora o que precisamos fazer é clicar com o botão direito do mouse e clicar em copiar endereço do link. Então, se eu colocar esse endereço de link na URL, veremos esse tipo de endereço de link Na verdade, vamos abrir um editor de texto, um editor de texto online como este, depois colocarei o texto. Portanto, neste texto, só obtemos esse texto desse elemento de tag de hash Copie essa parte e acesse nossos fornecedores aqui, nossos fornecedores e fornecedores. Acabamos de selecioná-lo da Dra. Lisa, então vamos editá-lo e rolar para baixo no link pop-up. Vou simplesmente passar o URL assim. Ok. Agora eu clico em Salvar e vamos voltar Isso deve ser salvo. Está economizando. Ok, está salvo, e então eu vou e aqui vamos para o perfil do Dr. Carlos e daqui, copie corretamente o link dress, space link no editor de texto e copie o link neste link Pop, basta adicionar o URA assim Ok, agora vamos salvar esse também. Então, por enquanto, vamos adicionar apenas esses dois itens. Ok, agora o que precisamos fazer é consultar nossos fornecedores dedicados e clicar em Editar temperatura. nossos fornecedores dedicados e clicar em Editar temperatura Ok. Agora, neste perfil de visualização, removo essa parte pop-up do link e, na tag dinâmica, adicionarei um código curto. Então, podemos adicionar um código curto aqui. Portanto, esse código curto deve ser a tag de código curto do nosso link pop-up. Então, se formos para o painel e aqui para o grupo avançado de campos personalizados, e aqui temos os campos de nossos provedores, clique em e aqui temos o link pop-up. Portanto, este é o nome desse campo, copie-o e volte ao nosso modelo dedicado e adicione colchetes aqui no campo ACF, no código duplo igual e no link pop-up Então, aqui o que aconteceu é que, quando esses detalhes são preenchidos com nosso provedor, esse URL também é preenchido com o link pop-up e, quando clicamos nele, o pop-up relacionado a esse provedor aparece. Então, vamos experimentar, clicar em Publicar e agora vamos para nossa página inicial e ir para a seção de nossos fornecedores Ok, quando eu clico nele, nada acontece e perdemos uma parte ou não fizemos uma parte corretamente. Então, vamos ao nosso grupo de campos avançados e, aqui, aos campos do nosso provedor e clique em Editar. Em seguida, neste link pop-up, vou alterá-lo para que o valor de retorno esteja na matriz de tinta, mas deveria estar no LinkRL. Vou configurar com o LinkRL e agora clicar em E agora vamos reprimir esta página. Vamos ver. Vamos ver. Eu ainda não aconteceu nada. Ok, vamos tentar de novo, mas desta vez, nada acontece. Então, o que podemos fazer é visualizar o item que adicionamos a este local. Então, para fazer isso, irei para nossa seção de fornecedores dedicados. Em seguida, vamos adicionar um novo título como esse e vamos transformá-lo em um parágrafo e vamos mudar sua cor para essa cor preta Ok. Agora, aqui, o que vou fazer é apenas usar o código curto e o código curto será o código curto que adicionamos aqui. Então, vamos copiar esse código curto. Esse, cole assim. Ok. Agora clique em publicar e veja o que vai acontecer. Reprima a página. Não, não essa. Reprima este. E aqui está, o shortcode ACF está desativado na lateral Ok, agora temos esse problema, então temos que habilitar o shortcode ACF Vou apenas habilitar o código curto, podemos apenas usar esse código PHP e eu vou te mostrar como fazer isso. Vou para o painel do WordPress assim e, em plug-ins, vamos clicar em Adicionar novo plugin. Vamos adicionar um novo plug-in, então o nome desse plug-in será código WP. Este é o plugin compatível com a nossa versão, clique em Instalar agora, Instalar em e clique em Ativar Nice. Aqui está o plugin, então vou clicar em Code is NB e, atualmente, não temos nenhum nibbt habilitado, então verificaremos PHP e só temos o PHP um, mas ele está Então, vamos clicar em Adicionar novo. Ok, aqui, temos muitos Nibbt gratuitos, mas não precisamos desses Então, neste caso, vamos criar nosso próprio Snibit, clique em CustomNBT E aqui temos que selecionar o tipo, então nosso tipo será o script PH e aqui vou apenas colar o código que copiamos daqui e você pode verificar a seção de recursos para obter esse código, e aqui vou adicionar um título Portanto, este título habilitará o código curto ACF. Então aqui, transforme-o em qualquer dispositivo e mantenha todos os detalhes como padrão e clique em salvar Snibit e ele ainda estará inativo, basta clicar em É uma atualização e, em seguida, vamos aos sites. Portanto, certifique-se de adicionar esse código corretamente, pois se você adicionar esse código incorretamente, ele quebrará o s. Ok, agora vamos ver a página inicial e ver o que 149. Corrigir pop-ups dinâmicos que não mostram problema: Parece que o código fornecido pelo documento ACF não está funcionando por algum motivo, e temos um novo código Vou apenas adicionar o código e clicar em atualizar e você verá esse código na seção de recursos Agora vamos ver o site em ação. Ok, clique em nossos fornecedores e aqui temos os detalhes. Se você clicar no ícone, ele aparecerá assim porque esse URL adicionou um código curto. Agora vamos editar com o Elementor e não precisamos dessa parte do URL, então vamos removê-la Clique em Editar modelo, e aqui não precisamos desse texto, então vou selecioná-lo aqui clicar em excluir e clicar aqui. Depois, acabamos de adicionar o código curto e ele funciona. Então, agora eu clico em publicar, e então temos que criar Popa para o resto de nossos fornecedores Aqui temos algo errado. Então, vamos corrigir isso. Então a Dra. Carla disse Dra. Lisa. Basta copiar o endereço da médica Lisa, ir aqui e colar. Não. Basta colar assim e depois copiar essa parte. E no painel, vamos até nossos provedores, nossos provedores, e no painel da Dra. Lisa eu acidentalmente adiciono o URL do médico Carlos Acho que esse foi o problema que aconteceu, então vamos remover este e clicar em Concilateink, no Link, clicar em Link e Então, vamos ao design e o vemos em ação. Aqui vamos aqui e aqui, está funcionando agora. Ok, agora vamos fazer isso o resto dos perfis de nossos provedores. Então, primeiro, temos que criar os pop-ups e vamos criar pop-ups. Vou remover essas guias desnecessárias porque não precisamos delas agora E tudo bem, aqui, basta clicar em Exportar modelo. Na verdade, já exportamos o modelo. De qualquer forma, clique em Importar modelos e adicione o modelo assim. Continue, e teremos que fazer isso de novo e de novo por mais duas vezes. Mais uma vez, por favor, continue. E agora vamos ver pop-ups em pop-ups aqui, temos a Dra. Lisa, Dr. Carlos, e então vamos editar este. Essa será Emma. E vamos abrir três deles. E aqui temos os detalhes da médica Emma, e há um pop-up. Ok, aqui, vou copiar o nome e clicar em Editar com elemento. Na verdade, temos que atualizar depois de mudar o nome, depois clicar em Editar com elemento, e está nos detalhes da Dra. Emma. Carregado aqui, o nome será alterado e a função e a descrição do empréstimo Ok, agora a imagem. Vamos conferir a imagem. Ok. Ok. Agora clique em Consilate, clique em Publicar e salve e feche, depois vamos voltar e ver o próximo No pop-up, clique em Editar e, em seguida, temos o Dr. Michel, sua atualização Podemos editar com o elemento ou alterar o nome primeiro e rolar a descrição do empréstimo. Violoncelo, Michael Eu acho que é Michael, não Michel Anyway. Vamos adicionar a imagem. Ok, bom. Clique em Publicar e clique em Salvar e fechar. Volte. E a última é Sara Sara Sara Então, adicione os nomes, atualize-os, clique em Editar com elemento e, em seguida, vamos adicionar esses detalhes primeiro altere o nome desta descrição do empréstimo e depois a imagem. Se tivermos 20 provedores, teremos que atualizar isso 20 vezes. Essa não é a melhor maneira de fazer isso, mas precisamos fazer isso porque campos personalizados avançados que não funcionam com o carrossel de loop, na verdade, as tags dinâmicas do Loop Carsel e os pop-ups do campo personalizado avançado não funcionarão Junto com o elemento ou, na verdade, os pop-ups em loop, um prosel que tem conteúdo dinâmico que não funcionará automaticamente, precisamos adicioná-los manualmente Ok. Agora temos pop-ups de fornecedores para os provedores. Então, vamos para a página inicial. Agora é hora de copiar a URL para copiar a URL, clicar em editar com Elementor e aqui é só mudar a doutora Lisa Na verdade, não precisamos de título agora aqui, vamos pesquisar, vamos ver nossa fornecedora Emma. Então, aqui, clique com o botão direito, na verdade, temos que mudar o título para ma e adicionar o título, então temos que adicionar o segundo, o Mich. Então, novamente, duplique este por duas vezes, eu acho, duas vezes ou uma vez Então, temos esse último provedor, e aqui está um nome como este. Ok, agora eu clico em publicar e é hora de obter a URL. Então, primeiro, temos malik, copie o endereço do link, o endereço do fasink aqui e copie assim Em seguida, a Ema edita o arquivo da Emma. Aqui no link pop-up em um URL como este, clique em um URL e clique em Salvar. Ok. Volte. E então temos o médico Mike, aqui está o URL de Michael, copie o endereço do link e, em uma tinta como essa, clique em Salvar Então temos o endereço da médica Sara Oink, aqui e copie o URL, depois volte e vamos para o último no link save, então não precisamos dessa seção, vou apenas removê-la e clicar em publicar e vamos visitar o site Então, nossos fornecedores, vamos ver o pop-up. Temos um problema. Então, quando tentamos abrir o pop-up, ele não abre, e eu sei o motivo. Então, vamos inverter o modelo do painel em modelo, temos pop-ups Então, aqui, vamos pegar esse pop-up de Sara Thompson e vamos abrir todos eles Temos que abrir todos eles e, como uma configuração, Ok, eu salvo as opções, podemos ver a condição de exibição. Na condição de exibição, nós apenas o deixamos vazio, mas temos que adicionar uma condição como essa, então temos que incluir o site inteiro, ou podemos adicioná-lo para singular ou singular, mas vou criar o site inteiro e clicar em Salvar alterações. Ok, então eu farei isso para o resto dos pop-ups como este. Ok, agora o que temos que fazer é verificar o site. Então, vamos verificar se ela solicita a página e agora ela deve funcionar. Sim, agora está funcionando. Vê? Portanto, esse é um pequeno problema que temos que resolver. Agora está bem. 150. Torne o rodapé funcional: Ok, a página inicial está pronta agora e, no rodapé, precisamos fazer algumas alterações Os botões ou os ícones de mídia social não estão funcionando e também precisamos adicionar mais links rápidos, e aqui temos que adicionar ações a esses números de telefone e e-mail. Vamos fazer isso. Para fazer isso, precisamos editar o rodapé Então, se eu passar o mouse sobre esta edição com o elemento ou aqui temos o cabeçalho principal e o rodapé principal, selecionarei o rodapé principal . Tudo bem. Então, aqui temos que adicionar um link para esse ícone de mídia social. Eu clico aqui. E aqui está a lista de ícones de mídia social e atualmente, não temos nenhum perfil de mídia social para a Clínica Familiar JB, então vou apenas adicionar o URL do site como aqui, Facebook, URL e clicar na Opção de Link e garantir que ele abra em uma nova janela e aqui no Twitter Vou apenas adicionar HTTP, scall e slashlashx.com e, em seguida, aqui temos o LinkedI. Vou apenas adicionar HTTP call e slashlas linkedin.com.com . Na verdade, isso deveria ser um ponto, assim. E, finalmente, temos o Instagram. Instagram, vamos lá. Então, bom. Agora, acabamos de adicionar um link às mídias sociais e, no Quickink, adicionamos o menu principal, mas vamos criar um menu diferente para comida e adicionar o link Puta Então, para fazer isso, clicarei nessa tela de menu e ela abrirá o menu em uma nova janela. E aqui vou clicar em criar um novo menu e, a partir daqui, adicionarei o menu like Puta Em seguida, clique em Criar Menu e não defina nenhum local de exibição nem nada. Em seguida, nas páginas, clicarei em ver EL e aqui precisamos da primeira página sobre contato, bloqueio, solicitação, agendamento. Vamos adicionar todos esses itens e aqui temos que mudar o título. Na etiqueta de navegação, farei com que a primeira seja em casa, a segunda seja próxima e a terceira entre em contato, e aqui esta será bloqueada e a terceira será solicitada uma consulta como esta. Agora eu clico em Samno e aqui, publicarei essas alterações atuais e terei que atualizar esta página para carregar este menu Vamos atualizar a página. OK. Vamos clicar no menu para editá-lo e aqui agora temos a opção de menu em tempo integral, selecione-a e o menu completo aparecerá assim. Além disso, precisamos adicionar o termo e condição e o URL da política de privacidade a esta seção semanal e eu farei isso em vídeos futuros Agora, no telefone, como fizemos antes, se alguém clicar nesse texto telefônico, ele ou ela deve abrir a moda da discagem telefônica Para fazer isso, primeiro copio o número, depois adiciono tell fallen e vamos adicionar o número assim. É um número falso. Você deve adicionar um número real no seu caso desta forma. OK. Basta adicionar, contar e ligar no primeiro texto do link. Ok, agora temos que ir para o e-mail, copiar o e-mail. Agora, no Google, vou apenas pesquisar o código HDL do e-mail e nenhum link de e-mail O link do e-mail, o código dM, também será enviado por e-mail. Então eu apenas copio e venho aqui, colo assim passo o e-mail OK. Abra uma nova janela, agora clico em publicá-la e, para endereço e horário de funcionamento, está bom, e agora temos que mudar a seção de direitos autorais. Na seção de direitos autorais, daqui em diante, vou colocar o link AHF HREF igual e fechar o colchete, depois em Hf vou colar a URL da página inicial do nosso site e, no final, fechar a tag A como Ok, agora ela acaba de se tornar URS, então quando alguém clicar aqui, ela será quando alguém clicar aqui, ela redirecionada para a página ela Agora clique em publicar. E se você quiser, podemos adicionar a barra Design pelo URL dois do site da nossa empresa, mas neste caso, vou adicioná-la assim e pronto, o rodapé está pronto para ser Então, vamos ver aqui. Então, quando clicarmos nesse link, ele será redirecionado para a conta de mídia social e Nice Então, vamos para a próxima página. 151. Torne o site responsivo: Agora, aqui temos que corrigir a página A. Vou clicar em editar com Elementor e agora, se verificarmos o design aqui, temos um botão, então clicarei em Editar e ele deverá ir para a página de solicitação de sua consulta Vou abrir as páginas do Word Press Dash, L páginas aqui, copiar o URL na solicitação para confirmar a página de hoje e apenas colocar o URL e opção vinculada como aberta em Nova Janela, e pronto, então o que precisamos fazer é tornar o site responsivo para Então, vamos começar do topo. Então, aqui, está ficando bem na versão para tablet. O motivo é que já usamos a seção da página inicial para criar isso No entanto, aqui, podemos adicionar algum espaço a esse botão. Então, vamos selecionar o botão e, com antecedência, removerei essa parte superior negativa Sim. Quando eu removo o topo negativo, parece bom, talvez adicione menos dez Ok, agora está muito melhor, e aqui está bom. E aqui vou clicar nesta grade e na grade. Vamos fazer isso como uma coluna no celular como essa e não no celular, uma coluna na visualização do tablet, e agora está tudo bem, certo. E no rodapé, está tudo bem, mas temos algumas coisas para editar no rodapé Então, vamos publicar isso e vamos para o Mainfooter e, no rodapé principal, clique no tablet e aqui, vamos fazer esse centro de alinhamento de URL Aqui, alinhe seu centro. Por algum motivo, esse texto não está alinhado corretamente, mas acho melhor começar o alinhamento. E a partir daqui, vamos mudar a tipografia. A tipografia do botão deve ser um pouco menor na versão para tablet, então vamos clicar aqui para acessar o telefone Global e no Globalfon o tamanho do botão, vamos adicioná-lo Salve as alterações. Tudo bem, clique aqui para voltar, fechar esta janela para salvar e pronto, agora está muito melhor do que antes. E aqui, o que temos que fazer é remover o preenchimento e a margem e agora tudo fica bem Talvez vamos adicionar o preenchimento direito como 30 pelo preenchimento esquerdo como Ok. Agora está bem no tablet, e agora vamos novamente para a página sobre que teremos que acessar e aqui sobre, depois clicar em editar com o Elementor Então, a visualização do tablet fica melhor. Em seguida, vamos para a visualização móvel. Na visualização móvel, o cabeçalho está bom. Vá, volte. Na visualização móvel, o cabeçalho tem uma boa aparência, e aqui temos o texto do cabeçalho e o texto de fundo. Se quisermos, podemos adicionar uma imagem diferente, uma imagem de fundo diferente porque essa imagem não a mostra corretamente, mas acho que vou mantê-la assim porque está visível corretamente e está aqui, então está bonita . No rodapé, parece bom. Então, nada para editar na visualização móvel, então eu vou realmente publicar. Então, agora vamos para a próxima seção. Então, primeiro, vá para a página inicial e, em seguida, agora temos a página de bloqueio. Na página Bloquear, clique em Editar com elemento vamos ver se precisamos fazer alguma alteração até agora, tudo bem. Então, agora vou para tablet em tablet, precisamos fazer algumas mudanças. Então clique aqui e nesse preenchimento direito e esquerdo, devemos alterá-lo para que 30 por 30 seja muito grande. Talvez façamos com que seja 20 por 20. Sim, 20 por 20 vai ficar bem. Acho que deveria ser 30 por 30, 30 por 30. Sim. Quando eu faço 30 por 30, o alinhamento estava correto e o resto está OK, então agora eu posso verificar no celular Então, vamos verificar a visualização móvel e, no celular, ela fica ótima. Não precisamos de nada para fazer. Na verdade, podemos alterar o tamanho do preenchimento. O preenchimento será de 15 por 15. Sim, o padrão é 15 por 15. Ok. Agora clique em publicar e, em seguida, temos que editar a postagem em bloco único. Vamos para um desses blocos como este e temos que editar o design dessa página de bloco. Então, para fazer isso, aqui temos o elemento de uma única postagem ou podemos simplesmente acessar modelos ou o criador de equipes dentro do modelo e, em seguida, verificar a postagem única, e esta é a postagem. Então, agora clique em adicioná-lo. Tudo bem Agora vamos ver a prévia do tablet no tablet. Temos que mudar os dois. O cabeçalho parece bom. Agora mude isso para 30 por 30, e o resto ficará bem. E também aqui, temos que fazer isso de 30 por 30 assim. Na verdade, não precisamos fazer com que seja 30 por 30 no celular no tablet, e agora está com boa aparência. Então, agora vamos para o celular. O celular ficará assim. E aqui temos que mudar isso para 15 por 15. O recipiente deve ser colocado nas almofadas 15, à direita, 15 Ok. Agora, clique em publicar. Ok, agora vamos para a próxima página. A próxima página é Evitar. Na verdade, nosso ID não é uma página. É nesta seção e na página inicial, estamos prontos para torná-la responsiva para dispositivos móveis, e agora precisamos entrar Em Contato, clique no elemento editado Ok, agora vamos ao design aqui. Temos todos os detalhes e agora o que podemos fazer é clicar nessa imagem e, na imagem, podemos adicionar um URL personalizado e adicionar esse número. Copie o número aqui. Isso será cauda, código e coisas assim. Tudo bem. Além disso. Então, como eu disse antes, este é um número de página. Então, não pense nisso. Ou, ao adicionar o número, adicione-o com o código do país. No meu caso, deveria ser mais 94. E aqui, agora eu tenho que ir ao tablet PortraTV e vamos mudar isso O cabeçalho parece bom, e aqui temos que alterar essa altura para 30 e a esquerda para 30. Na verdade, não parece bom. O que podemos fazer é reduzir a receita aqui. Então, vamos fazer com que seja como 21. Sim, 25, 25 vai ficar bem. Agora está tudo bem. Então, no mapa, vamos fazer isso como 30 por 30. Ok. Agora, o retrato do tablet parece bom. Agora vamos mudar para o celular. No celular, aqui podemos fazer isso de 15 por 15 e , em seguida, aqui podemos adicionar algum espaço, então vamos adicionar margem superior a 30. Sim, precisamos de um espaço lá como este. Ok. Agora, se quisermos, podemos centralizar esse botão. Botão Vamos fazer. Vamos ao estilo do botão no estilo do botão. Aqui temos o centro da posição. Ok, agora está muito melhor, e aqui o que podemos fazer é mudar a direita para 15 e a esquerda para 15. Ok. Parece bom. Agora eu clico em publicar e, em seguida, o que temos que fazer é editar essa nova abertura, sim, editar a solicitação em uma página de agendamento. Clique na página e vamos clicar em Editar com elemento ou OK. Tudo parece bom e clique na área da porta do Tablet e aqui Agod e aqui, vamos fazer isso à direita como 30, à esquerda como 30 Ok, está bem. Então sim, só temos uma seção. Então, no celular, vamos virar à direita como 15 e a esquerda como 15. Ok. Publique-o. E no celular, o menu não está aparecendo. Ok. Então, vamos clicar no rodapé e aqui no celular. Não, vamos colocá-lo no centro. O alinhamento será enviado. Ok. Quando o tornamos Centro de Alinhamento, tudo bem Então, agora publique. Ok, publique-o e 152. Configure o formulário de contato: Olá, pessoal. Agora é hora de adicionar ações a esse formulário de contato. Então, atualmente, se apenas clicarmos em enviar, na verdade, temos que preencher o formulário, nada acontecerá porque não configuramos isso, então agora eu clico em editar com Elementor No elemento pro, temos o recurso de formulário de contato. Então, se isso fosse um elemento gratuito, teríamos que usar um plugin diferente, como formulário de contato sete ou o formulário W. Então, agora eu clico em Editar formulário de contato para editar isso. Ok, aqui estão os campos do formulário e configuramos corretamente esses campos do formulário, e agora temos a ação após o envio. Então, vamos um por um. Então, o botão, nós já configuramos o botão e, em seguida, temos essa ação após o envio. Então, aqui temos um passo que podemos fazer. Então, se eu simplesmente remover todos eles, vamos remover todos eles. Então, ao adicionar a ação, clico nesse ícone de adição. No ícone de adição, temos a opção chamada coletar envio. Se selecionarmos apenas este e quando alguém adicionar seus dados a este formulário de contato, poderemos coletar esses envios Para coletá-los, posso acessar o painel. No elementor, aqui temos uma seção de envio e daqui podemos ver o envio Atualmente, temos um deles. Parece que é um spam. Assim, podemos gravar ou coletar um envio desta tabela e, para obter mais informações, podemos ver de onde ele vem. E podemos clicar para ver o conteúdo. Isso é só um código falso. Esta é apenas uma submissão do IPAM e vou mostrar como evitar esses dois IPAM Agora veio desse e-mail. Agora vou voltar e aqui temos mais opções. Temos e-mail e e-mail para a opção. Se selecionarmos essa opção de e-mail, podemos obter os detalhes do formulário. Se alguém preencher esses detalhes do formulário, podemos enviar um e-mail para nossa caixa de e-mail e, por e-mail, também podemos enviar um e-mail para a pessoa ou visitante que preencheu o formulário. Então, vamos adicionar essas informações. No envio da coleta, também podemos obter o IP do usuário e o agente do usuário. Confira aqui, podemos ver aqui o usuário IV e o agente do usuário são esses detalhes. Vamos concluir todo o processo de e-mail e testá-lo. Primeiro, temos a seção de e-mail. Se selecionarmos aqui o e-mail, podemos ver esta seção de e-mail e aqui, vou removê-lo e aqui podemos mencionar os dois e-mails, que significa que podemos mencionar o e-mail que precisamos para receber esses e-mails do site, e aqui podemos adicionar um assunto. Então, vou manter esse mesmo assunto. Então, é como uma nova mensagem da JB Family Clinic e aqui adicionamos campos Earl, o que significa que l desses campos serão adicionados à mensagem do e-mail E então aqui podemos definir a partir do e-mail. Eu vou te mostrar como criar e-mails com nossa conta de e-mail. De e-mail significa o e-mail que envia e-mail aos visitantes ou nossa caixa de e-mail, aqui podemos adicionar o nome do remetente, portanto, mantenha os detalhes padrão e você pode alterar qualquer um desses detalhes e aqui podemos adicionar resposta ao e-mail. Atualmente, não temos nenhuma resposta ao e-mail. Para responder ao e-mail, selecionarei o campo de e-mail e, se quisermos, podemos adicionar cópia carbono OCC e BCC Não precisamos de nenhum deles. E nos metadados, também podemos adicionar esses detalhes. Vou adicionar todos eles. Agora nosso e-mail está completo. Então, temos o e-mail dois. Envie um e-mail para dois homens que acham que os visitantes enviam um e-mail para nós. Como proprietário do site, receberemos esse e-mail. Assim, teremos todas essas informações e poderemos enviar uma mensagem de resposta automática quando o visitante clicar no botão enviar Podemos responder automaticamente ao e-mail sua caixa de e-mail porque já temos aqui seu endereço de e-mail. Então, aqui vou mudar o assunto e as mensagens. Vamos usar a IA para gerar. Ok, aqui estou eu na JAG PT, então vou vender o JAG PT para gerar e-mail de resposta aos visitantes que preencherem o contato Vamos ver que tipo de mensagem geramos pelo JgBT. É muito longo. Digamos que seja breve. Vou apenas adicionar esse tipo de mensagem, então vou copiar a mensagem e vir aqui, não aqui, venha aqui. Na verdade, vou remover esta porque não precisamos dela e apenas adicioná-la Vamos removê-la se for uma parte urgente e adicionar apenas esse tipo de imagem. E aqui, podemos selecionar o primeiro nome porque se para campos de formulário em campos de formulário, na verdade, temos nome completo em nome completo. Com antecedência, podemos ver o nome do campo. Eu apenas copio o nome do campo assim e depois, acho que isso vai funcionar. Se isso não funcionar, vamos ver o que podemos fazer. Basta colar assim e tudo bem. Agora temos esse e-mail e aqui temos que adicionar o e-mail do remetente e o nome do remetente ficará bem e aqui a resposta deve ser o e-mail inserido pelos visitantes no formulário. Com antecedência, podemos preencher e vamos adicionar 32 assim. Agora temos a configuração de etapas. Na verdade, não temos nenhuma etapa e, como opção adicional, estamos prontos, já estamos com os designs e vamos ver os resultados. Agora vou publicar isso e, em seguida, temos que criar a caixa de e-mail porque se tentarmos enviar isso, esse e-mail nunca será enviado ou o e-mail não irá para nossa caixa de e-mail ou este e-mail um ou e-mail 2% porque não tínhamos um e-mail de origem e dois e-mails. Vamos fazer isso. Para fazer isso, vou acessar minha conta com chip de nome. Você deve ir ao provedor de hospedagem e acessar o painel C. Então, aqui eu clico aqui e clico em Ir para o painel C. Ok, eu redireciono para o painel C e para o painel C, então se você não usou o jipe, não importa, o painel C é o mesmo em todos os provedores HostEm Pode ter algumas mudanças, mas é bem parecido. E se você não tiver uma conta de e-mail, se o seu provedor de serviços não tiver uma conta de e-mail, entre em contato com eles e obtenha-a deles. No chip de nome, já recebemos os e-mails. Se eu rolar para baixo, podemos aqui enviar uma conta de e-mail ou podemos simplesmente pesquisar aqui o e-mail. Aqui vamos nós. A partir daqui, basta clicar na conta de e-mail. Ok, aqui, eu tenho meus e-mails antigos. A partir daqui, basta clicar em Cre e aqui seleciono o URL do nosso site e, como nome de usuário, adicionarei quatro e gerarei uma senha Vou gerar uma senha e voltaremos. Tudo bem. Agora eu clico em Concriar, o e-mail terá informações no ponto de design do site personalizado para que você possa adicionar qualquer nome ou qualquer nome aqui como exemplo Se você for Joan, você pode adicionar Joan na URL do seu site e agora eu clico Ok, precisamos de outro e-mail para adicionar como dois e-mails. Do e-mail, haverá informações, e vamos criar dois e-mails . Vamos selecionar o domínio e eu adicionarei meu nome. OK. Em seguida, configurarei a senha dessa forma e, em seguida, clicarei em Criar. Agora temos esses dois e-mails. Vamos definir essas informações. Basta copiar o e-mail e vamos para o formulário de contato. No e-mail, adicionarei aos e-mails este aplicativo de informações personalizado do site design.us e, em seguida, copiarei este e-mail, copiarei e adicionarei como dois Em seguida, como e-mail para, adicionarei ao e-mail o endereço de e-mail que o usuário inseriu aqui. Acesse ps e on compile por e-mail, avance, copie o déficit, e-mail um é bom, e-mail dois serão dois, dois são a pessoa ou o destinatário ou a pessoa que preencheu este formulário e o formulário será informativo Vamos copiar o e-mail informativo. Ainda estou aqui, e a resposta para será : eu estava errado antes. A resposta será uma informação no design personalizado do site. Os dois devem ser os dois e-mails devem ser o e-mail que o usuário comeu agora com publicação cíclica e ainda não configuramos o SMTP, mas vamos tentar se esse e-mail mas vamos tentar se esse e-mail foi enviado ou não e pré-visualizar, e agora vou preencher este formulário de contato Ok, vamos lá. Acabei de adicionar as informações, e aqui não adicionei nenhum documento, então agora clico em enviar e vamos ver o que vai acontecer. OK. Digamos que seu envio tenha sido bem-sucedido, e vamos ver se realmente recebemos o e-mail. Para verificar o e-mail, vou aqui e qual é o e-mail que está configurado como o e os dois são uma rede, vamos aqui e clicar no e-mail do jet. E aqui temos o software de webmail, basta clicar em Abrir. Vamos ver se esse e-mail foi enviado ou não. Sim, na verdade funciona, mas eu não esperava isso. Então, quando passar, veremos assim. Sim, na verdade é passar. Isso é um sinal causal. No entanto, se você não recebeu o e-mail em sua caixa de e-mail, ao tentar isso, mostrarei como corrigi-lo e mostrarei como configurar o SMTP Aqui temos essas aspas no cabeçalho, então vamos aqui. Os assuntos devem remover essa citação Nós não precisamos disso. E vamos ver no e-mail também. Também está no e-mail. Na verdade, o assunto do e-mail deve ser alterado. O assunto deve receber uma mensagem, vamos lá, é só testar assim, e espero que você entenda. Se você não entendeu nada dessa parte, é só me avisar. Vou criar um vídeo diferente. OK. Agora vamos ver nosso e-mail testado como usuário, eu adiciono esses GMs, vamos ver se recebemos o e-mail para G Ok, aqui está minha caixa de e-mail e ela foi recebida Então, aqui está nossa mensagem. Oi Gian Gian, quero dizer, o nome completo que eu insiro, obrigado por entrar em contato. E aqui temos o e-mail. Na verdade, o e-mail está em uma única linha. Temos que melhorar as coisas. Para melhorar, acho que podemos adicionar STMA. Vamos tentar adicionar STM , o BR é quebrar a VR e publicar Portanto, os e-mails estão funcionando perfeitamente aqui. Como eu disse, isso é um bom sinal. No entanto, se você não receber o e-mail na próxima lição, mostrarei como corrigi-lo. Antes de fazer isso, vamos até o envio e clicar em envio, e no envio aqui, temos o e-mail. Podemos clicar aqui para ver e verificar os detalhes do e-mail como este e bom. 153. Corrija o problema de e-mail que não enviam | configure o plugin SMTP: Olá, pessoal. Se você não está recebendo e-mails do seu site WordPress, veja como corrigi-lo. Então, primeiro de tudo, vamos aos plugins e clique em Novo plugin. E aqui, vamos pesquisar o WP mail SMTP. Sem correio principal. Correio. Tudo bem. Aqui está o plugin e ele é compatível com a nossa versão do Wordpress. Clique em Instalar agora. Tudo bem. Agora, clique em Ativar. Vou apenas clicar em voltar ao painel. OK. Agora, aqui temos a configuração. Além disso, podemos testar se nosso e-mail está funcionando corretamente ou não. Se usarmos ferramentas sobre ferramentas, aqui temos o teste de e-mail, e aqui podemos adicionar nosso endereço de e-mail e clicar em enviar e-mail , digamos que um emissor foi detectado No entanto, este e-mail do site funcionava antes. Vamos ver se recebemos e-mail dessa vez. Ok, acabei de entrar na minha conta do Gmail e não estou vendo o e-mail, o que significa que esse plugin interrompe a funcionalidade de e-mail do meu site. Vamos consertar isso. Primeiro vou me instalar aqui, terei que definir o e-mail do baile Nosso e-mail de formatura será este . Copie e coloque o Primmil O e-mail de formatura significa e-mail que enviamos e-mails deste site e , em seguida, aqui forçamos o e-mail de formatura a ser ativado e aqui podemos definir o nome Manterei o nome padrão e os dados padrão. Em seguida, no mailer Iwa, o SMTP. Ok, aqui temos que adicionar o host SMTP. Então, vamos obter essas informações. Para obter essas informações, basta acessar o painel C, aqui está nosso e-mail e clicar em Conectar dispositivos. Ok, aqui temos todas as informações. Primeiro, precisamos de um host como host, usarei esse endereço de e-mail. Vamos até aqui e adicionar o host como nosso endereço de e-mail atual. Em seguida, para criptografia, selecione SSL e aqui a porta SMTP é 465 Ok, e o host SMTP deve ser esse servidor de saída. Copie e cole aqui, não o endereço de e-mail e nome de usuário SMTP será o endereço de e-mail O uso e aqui a senha da conta de e-mail. Você se lembra que quando criamos uma conta de e-mail, basta criar a senha para ela com essa senha, inserir a senha, OK, ativar a autenticação e clicar em Salvar configuração Se você usa o Google Workspace ou outro provedor de e-mail, basta selecionar o remetente que você usa e configurar os detalhes Nesse caso, estamos usando o SMTP do servidor, então eu configurei essas informações Ok, vamos às ferramentas, e aqui temos um problema. Atualize-o. Ok, aqui no enviar para e-mail e clique em Enviar e-mail e vamos ver o que vai acontecer. Por algum motivo, o site não está carregando, mas esperamos que isso funcione. Ok, diz sucesso e aqui está uma mensagem de aviso. E, por enquanto, vamos ignorá-lo. Então, agora aqui temos o e-mail. Portanto, se você seguir a mesma etapa que eu uso, conseguirá corrigir o problema de não envio de e-mails. Então, agora vamos testar nosso e-mail ou testar nosso formulário de contato. Basta clicar no formulário de contato e aqui, basta acessar o formulário de contato e vamos adicionar essas informações. E desta vez, vamos fazer o upload do arquivo. Clique em ConChoosFle e vamos fazer o upload desta imagem e, em seguida, clique em C submit e vamos ver que tipo de e-mail recebemos Ok, digamos que o envio foi bem-sucedido. Então, vamos acessar nosso e-mail e atualizá-lo. Aqui recebemos o e-mail e aqui também o anexo. Aqui temos informações. Portanto, é muito bom que os e-mails estejam funcionando e aqui eles devem ser recebidos. Recebemos sua mensagem de e-mail. Ok, bom. Quanto ao elemento ou aos envios, teremos um registro desse e-mail Aqui está aquele e-mail, muito bom. Agora temos que passar para o formulário de solicitação de agendamento, solicitar seu formulário de agendamento. Solicito sua consulta, aqui temos o formulário. Temos que fazer esse formulário funcionar. Vamos clicar em Editar com Eli Mondo para editá-lo e funcionar Clique neste ícone de lápis para editar o formulário e já temos os campos do formulário e o botão está funcionando. Agora temos que agir após o envio e aqui coletaremos o envio e o e-mail. Vamos adicionar e-mail também. Em seguida, no envio da coleta, vamos adicionar o UserIB e o agente do usuário Por e-mail, vamos configurar os mesmos detalhes que configuramos aqui. O e-mail estará aqui serão os dois e-mails aqui. Aqui estarão os dois e-mails. Então vamos copiar esse texto e colocar o assunto como solicitação e agendamento. Em seguida, veremos os campos e agora temos que configurar o e-mail do formulário. Aqui vamos do e-mail, cole do e-mail aqui, então o nome do formulário será esse e a resposta será o campo do e-mail. Sem cópia carbono ou sem CC. Então, aqui vamos coletar os metadados e agora no e-mail, os dois serão o endereço de e-mail Vamos aos campos e aqui, avance e copie o código curto do e-mail. Então, como eu disse antes, quando alguém envia um e-mail, recebe uma mensagem de confirmação do site. Adicione isso como do e-mail e, para o nome do baile, copie esse adiantamento e cole-o assim, então a resposta será este e-mail Copie a resposta para, e aqui temos que adicionar a mensagem. Então, aqui, vamos adicionar essa mensagem como esta. Você pode melhorar essas mensagens. Eu apenas crio assim, adiciono o BR e removo essa parte. Não precisamos desse, adicione o BR novamente para quebrar as linhas, e aqui temos que mudar de campo para esse campo. E primeiro assim, depois bom. Ok, bom. publicar e ver se funciona ou não. Pense que se quisermos alterar a mensagem de sucesso, podemos simplesmente acessar Opções adicionais e clicar na mensagem personalizada em. E aqui temos as mensagens. Então, aqui podemos mudar. Vamos dar sucesso ao enviar uma mensagem por e-mail quando você tenta solicitar um agendamento. Vamos acrescentar que sua solicitação de agendamento foi enviada. Então, segure-o aqui e clique em publicar e então vamos experimentar. Então, a partir daqui, clico no botão Solicitar sua consulta, e aqui temos o formulário. Então, vamos adicionar esses detalhes. Ok, aqui eu preencho as informações. Agora eu clico no botão de solicitar agendamento e vamos ver o que vai acontecer. Ok, vamos lá, sua solicitação de agendamento foi enviada por mensagem. Portanto, no envio, se atualizarmos aqui, temos o e-mail ; portanto, se quisermos filtrá-lo dos formulários, basta selecionar aqui, basta selecionar aqui, solicitar agendamento e clicar nele para filtrar automaticamente os e-mails do formulário de solicitação de agendamento Então, se quisermos exportar, basta clicar em Exportar filtro para CHV e sim, isso é muito legal e vamos ver nossos endereços de e-mail Aqui recebemos o e-mail. Na verdade, esse é o e-mail. Por algum motivo, esse e-mail não parece bom. Então, vamos ver e tentar consertá-lo. Além disso, temos que mudar o assunto aqui, então vamos mudar o assunto para mudanças na solicitação de consulta na clínica familiar V consulta na clínica familiar , como então aqui já estamos no BR break tag Por que não está funcionando, deveria funcionar. De qualquer forma, clique em publicar e, se virmos os detalhes aqui, recebemos o e-mail com detalhes como esse e também recebemos os metadados. Agora nossos e-mails estão funcionando bem e, se quisermos, podemos escrever novamente, mas, por enquanto, não vou escrever novamente. Se usarmos o estilo e as mensagens, podemos alterar as cores das mensagens na mensagem de sucesso, vamos torná-la verde assim, e podemos fazer coisas assim também. Assim, essa mensagem de erro estará em vermelho, então clique em publicar. Ok, nos vemos na próxima aula. 154. Configure um plugin SEO de matemática de classificação: Olá, pessoal. Agora temos que fazer o SEO técnico e na página. Para o SCO na página, podemos configurar facilmente seguindo etapa de configuração do Rank Math. Então, vamos fazer isso. Primeiro, vou até os plug-ins e clico em Novo ou em Adicionar plug-in. E aqui temos sete plugins para atualizar. Eu já mostro como atualizar site sem problemas. E agora vou pesquisar o plug-in. Então, tendência de pesquisa. Apresentador de matemática. Ok, aqui temos o Rank Math SEO e ele é compatível com nossa versão do WordPress, então eu clico em Instalar agora e clico em Ativar. Ok, como primeira etapa, tenho que conectar essa conta do Rank Math à minha conta do Gmail Ou contas do Google. Aqui, clicarei em Conectar sua conta, e aqui temos a opção de fazer login, então basta clicar nessa opção do Google. Nesse caso, eu tenho uma conta, mas se você não tiver uma conta Rang Math, basta clicar em Registrar agora e criar uma conta gratuita no Google Facebook gowordfx.com, ou você pode usar o endereço de e-mail que você usa para receber e-mails No meu caso, eu já tenho uma conta, então vou entrar nela, clicar no Google para me inscrever no Gmail Agora eu sigo o passo, basta clicar em continuar aqui e clicar em ativo agora. O plugin está configurado e agora temos que concluir esse assistente de configuração. Aqui, selecionarei fácil porque SEO é um assunto profundo e diferente. Portanto, quando selecionamos essa opção fácil pois os web designers gostam de nós, ela nos ajudará a usar o conhecimento que já temos, e o resto das coisas será configurado pelo plug-in. Então eu clico em configurar está tudo bem, aqui eu tenho que adicionar os detalhes. Nesse caso, meu site é um site de pequenas empresas, então o tipo de empresa é. Então, aqui, eu tenho que selecionar o tipo de negócio. Nesse caso, deve ser saúde. Então, vou pesquisar a saúde real aqui, temos a saúde de busca hospitalar. Não, temos hospital. Sim, temos hospital, então selecione o tipo de negócio, e aqui está o nome do site, e então temos o logotipo Do. Então, aqui o tamanho é de 100 poços por 100 poços e esta imagem deve ser quadrada Então, minha imagem atual não é quadrada, então vamos fazer uma imagem quadrada Para fazer isso, basta ir ao nosso Figma e clicar em nosso projeto E se verificarmos a folha de adesivos, podemos ver nosso logotipo aqui Vamos criar uma nova moldura e vamos criá-la assim. Então vamos fazer esses cinco poços por 552 poços. Agora está quadrado e agora vou adicionar o logotipo. Nas bibliotecas de ativos, terei o logotipo, selecionarei o logotipo. Selecione inserir instância e coloque-a aqui. Vamos torná-lo maior. Aqui, vou apenas separar a instância para editar esse logotipo porque quero aumentar o tamanho Este é o logotipo de texto, o que significa que aumentei o tamanho da tipografia Se você usar a imagem como logotipo, basta aumentá-la. Nesse caso, eu vou fazer isso então vamos aumentar essa parte da família, fazer com que 100 seja demais. Criei o logotipo e agora vamos renomeá-lo como logotipo. Gosta do Google e agora selecione-o e clique em Exportar, vou fazer esse logotipo como JPG e clicar no botão Exportar, Exportar. Então eu vou para tinypng.com e vamos fazer esse logotipo minimizar assim, depois clico neste botão JPG para baixá-lo e agora vamos aqui e remover este e clicar em adicionar E aqui, vamos adicionar esse logotipo, adicionar texto alternativo como esse, clicar em usar este arquivo, e agora temos um logotipo como esse e agora culpamos a imagem de compartilhamento social. Portanto, essa imagem aparecerá quando alguém compartilhar URL do nosso site em mídias sociais como Facebook, LinkedIn Twitter ou Twitter Minix ou qualquer outra plataforma do Facebook, o tamanho da imagem deve ser 1.200 Então, vamos criar outro quadro. Vamos fazer assim e vamos colocar isso aqui. Vamos finalizar como social, sim, social e terá 1.200 e a altura será 630 assim e temos que adicionar uma Nesse caso, vou apenas adicionar esta seção de heróis, selecionar a seção de heróis, copiá-la e aqui está nossa moldura. Aqui é só colar assim e agora vou diminuir seu tamanho assim. Então, vamos também adicionar esse texto. Copie este texto e esse texto e cole, selecione e cole aqui, então vamos fazer assim. Temos que remover esse. Vamos fazer isso 90. Então, novamente, vou copiar este globo daqui e colocá-lo assim, então a cor do texto deve mudar para a cor branca. OK. Talvez vamos diminuir esse tamanho para 50, aqui, tipo 36. OK. Na verdade, podemos simplesmente copiar o cabeçalho, essa parte copiá-la e voltar aqui, remover essa e colar assim. Então eu vou remover essas duas partes e aqui, vamos fazer esse tamanho assim e vamos colocar assim. Isso é muito melhor. Agora eu seleciono esse quadro e vou exportar, defino como JPG, exporto e em PNG minúsculo, podemos reduzir o tamanho cinco OK. Faça o download. Portanto, se você tiver um tipo diferente de imagem, também poderá adicioná-la, mas, nesse caso, já temos o arquivo Figma É por isso que podemos simplesmente criar nosso design usando o arquivo Figma E vamos adicionar texto ALT como este, clique em usar este arquivo. Ok, agora clique em Salvar e continuar. Ok, agora precisamos nos conectar à nossa conta do Google. Então, lições futuras, criaremos o perfil do Google Analytics e do Google Search Console e o configuraremos com nosso site para obter melhor visibilidade na classificação de pesquisa do Google Portanto, temos que selecionar a conta do Gmail que vamos usar para o serviço do Google que vamos usar Então, clicarei em Conectar serviços do Google e, a partir daqui, selecionarei conta do Gmail que vou usar para o site Clique em continuar, clique em Selecionar e, em seguida, clique em Continuar. Ok, atualmente, não temos nenhuma dessas informações e, no futuro ou nas próximas aulas, nós as criaremos. Por enquanto, clique em Salvar e continuar. Em seguida, clique em retornar ao painel. Ok, acabamos de configurar o Rank Math SO com nosso site. Então, aqui estamos no Rank Math SO com título e meta. A partir daqui, podemos ver como nosso site será exibido no Google. E aqui temos abas. Então, com essas guias, podemos adicionar mais detalhes. Por exemplo, se você quiser adicionar seu endereço de e-mail, basta adicionar o endereço de e-mail e, se quiser adicionar seu endereço ou seu endereço comercial, você pode adicioná-lo aqui, depois adicionar horários de funcionamento, números de telefone e, aqui, você pode selecionar a pesquisa na página A. Em seguida, na página de contato, pesquise contato. Esta é a página que já criamos, e aqui eu não vou adicionar o horário de funcionamento, se quiser, você pode adicioná-la. tipo de empresa já foi selecionado para o endereço Não vou adicionar o endereço e você pode criar um perfil do Google Meu Negócio Dessa forma, você poderá adicionar todas essas informações à sua conta do Google Meu Negócio e poderá configurar este site ou adicionar este site ao seu perfil do Google Meu Negócio. Então vamos até Ho Helmetta. Aqui, você pode adicionar sua página do Facebook e, se tiver outros perfis como X, LinkedI ou qualquer outro, basta adicioná-los em um perfil adicional Depois de fazer todas essas alterações, você pode clicar em Salvar alterações e aqui temos mais coisas. Mas se você não sabe muito sobre SEO, mantenha-os como padrão. E nesta seção da página inicial, temos que editar nossa página inicial para que a página inicial do nosso site apareça no Google quando alguém pesquisa como a JV Então, para fazer isso, clique em Editar página e no nome da página que você verá aqui, basta clicar em e quando você for aqui, você verá esse tipo de lugar. Este é o editor do blog, e aqui você verá esse ícone de classificação matemática, basta clicar nele. Ao clicar nele, você verá o Google Preview. Clique em Editar recorte e aqui você pode adicionar um título. Então, vamos adicionar o título. Vou adicionar a família JB Clini. Vamos fazer isso então na descrição, temos que adicionar a descrição. Então, quando você cria esses detalhes como exemplo, se alguém disser JV Family Clinic no Google, eu quero ver este site É por isso que incluo esse texto no título. Também tenho que incluir esse texto na descrição. Então, nesse caso, esse texto é a palavra-chave principal. Então, para descrever, adicionarei esse tipo de texto e agora, quando alguém pesquisar no Google, o site aparecerá assim Para colocá-lo na primeira página do Google, levará alguns dias. Se você tiver uma palavra-chave altamente competitiva, talvez seja necessário fazer mais coisas de SEO. Nesta palavra-chave de foco, você pode adicionar a palavra-chave de foco neste caso, eu apenas adiciono a Clínica JB fami e aqui podemos ver as informações que precisamos criar Agora Earl Good, então agora eu clico em ST para salvar esta prévia. Agora, volto novamente ao painel e, nas páginas do ER, podemos adicionar esses detalhes às páginas do Earl. Clique em Editar e eu a abrirei em Nova janela. Então, aqui, clique neste tapete de classificação e adicione o teclado de foco, vamos adicionar sobre JV Family Clinic e, em Editar é excluído, podemos simplesmente adicionar sobre a JV Family Clinic e apenas copiar, copiar e adicionar Então, aqui, podemos adicionar uma descrição também. Sempre tente adicionar esses textos de pré-visualização manualmente e, dessa forma, você terá um ótimo resultado. No entanto, se você tiver muitas páginas, basta configurar a pré-visualização para que ela apareça em cada página. Para fazer isso, acesse Frank Map, Title and meta. Aqui nas páginas, você pode definir a forma como ele deve aparecer. Nesse caso, não preciso desse nome de site, então vou apenas removê-lo No título e separador da página , se eu clicar aqui, posso ver mais coisas que podemos adicionar Então, neste caso, não temos. Portanto, neste caso, vou apenas adicionar um título como este e, na descrição, você pode adicionar e clicar em Conceber alterações Portanto, esse formato se aplicará às páginas do site e, na postagem, podemos fazer o mesmo. OK. Na próxima lição, vamos configurar o mapa do site e configurar o Google Search Console e o Google Analytics. 155. Configure o console de pesquisa e o GA4: Ative o Google Search Console. Portanto, quando configuramos nosso site com o Google Search Console, podemos monitorar e manter a presença do site na pesquisa do Google. Assim, podemos entender ou ter uma ideia sobre o desempenho das palavras-chave, como quais palavras-chave são classificadas no Google e muitas visitas que recebemos da Pesquisa do Google e coisas assim. Como podemos enviar mapa do site do nosso site para o Google Search Console, isso ajudará a classificar nosso site mais rapidamente no Então, vamos começar. Primeiro, vamos ao Rank Map SEO e ao geral S na configuração geral, aqui temos as ferramentas para webmasters e aqui primeiro temos o Google Search Console, então basta clicar na página de verificação do Search Console Ao fazer isso, vejo as etapas que devo seguir para configurar o Google Search Console. Vamos fazer o passo a passo primeiro. Precisamos acessar o site do Google Search Console. Então você verá esse tipo de janela. Aqui, basta clicar em Iniciar agora e aqui você deve adicionar detalhes da conta de e-mail. Vou adicioná-lo e nos vemos na próxima etapa. Ao fazer isso, você verá esse tipo de janela. Então, se você já tem um site, ele pode ser exibido aqui. Aqui, temos esse site personalizado design.us. O motivo é que configuramos essa conta de e-mail ou criamos uma contagem de classificação em nossa conta do Gmail e, em seguida, ela configura automaticamente o Google Search Console Então, se você for ao Analytic, poderá vê-lo aqui OK. Agora, se você não vê este site, basta clicar na propriedade e adicionar a URL do seu site aqui. Então, eu apenas adiciono o URL do meu site desta forma e clico em Continuar. E recebi essa mensagem de verificação. E se você não configurou o rank math SO e configurou sua conta GML, você terá que adicionar isso, adicionar uma tag TML, copiar essa tag DML e colocá-la A aparência da tag SDML será assim. Agora eu clico em ir para a propriedade e, a partir daqui, posso primeiro adicionar o Sitemap Clique no mapa do site e aqui temos que adicionar o mapa do site. Vamos analisar a matemática de classificação e a configuração do mapa do site. Nos sitemaps, podemos ajustar as informações. Então, aqui vou mantê-lo como padrão em vigor, torná-lo padrão e as páginas torná-lo padrão e elementos flutuantes Não precisamos classificar esses itens no Google, então vou antiquar isso porque eles fazem parte do design do site, não uma página inteira ou postagem Portanto, se você se lembrar das avaliações de clientes que criamos usando rodas personalizadas avançadas e não precisarmos classificá-las de acordo com nossos fornecedores, não precisaremos classificá-las porque esses itens fazem parte de uma página inteira. Por exemplo, nossos provedores são carregados na página inicial. Quando a página inicial for classificada, ela será automaticamente classificada na Agora eu clico em Salvar alterações, não precisamos de categorias, basta remover categorias. Mas se você se concentrar no blog e tiver categorias, não desamarre esses dois itens Clique em salvar sim e depois vá para Geral. Em geral, aqui temos o URL do mapa do site. Então, se eu clicar em, ficará assim. Então, o que precisamos fazer é copiar essa parte do EML. Aqui temos o URL e a barra do nosso site. Eu copio o texto depois da barra e vou aqui e colo assim Em seguida, clique em enviar. Ok, o mapa do site foi adicionado com sucesso e contém informações Agora, se eu for até aqui, vejo um problema, então basta clicar em Denunciar e ver o problema. Ok, digamos que o Google tenha detectado conteúdo nocivo em algumas das páginas do seu site. Este é um site de demonstração e, se você ver esse tipo de mensagem de erro, basta corrigi-lo e clicar em solicitar revisão. Nesse caso, eu não vou fazer nada disso. E com o tempo, vou ver os dados de desempenho e indexação nesse console de pesquisa OK. Agora, o que precisamos fazer é configurar o Google Analytics. O Google Analytics fornecerá uma visão de como os usuários interagem com nosso site. Então isso é muito importante. Dessa forma, podemos ver o que os usuários estão fazendo em nosso site e quanto tempo eles passarão em nosso site e quais países dos usuários vêm do nosso para o nosso site. Ok, agora vamos configurá-lo. Então, na análise, aqui temos a parte do Analytics, mas aqui não temos uma propriedade. Então, vamos fazer isso do zero. Se eu clicar em clicar aqui para KH, podemos ver mais informações sobre o Google Analytics. No entanto, vamos pesquisar no Google. Google Analytics para fazer login e clicar neste link do Google Analytics. Ok, a partir daqui, eu seleciono a conta GML. Então aqui eu já tenho uma conta do Analytics, mas vamos criar uma do Scratch. Para criar, clique no botão Criar e clique em conta. Aqui, vou apenas adicionar um nome de usuário. Vou apenas adicionar minhas análises. Então aqui, clique em Avançar, e aqui temos que adicionar o nome da propriedade. Para o nome da propriedade, adicionarei JB Family Clinic, o nome do site JB Family Clinic, assim Em seguida, Estados Unidos, se você for de um país diferente, basta selecioná-lo, eu selecionarei os Estados Unidos e, portanto, você poderá alterar o estado. Vou apenas manter o padrão ativado e moeda será o dólar americano, clique em Avançar. Aqui podemos selecionar a categoria do setor. Vou pesquisar como saúde. Não, eu tenho que procurá-lo um por um. Vamos ver aqui que temos saúde e, no Google, a categoria saúde tem restrições de carga, então vamos continuar e adicionarei o tamanho da empresa como pequeno, um a dez, e clicarei em s e poderei selecionar os objetivos comerciais. Nesse caso, seleciono visualizar engajamento e a retenção do usuário seleciono entender o tráfego do aplicativo do site e clico em. Crie aqui, clico em Aceitar, clico nesta caixa de seleção e clico em Aceito. OK. Aqui eu tenho que escolher a plataforma na minha web de adivinhação e aqui temos que adicionar o site, Lou, URL, vou apenas adicionar um design de site personalizado EUA e selecione HTTPS. Aqui temos que adicionar o nome do site. Vou adicioná-lo como JB Family Clinic e marcar isso, depois clicar em, criar e continuar Ok, então clique em Avançar. E aqui, clique em Instalar manualmente. Na verdade, podemos usar o plugin Rank Math para instalar isso. Vou reprimir esta página no Analytics, vamos ver no Analytics, vou clicar em reconectar e selecionar o endereço de e-mail, clicar em Continuar, continuar OK. Agora, o console de pesquisa está bom, e aqui temos a conta My Analytics e, na propriedade, temos a propriedade da JB Family Clinic e o datastrem será a JB Aqui, clicarei em Instalar código do Analytics. Eu digo que ative essa opção somente se você não estiver usando nenhum outro plug-in stream para instalar o código do Google Analytics, então eu não estou acostumado e agora, clique em Salvar alterações Agora, o Search Console está sendo exibido em verde e o Analytic Analytics está sendo exibido em verde e está conectado Agora, se eu for ao Analytics e apenas transmitir isso e vamos ver, basta clicar aqui. Vou apenas atualizar. Agora, aqui vou selecionar meu Analytics. ABM. Agora mostra que está conectado. Agora vamos visitar nosso site. Vamos apenas abrir uma nova janela anônima e personalizar o design do site de novas maneiras Aqui visitamos nosso site e vamos ver este, devemos ter usuários ativos como um só, mas ele não está atualizado Vamos esperar por alguns minutos. Ok, agora ele mostra um usuário ativo e é do Sri Lanka, então sou eu OK. Tudo bem. Se você não vê, também diz que pode levar até 24 horas para aparecer na sua conta do Analytics, e não levará muito tempo, e você verá esse tipo de contagem de usuários ativos. Ok, agora configuramos Search Console e o Google Analytics. 156. Usar um analisador de SEO na página: O Rank Math SO tem um recurso interessante chamado SCO Analyzer. Vamos usar esse recurso para analisar o SEO do nosso site. Então, está no Rang Matso & SO Analyzer. Você verá esse tipo de design aqui, basta clicar em Iniciar o SO Analyzer e ele examinará todo o nosso site e fornecerá o resultado atual do SCO Ok, atualmente, seu SCO ISCO é 7.400. Então, se verificarmos aqui, podemos ver os problemas. E a primeira de alta prioridade é a atualização automática. Então, vamos habilitar a atualização automática desse plugin. E agora temos muitos problemas, e vamos corrigir um por um para corrigir o problema do El. Então, aqui temos um aviso. É um título H one. Nenhuma tag H one foi encontrada em sua página inicial. Então, vamos adicionar a tag H um para fazer esse clicon visitar o site a partir daqui, cliconeEdit com elemento ou aqui, se verificarmos esse texto, esse é o texto principal do nosso site e aqui está uma tag HTML Vamos torná-lo H um e clicar em publicar. Então, essa chegada será corrigida. Também em H two headlines, mais de 20 H two tags foram encontradas em sua página inicial Então, vamos manter apenas os subtítulos como H dois e corrigir todos esses Então, para fazer isso, primeiro copiarei este texto e vamos ver se realmente é esse. Então, já o criamos como H one, e aqui dedicamos sua célula familiar, então temos que ir uma por uma. Então, vamos manter esses dois porque essa é uma sublinha e aqui temos 100% como H dois, Ok, aqui está o 100%. Vamos clicar nele e transformá-lo em H três. Portanto, na tag SDM, podemos ter H três, H quatro, H cinco, H seis parágrafo Dpantag e PO Temos que tornar essa estrutura de página HTML amigável para SEO, seguindo as diretrizes de SEO. Isso ajudará a classificar nosso site no Google e vamos clicar aqui. Então vamos fazer H três. Na verdade, acho que adicionamos muito H dois. Vamos fazer com que todos eles sejam H três. Aqui não temos nenhum problema. Aqui, temos muitos H dois, então eu clico em San Li e aqui podemos editar o modelo. Então, vamos editá-lo primeiro. Temos H dois aqui, faça com que seja H três e faça isso em três. Três parágrafos. Ok, agora eu clico em publicar e clico em salvar e voltar. Ok, bom. Agora, se eu rolar até aqui, novamente, temos muitos Ts, faça deles três. E se fizermos isso parcialmente no design, isso será fácil, mas agora temos que fazer isso manualmente. Então, vou fazer isso como um parágrafo. Este deve ser um parágrafo, e este é três, está bem. E aqui, faça disso um parágrafo. Não, aqui, isso deve ser um parágrafo e aqui, isso deve ser H três ou H quatro, três vai ficar bem. Acho que temos que editar esse modelo também, então vamos editá-lo. OK. Agora, primeiro, esse nome deve ser H dois e H três, e isso deve ser HP ou tag de parágrafo, então eu clico em sete banhos e aqui também teremos esse H três e H quatro, C quatro. Agora eu clico em publicar e vamos ver se corrige esses problemas ou não. Agora, aqui, clico em reiniciar o analisador SO. Ok, vira 82 e tente fazer com que esse SoCore seja superior a 80% Então, agora temos que adicionar todas as tags às imagens. Podemos copiar essa tag SRT e colá-la assim e ver o ícone Então, aqui está esse ícone. Então, está no cabeçalho. Clique nele para editar o cabeçalho. Ok, agora clique aqui na tag antiga, basta copiar o título e colocar a tag antiga assim e clicar em publicar. Em seguida, clico em Editar página para editar a página inicial. Ok, agora estou de volta. Então, a maneira mais fácil é acessar o painel e, no painel, podemos encontrar Mídia, clicar em Biblioteca de Mídia. E aqui teremos as imagens. Só precisamos clicar em Editar, e aqui podemos adicionar a tag ALT. Vamos adicioná-lo como um banner social, clicar em atualizar e voltar novamente. Na verdade, é mais fácil quando clicamos no ícone da galeria e as imagens serão mostradas assim, e agora podemos adicionar assim. Assim. Este é o método mais fácil, como este, compromisso do Bickst e o ícone do relógio Então, vou adicionar todos esses ícones e até breve. OK. Agora, se verificarmos novamente, teremos um resultado melhor. Então clique em Rs e iniciamos o analisador S. Ainda temos muitas tags H two, e aqui, temos que editar esse rodapé também. No rodapé, também temos muitas etiquetas H two. Clique em cFoter conserve agora, vamos editar todos eles. Isso deve ser um parágrafo, e aqui, isso deve ser um parágrafo ou podemos adicionar H dois, mas vamos adicionar um parágrafo. Entendo, temos muitos. E aqui, vamos fazer isso como um três. E aqui, vamos fazer isso como três e a seção de direitos autorais será um parágrafo, clique em publicar e agora vamos verificar novamente. Ok, agora é 91, e isso é muito bom. Então, aqui temos a proporção de links, então temos que adicionar mais links externos, mas, por enquanto, não vou adicioná-los e, por enquanto, o 91 está muito melhor do que antes. 157. Velocidade de carregamento da página com o plugin de cache LiteSpeed: Ok, agora temos mais uma etapa, conclua o design completo do nosso site. Ou seja, otimize nosso site e carregue o site mais rapidamente no celular, desktop ou tablet. Então, vamos fazer isso. Em primeiro lugar, se eu for conectar e instalar plug-ins, posso ouvir aqui que temos muitos plug-ins por meio de atualização e aqui temos o cache Light Speed. Vou desativá-lo. E a razão pela qual está aqui, o provedor de hospedagem que eu uso é nome e o chip de nome adicionará automaticamente o estojo Light Speed. Vou excluí-lo e, em seguida, copiarei o URL do site e inserirei o código da página. Vou pesquisar no Google, na velocidade da página do Google, e podemos ver os insights de velocidade da página, basta clicar nela. Portanto, é pagespeed dot web dot Dv, então vou apenas paginar URL do site e clicar em Analisar. OK. No celular, seu desempenho é 64, e isso é melhor. No entanto, podemos fazer isso melhor do que isso e, no desktop, é 89. Então, vamos aumentar a velocidade do nosso site WordPress. Para fazer isso, podemos usar o Light Speed, plugin de cache, então eu clico em adicionar plugin. Em seguida, vou pesquisar o cache do Light Speed. Ok, aqui temos o plugin Light Speed case e atualmente ele não foi testado com nossa versão do WordPress. Portanto, quando instalamos plug-ins não testados, sempre tente obter backups Nas lições anteriores, mostrarei como obter backups. Já temos o backup, então eu clico em Instalar agora. Em seguida, clique em Ativar OK, agora teremos aqui o plugin de cache Lightspeed Então eu clico no painel para ir para Da por enquanto, ficará assim. Então, vamos adicionar a configuração. Primeiro, temos predefinições e, nas predefinições, não precisamos fazer isso porque vamos fazer isso manualmente Porque se usarmos essas predefinições, isso pode danificar nosso site e, se algo quebrar nosso site , não conseguiremos identificar qual parte está quebrando nosso site Portanto, se você estiver confortável, basta clicar nas predefinições do aplicativo e seguir em frente Mas no nosso caso, vamos um por um. Primeiro, vamos ao geral em geral, basta clicar em habilitar o IC Cloudserve e você verá esse tipo de janela Então aqui você tem que se registrar. Então, vou me registrar no Google. Clique em Eu concordo e clique em Google. Continuar. E aqui , basta clicar em Concluir conjunto de links e na configuração geral, o modo de adivinhação e a otimização de convidados será desativada. E aqui, clique em verificar meu IP público e copie esse IP. Ok, aqui temos o IP. Eu apenas copio e colo aqui no IP do servidor, e eu farei a notificação. Em seguida, clique em Salvar alterações. E toda vez que você fizer edições usando o cache do Light Speed, basta clicar neste poleiro Earl e abrir seu site na janela anônima e verificar se tudo E quando fazemos isso, podemos entender se ele quebra ou se funciona bem. OK. Em seguida, temos a guia de cache. Clique nele. No cache, vou desmarcar esse cache de usuários conectados e marcar o cache móvel, então outras coisas serão padrão e clicarei em salvar alterações e verificar o site na salvar alterações e verificar janela do Incognitor Em seguida, em TTL, mantenha a configuração padrão. Na página, você pode manter a configuração padrão e, em seguida, temos as exclusões nas exclusões Se você quiser ter uma página ou postagem que não queira usar o cache, basta adicionar o caminho da página nesse formato. Portanto, não temos esse tipo de problema. Então, vamos para o SIO ESI, mantenha a configuração padrão e, em seguida, temos objeto sobre objeto, mantenha a configuração padrão Em seguida, no navegador, ative o cache do navegador e clique em Salvar alterações. Então, com antecedência, mantenha o adiantamento conforme devolvido. No entanto, se você tiver um grande armazenamento, um servidor enorme e um servidor dedicado, poderá usar esse clique instantâneo, que significa que quando o visitante passa o mouse sobre um link de página ou link de postagem, esse conteúdo será pré-carregado antes que o usuário visite essa página Isso exigirá muita energia do servidor. Portanto, sempre use esse clique instantâneo apenas se você tiver essa potência de servidor. Portanto, se você ativar isso e não tiver muita energia no servidor, isso afetará a velocidade do seu site, e seu site não acelerará devido à sobrecarga do servidor Então temos CDN. Clique nele. Então, se você quiser que o CDN tenha essa nuvem de pontos específicos, você pode habilitá-la aqui, mas eu não vou usá-la Portanto, se você tiver Cloudfare configurado com seu site, poderá ativá-lo Vou configurar o Cloudfare em aulas futuras, mas, por enquanto, vou mantê-lo assim Agora temos a otimização de imagens. Clique nele e, aqui, podemos clicar em Enviar solicitação de otimização e o plug-in otimizará automaticamente nossas imagens. Talvez tenhamos que fazer isso 45 vezes. Então, agora dizemos que você tem imagens esperando para serem enganadas Aguarde até que o erro automático concluído ou preencha-as manualmente Então, por enquanto, vamos esperar e deixar que as imagens sejam otimizadas. Então, na próxima vez que você fizer login em seu site, verifique o status de suas imagens e, se não for 100, não foi otimizado, basta clicar em enviar solicitação de otimização e, com o tempo, ela completará 100. Ok, agora temos a otimização da página. Antes de fazer a otimização da página, como eu disse antes, faça um backup, faça a otimização e verifique o site indicado. Então, na otimização da página, clicarei em CSS Minifi e em CSS combine e , a partir disso, gerarei Css, depois vejo em linha, então CSS combinado externo e interno será então carregado CSS forma síncrona e CCSS para URL estará ativado, CSS embutido estará ativado e a otimização de exibição de fontes será ativado e a otimização de exibição de fontes Clique em Salvar alterações e , em seguida, clique em Limpar ERL vá para a janela anônima e verifique se o RL funciona bem Então, o site está funcionando no meu caso. OK. Às vezes, isso pode quebrar o site. Então, se isso acontecer, basta retirar esses itens um por um e ver qual é o problema. E quando você encontrar o problema, basta desligá-lo. Então temos a configuração JS. Nas configurações de JS, o JS minify estará em JS combinado, estará em JS combinado externo e em linha estará ativado Em seguida, se o driver JS for oficial, altere e limpe, vá para a Incognitor Ok, funciona bem. Em seguida, temos a configuração SDM na configuração SDM, diminuímos o DML no DNS, controle gratuito da página será ativado e removeremos o WordPress . O Imog estará ativado e removeremos o WordPress Em seguida, clique em Salvar alterações e teste novamente. Então, na configuração de mídia, se você quiser adicionar lazy loadimage, basta ativá-la, mas eu faço isso e aqui basta adicionar a solda ResponsPlace, o que significa que se a imagem demorar para carregar, que significa que se a imagem demorar para carregar, ela mostrará um espaço reservado e podemos Vou apenas manter a cor padrão e criar esse gerador de nuvem LQIP e o quadro Lazy Load I estará ativado. Os tamanhos do Admion estarão E aqui, a qualidade da imagem será 82, e aqui vou eu também sobre o carregamento lento de imagens, às vezes isso pode quebrar o site, clique em Salvar alterações e clique em poleiro, agora teste aqui e eu funciono bem, vamos para a próxima etapa Vou manter o VPI desligado e imagem do ponto de vista Crone também estará desligada e Se você quiser que algumas imagens não adicionem efeito de carregamento lento ou se quiser que priorizem o processo de carregamento, você pode adicionar o URL aqui, mas, neste caso, não vou adicionar nada Então, agora temos a localização, fazemos com que o Gavita case vata cache C esteja ativado e mantemos outras coisas padrão, depois temos o ajuste, clicamos em conceber alterações e, em seguida, mantemos o ajuste como padrão e não vamos fazer nenhuma Agora temos banco de dados. No banco de dados, há revisões e outras listas que não estamos mais usando, basta verificar uma por uma, e se você acha que há coisas que não precisa, basta clicar em limpar ou clicar uma a uma Nesse caso, se eu quiser limpar isso, basta clicar nele e ele removerá todos eles. Portanto, se você não precisar de um autógrafo, basta clicar nele e limpar o banco de dados Então temos o CroLero Croler. Eu não vou fazer nada mudar Vou defini-lo como padrão, então temos a caixa de ferramentas e não vou usar nenhuma opção no oh Agora, se eu visitar o painel, teremos esse tipo de janela e aqui eu posso clicar em Reps e verificar o disco de velocidade da página neste plugin e podemos ver o carregamento da página a tempo Vamos clicar em reprimir para verificar o tempo de carregamento da página antes de 3,76 segundos e agora 1,22 segundos Agora, o que podemos fazer é copiar a URL do site, acessar a velocidade interna da página, passar a URL e ver o resultado. Agora, você viu o desempenho aumentar até 82% e no desktop, é 79, e aqui temos problemas, mas isso é melhor do que nós? No entanto, mas isso é melhor do na otimização de imagens, não me lembrei de convertermos a imagem normal em web P, vamos ver, vá para a otimização de imagem e otimização vá para a otimização de imagem e otimização de imagem configurada aqui, temos que fazer isso aqui e crie o formato de imagem da próxima geração como web P. Em seguida, desative a preservação dos dados EXI XMP da imagem otimizada Agora clique em Salvar alterações e vá para o painel, clique em Enviar otimização. Solicite, clique em solicitação automática tron e vamos ativá-la, para que as imagens sejam otimizadas automaticamente. Ok, agora vamos ver novamente o texto de você e ver se alguma coisa muda. Ok, agora se tornou 90, então agora está melhor do que antes. Ok, então, depois de otimizar seu site, e se você fizer alterações ou criar novas páginas, atualizar páginas atuais ou alterar imagens, sempre use as melhores práticas, como adicionar uma nova imagem, colocá-la no site tinyng.com e transmitir o tamanho do arquivo por rádio e fazer coisas assim E aqui temos uma aba COSCO. Não precisamos disso porque mais recursos disponíveis apenas para P, então eu clico aqui para fechar e clico em. OK. Agora podemos ver o site assim. OK. 158. Melhor largura de conteúdo para o Elementor Pro: Olá, pessoal. Agora estou no nosso design Figma E aqui, o design Figma com esses 1.440. E em todo o design do site, também adicionamos 1.440 e, no design do site, ele se torna maior Mas se formos para as configurações do site e aqui vamos para layout sobre layout, digamos que seja conteúdo padrão com este 1140 Vamos remover esse padrão que será adicionado aqui ou podemos simplesmente adicioná-lo assim. Em seguida, vamos fazer com que o preenchimento direito seja 30 e o preenchimento esquerdo também seja Em seguida, clique em conceber alterações e, para sua referência, eu apenas uso o layout 1440 como conteúdo para criar todo o site, mas percebo que isso não é bom para a capacidade de resposta do site Portanto, não adicione 1.440 , basta adicionar 1.140 e continuar as aulas É isso que eu quero que você siga sempre no valor padrão. E se você tiver alguma dúvida, é só me avisar. 159. Otimização de velocidade e regras de hospedagem cruciais: Nesta lição, abordaremos uma das maiores reclamações que as pessoas têm sobre o WordPress e o Elementor O carregamento lento é derramado. Agora, vamos descartar um grande mito logo de cara. A maioria dos sites do Elementor não é lenta por causa do próprio Elementor Eles são lentos por causa da forma como as pessoas os constroem. Muitos plug-ins, arquivo de design não otimizado, animação pesada e hospedagem de baixa qualidade Ao final desta lição, você saberá o sistema passo a passo exato para transformar qualquer Elementor inchado e lento em nove máquinas rápidas de conversão de colmeias Vamos começar a otimizar. Aqui está o nosso design Figma e acho que quero adicionar essa imagem Para adicioná-la, posso selecionar a imagem e exportá-la assim. Nossa imagem foi exportada. E o que a maioria dos iniciantes e criadores de sites DIY fazem é enviar diretamente essa imagem para o Este é o assassino número um do campo do site. Você precisa otimizar as imagens antes de usá-las. Então, aqui está exatamente o fluxo de trabalho de imagem profissional que você precisa seguir. Primeiro, podemos executá-lo por meio uma ferramenta de compressão gratuita, como o Tiny PNG. Estou no pequeno PNG. Vou apenas sinalizar e amarrar aquela imagem assim. Você viu? O tamanho original da imagem era de 557 kilobytes. Mas nossa versão otimizada tem apenas 87 kilobytes, e se fizermos o download e verificarmos a qualidade, aqui está a otimizada, e também vamos pegar a imagem não otimizada, e vamos lá Você pode ver que temos a mesma qualidade da nossa imagem. O segundo problema que a maioria dos iniciantes faz é simplesmente fazer upload de imagens sem observar as dimensões do layout. Se seu contêiner apenas 200 correções, não faça upload de uma imagem branca de 4.000 pixels Mantenha suas imagens de desktop padrão escala máxima de 1200 a 1600 pixels O que a maioria dos iniciantes faz é baixar a imagem aqui e usá-la diretamente. Mas se você verificar o tamanho do arquivo e as dimensões dessa imagem, ela é muito alta. O que você precisa fazer é mudar as dimensões. A próxima coisa que devemos considerar é converter nossas imagens para o formato webb, mas não precisamos converter nosso recurso um por um Podemos usar um plugin sem palavras para fazer isso. Então, o que podemos fazer é carregar nossa imagem padrão, como JPG ou PNG, e instalar um otimizador de imagem confiável Então, vamos ao plugin e clique em At plugin. E aqui, vamos pesquisar o plug-in chamado otimizador de imagem Ewww e esse plug-in converterá automaticamente nossas imagens em Vou instalar isso. Além disso, você pode usar um plugin como conversor para mídia. Nesse caso, vou usar esse plugin. Depois de instalá-lo, vou me instalar, e aqui podemos acompanhar isso. Aqui, digamos que acelere nosso site e eu continuarei gratuitamente aqui, desmarcarei a verificação de remoção de metadados e o carregamento lento e verificarei desmarcarei a verificação de remoção de metadados e o carregamento lento e verificarei as conversões da web P e, em seguida, nossos arquivos serão automaticamente convertidos para a web P. Também por aqui, adicionarei 1920 e também Max Então, o que aconteceu aqui é que se alguém ou seu cliente fizer upload de uma imagem como 4.000 imagens fixas, ela será reduzida para esse tamanho por meio desse plug-in e o backup da imagem será local, e então você poderá clicar em salvar configuração Tudo bem, você terminou. A seguir, vamos falar sobre o armazenamento em cache. Em vez de focar o WordPress em criar suas páginas completamente do zero toda vez que um visitante clica em um link, o servidor tira uma foto estática da sua página e mostra a versão salva instantaneamente O tempo de carregamento deste rádio é significativo. Se você estiver hospedando a infraestrutura Safa acid, eu recomendo usar o plugin gratuito de cache de velocidade da luz Se você estiver em um servidor Apache ou Engineer padrão, plug-ins premium como o WV Rocket Para iniciantes, você não precisa complicar demais isso ou ativar todas as caixas de Basta ativar o básico básico, páginas e o cache do navegador Basta ativar essas duas configurações adicionais para fazer com que seu site Elementor pareça instantâneo Agora vamos falar sobre algo que a maioria das pessoas ignora completamente. Plugin em negrito. Cada plug-in que você ativa adiciona um script extra e o estiliza ao cabeçalho da página. Código significa mais solicitação de DTV, que armazena diretamente sua carga a tempo Aqui está uma regra de ouro estrita para seu projeto de web design. Se você não estiver usando ativamente um plug-in, exclua-o completamente. Ainda mais importante, se Elementor já puder fazer isso negativamente, não instale um plug-in separado para ele Não sobrecarregue seu site com alguns fatos avançados de terceiros sobre o Elementor apenas para usar um único Mantenha sua configuração mínima. Um back-end limpo sempre significa diversão rápida, vamos dar uma olhada no Elementor do próprio editor Aqui, alguns parecem incríveis, mas são incrivelmente pesados na renderização do navegador Estou falando sobre enormes controles deslizantes de página inicial. Eu mantenho controles deslizantes cier, e aqui temos pilotos de carrossel que, fornecidos pelo plugin avançado premium, serão mais pesados no site Além disso, vídeos em segundo plano e muitas animações de rastreamento afetarão gravemente a velocidade de carregamento do seu site Lembre-se sempre de que fundos de vídeo pesados envolvem completamente os usuários móveis em conexões mais lentas Em vez disso, opte por opções inteligentes de design de alto desempenho. Troque esse controle deslizante pesado por uma seção ousada de heróis estáticos Substitua o complexo efeito de movimento exaltador pelos estados de foco limpos do CSS nativo Lembre-se de que você projeta para parecer. Mas é absolutamente necessário carregar rapidamente ou manter os usuários na página. Isso nos leva aos principais frascos da web. A matriz de desempenho real que o Google usou para classificar seu site, não se preocupe. Não vamos ficar atolados em jargões técnicos profundos Você só precisa rastrear três coisas principais. O primeiro é o LCP ou tinta completa de maior conteúdo. Isso simplesmente mede a rapidez seu aparelho principal acima da falha contém cargas de creme. O segundo é CLS ou mudança cumulativa de camada. Isso rastreia a estabilidade visual. Você quer ter certeza de que seus elementos de layout não estão pulando violentamente enquanto a página é E o terceiro é INP ou interação com a próxima pintura. Isso mede a capacidade de resposta. que rapidez o site reage quando você usa um menu de clique ou um Aqui está seu atalho. Se você seguir as etapas que estamos abordando agora, otimizando suas imagens, eliminando plug-ins desnecessários e criando layouts limpos, você verá automaticamente todas as três matrizes sem pensar demais Agora, vamos ser totalmente reais. Você pode ter o Elementor mais otimizado, bonito e limpo do mundo. Mas se você hospedá-lo na principal hospedagem compartilhada de nível baixo, ele ainda carregará como uma tartaruga lenta Se você leva a sério a criação profissional de sites para seus clientes, precisa de uma infraestrutura decente Procure ambientes de hospedagem baseados em servidores de baixa velocidade. Além disso, eles devem ter registros sólidos de disponibilidade e localizações de data centers próximas ao seu público-alvo real Para ajudar seu servidor, o WordPress e o Elementor usam recursos chamados de carregamento lento por padrão Isso garante que as imagens mais abaixo na página carreguem apenas a fração exata de segundo. O usuário rola até elas. Mantendo o lançamento da página inicial incrivelmente rápido. Apenas certifique-se de deixar esse recurso ativo. Vamos analisar o impacto no mundo real. Antes da otimização, os sites geralmente se arrastam devido à enorme quantidade de anúncios na mídia e à confusão de scripts Mas depois de aplicar essa lista de verificação, tempo de carregamento foi reduzido pela metade experiência do usuário fica completamente tranquila e suas taxas de conversão aumentam. A otimização da velocidade consiste em buscar uma única mágica. Trata-se de combinar um pequeno hábito intencional, ativos de mídia limpos, uso mínimo de plug-ins, regras sólidas de cache e design de layout de alto desempenho Se você implementar pelo menos metade da estratégia que traçamos hoje, os sites de seus clientes se sentirão significativamente mais rápidos Ok, é isso mesmo. Siga essas etapas para obter o melhor resultado. 160. Projeto do curso: Parabéns. Você chegou ao final da aula de design de interface de usuário do site personalizado. Você aprendeu muito ao entender a estrutura do site para criar um design exclusivo que se destaque. Antes de você ir, temos um desafio empolgante para você. Seu projeto de classe. Seu projeto é criar um site personalizado, design de interface de usuário para um restaurante. Aplique tudo o que você aprendeu nesta aula. Não se preocupe Vou guiá-lo pelas etapas mais uma vez. Nesta seção de recursos do projeto de classe, você encontrará aqui uma pergunta do proprietário do restaurante. Copie e cole em seu projeto Figma e use as informações para orientar seu design Escolha cores e fontes que combinem com os restaurantes crie um logotipo simples , mas profissional. Marca. Ideias de design de cores e inspiração que se encaixam no seu conceito. Isso ajudará você a criar uma direção clara para seu design. Use as instruções de inteligência artificial que você aprende nesta aula para gerar conteúdo para o site Deixe seu design criativo projetar a interface do usuário do site seção por seção. Quando seu design estiver pronto, faça o upload para a seção de projetos desta classe. Essa é sua chance de mostrar suas habilidades e receber feedback de outras pessoas. Estou muito orgulhosa do processo que você fez. conclusão deste projeto aumentará sua confiança e adicionará taxas valiosas ao seu portfólio. Se você se sentir preso, revise as aulas ou coloque uma pergunta na seção de discussão Estou aqui para ajudar. Obrigado por aprender comigo. Mal posso esperar para ver seu design incrível. Agora vá em frente e libere sua criatividade. Vamos tornar o mundo mais bonito. Um site por vez.