COMO CRIAR UM SITE COMPLETO COM INTELIGÊNCIA ARTIFICIAL | Passo a Passo - 2024

fala pessoal aqui quem fala é a Bia da escola de sites e nesse vídeo nós vamos criar um site MEGA profissional do absoluto zero e ainda por cima vamos ver também como utilizar o chat GPT para criar todo o conteúdo da nossa página facilitar o nosso trabalho nesse processo né para você que tá curioso saca só nesse resultado final bonitão do site que a gente vai deixar no ar ainda nesse vídeo esse tutorial é perfeito para você que por exemplo quer construir um site pra sua própria empresa e também é perfeito para você que é

web designer e quer construir um site para o seu cliente ou então quem sabe para dar um up no seu portfólio aqui nós vamos usar apenas ferramentas bem práticas rápidas e visuais para construir o nosso site Como por exemplo o WordPress o elementor e também uma ajudinha aí da inteligência artificial para facilitar o nosso trabalho que é sempre bom né E com isso nós não vamos precisar utilizar nada nada nada de programação então pode ficar tranquilo quanto a isso além disso esse projeto que nós vamos criar aqui hoje juntos é 100% adaptável para qualquer nicho

que você quiser aí apenas trocando os conteúdos as cores as imagens de uma forma 100% visual viu é bem simples e você vai ver na prática aqui nesse vídeo também E para isso esse tutorial será dividido em três etapas para ficar tudo bem prático e didático de você acompanhar por aí então vai anotando a nossa primeira etapa será a de contratação do domínio hospedagem a segunda é a das configurações iniciais onde nós vamos preparar todo o terreno pro nosso site e a terceira que na minha opinião é a mais divertida é a da criação do

layout da nossa página lá dentro do elemento com a ajuda é claro do chat GPT para criar os conteúdos que a gente vai precisar para isso então sem mais delongas bora logo para essa primeira etapa nela nós vamos falar sobre dois conceitos que são indispensáveis para quem pensa em criar um site profissional o domínio e a hospedagem bqu de acha isso de domínio e hospedagem calma tá se você nunca escutou esses termos na vida pode ficar tranquilo que eu vou dar um breve resuminho aqui para você entender sobre o que que se trata Beleza o

domínio é basicamente o nome do seu site Por exemplo quando a gente fala www.escoladesaude.pr.gov.br encontrar o seu site na internet beleza P acho que domínio consegui entender mas e esse negócio de hospedagem aí para que que isso serve a hospedagem ela vai servir como o servidor do seu site não resolveu muita coisa Bia como assim servidor o que que isso significa significa que a hospedagem é um serviço que vai armazenar todos os arquivos do seu site Seja imagens códigos o que precisar e disponibilizar esses arquivos para o navegador das pessoas é a hospedagem que deixa

o seu site funcionando no ar bonitinho ali para todo mundo e ela atua como se fosse por exemplo uma operadora de telefone se a gente pensar no caso do nosso celular aqui por exemplo não tem como a gente por exemplo ter um número fazer receber chamadas e tudo mais dentro dele sem aderir a uma Bendita de uma operadora antes certo pois então com a hospedagem funciona do mesmo jeito e tem mais hein assim como existem operadoras ruins que só dão dor de cabeça na nossa vida eu tenho certeza que todo mundo que tá assistindo esse

vídeo aqui já já passou por alguma dor de cabeça lá com a Bendita da judit em alguma operadora né todo mundo passa por isso E o pior é que com a hospedagem se você não tiver um cuidado na hora de contratar um serviço também pode ser do mesmo jeito então sim gente isso é um fato além de precisar de uma hospedagem é super importante que você verifique se a empresa que presta esse serviço para você é de referência o que falam dela aí no mercado e que você escolha também um plano dentro dela com todos

os recursos que você Você vai precisar para deixar o seu site funcionando bonitinho e com qualidade pras pessoas e para garantir o domínio e hospedagem pro seu site você terá duas alternativas aqui nesse vídeo e eu já adianto que a segunda alternativa é a melhor hein eu já te explico porquê Bora lá a primeira alternativa é a de seguir aqui junto comigo onde eu vou fazer todo esse processo da contratação e configuração do domínio hospedagem junto com vocês mostrando todo o passo a passo para isso e a segunda alternativa que é a que eu recomendo

bem mais é a de clicar no link que vai estar aqui na descrição desse vídeo e fazer uma contratação guiada com um dos especialistas da nossa equipe Quando você clicar nesse link você vai cair numa pagin dessa aqui ó e é só clicar em Quero contratar a minha hospedagem que você vai ser direcionado para um atendimento com um especialista para agendar essa sua contratação guiada aí tá nessa contratação você vai ter alguém da escola de sites mesmo fazendo todo esse processo junto com você para garantir que fique tudo 100% sem nenhuma dor de cabeça mesa

ou seja com essa opção você vai basicamente ganhar uma consultoria de graça para fazer todo esse processo da forma mais tranquila possível e o pior é que não acaba por aí ainda tem mais no final da contratação vem um presentão também gente você vai ganhar de bônus por nossa conta uma licença original do elementor pro e para você que não tá ligado no quanto que esse presentão aí tá valendo hoje essa licença por fora tá custando aí na faixa de 9 para comprar de forma Av o que vamos combinar né gente é uma baita facadinha

Principalmente quando a gente converte o dólar para real mas com essa contratação guiada você vai ganhar isso completamente 0800 sem ter que pagar um centavo a mais por isso só que olha só reforçando para deixar bem claro tá esse super bônus da licença de graça só vale para quem fizer a contratação ao vivo ali com a nossa equipe na contratação guiada Beleza se você decidir Por algum motivo não optar pela contratação guiada essa licença vai ter que ficar por sua conta OK inclusive nesse projeto que a gente vai desenvolver aqui hoje a gente vai precisar

da licença do elemento pro então se eu fosse você eu já Não perdia tempo já clicava aí agora no link de resgate aqui embaixo para fazer essa contratação guiada e ganhar esse Super Bônus Deão aí que com certeza vai valer para caramba a pena só que de qualquer maneira como eu falei eu vou mostrar aqui nesse passo a passo da contratação também se por algum motivo você preferir esse caminho aqui pra gente terminar isso logo então bora lá bom a hospedagem que nós vamos utilizar para esse tutorial aqui é uma das hospedagens da rosinger que

sim gente a rosinger pela minha própria experiência pela pela experiência de todos ess especialistas aqui da escola de sites também tem sido a hospedagem que mais tem valido a pena tanto na questão de custo benefício como também na questão de atendimento eles são super solícitos no suporte é um painel super simplificado também de mexer de bem fácil configuração mesmo para quem nunca mexeu com isso antes na vida então assim por diversos motivos Essa tem sido a hospedagem que a a gente considera de melhor escolha no mercado hoje em dia principalmente pela questão de custo benefício

mesmo tá gente se a gente abaixa aqui ó um pouquinho na página a gente pode ver que tem várias opções de planos isso aqui são só os principais tá se você der uma explorada aqui também nessa aba de hospedagens você vai encontrar mais opções inclusive Se você tiver muito na dúvida de tipo ah eu tô vendo que esse plano aqui tem esse recurso esse aqui tem outro e não sei qu não sei o qu não sei o quê mais um reforço para você optar pela contratação guiada porque aí o especialista vai conseguir te indicar exatamente

aquilo que você precisa de acordo com o projeto que você tá construindo aí tá mas de qualquer maneira aqui ó só pra gente continuar e a gente pode ver esses principais planos aqui e por um investimento bem baixo aqui mensal você consegue ter acesso a recursos suficientes para você conseguir deixar o seu site no ar tranquilamente funcionando com qualidade com velocidade e com e com tudo que você precisa tá gente inclusive ó os que eu mais recomendo para esse projeto que a gente vai estar desenvolvendo aqui agora é inclusive esse esse Premium aqui ou então

esse Business o business ele é o plano mais popular porque em questão de custo benefício assim tipo em comparativo de recursos que tem de um pro outro né e a quantidade do do valor que aumenta esse aqui Vale bastante a pena mas de qualquer maneira eu vou optar por essa opção aqui do Premium para vocês para vocês verem que mesmo nesse plano um pouco mais básico aqui já é o suficiente pra gente ter um bom desempenho e uma eh uma boa quantidade de recursos pro nosso site também tá só pra gente dar uma olhadinha aqui

rápido você pode ver que por exemplo nessa hospedagem aqui é você pode comportar até 100 sites é claro né gente que isso aqui a gente tem que considerar de uma forma bem lúdica tá porque eles colocam aqui sem sites só pra gente saber do tipo ah e eu não vou colocar 100 sites na minha hospedagem eu não vou colocar por exemplo meu projeto de todos os meus clientes aqui dentro não tá o o princípio disso aqui é para que a gente entenda que dentro dessa hospedagem cabe por exemplo mais de um site se eu quiser

colocar um dois ou três projetos ali mas mais que isso pode ser que Pese o se a o seu seu servidor aqui e não funcione muito bem tá mas olha só você tem 100 GB de armazenamento SSD esse SSD aqui já indica que é um desempenho maior que você vai ter pro seu site também você vai ter o recurso aqui de backups semanais paraa segurança das suas páginas SSL limitado Bia que que é esse de de SSL isso aqui é o que deixa aquele cadeadinho ativo aqui do lado do seu navegador e que diz pro

Google que esse site seu aqui é seguro PR as pessoas já pensou os seus clientes entrarem no site já aparecer assim ó Esse site não é seguro você acha que ele vai confiar no seu serviço isso aqui é extremamente importante tem várias hospedagens que cobram isso a parte na hosing você já tem isso aqui dentro também e uma coisa muito legal inclusive é que lembra que eu falei que a gente precisava de uma hospedagem um domínio pois Então dependendo do plano que você pega aqui dentro você já vai ter acesso também aqui ó a um

domínio grátis que se você fosse comprar por fora você teria um custo médio aí de mais ou menos uns R 40$ 50 aí também para costear esse domínio beleza aqui que optando por essa hospedagem que a gente vai contratar aqui agora você já ganha isso de forma gratuita eu não vou entrar aqui em detalhes sobre todos os recursos inclusive esse comparativo também mas eu sugiro que você dê uma pausad Dinha nesse vídeo aqui coloque o mouse aqui em cima dessas interrogações para ver melhor também sobre essas opções entender sobre o que que cada uma delas

significa E é claro né reforçando se você tiver essa possibilidade dá uma conversada com o especialista lá da contratação guiada que ele vai te indicar o melhor caminho aí de acordo com o seu caso ok então eu vou clicar aqui para adicionar ao carrinho nessa primeira opção aqui do Premium vamos lá e aí perceba que de cara ele já me aparece aqui alguns planos determinados pelo período de renovação dessa hospedagem sim assim como na operadora que a gente tem um plano lá que a gente paga mensalmente a hospedagem ela meio que funciona da mesma forma

tá você pode por exemplo optar pelo pagamento recorrente aqui mensal o que eu não recomendo Porque nessa opção aqui você não ganha o domínio grátis E além disso também a mensalidade sai bem mais cara ou então você pode optar por um plano aqui de 12 meses 24 meses ou 48 meses quanto mais você conseguir estender esse prazo de renovação é melhor porque após a renovação o preço da sua hospedagem aumenta um pouco tá inclusive ele já coloca aqui embaixo ó renovação do plano por por exemplo R 34,99 por mês ou seja a mensalidade aumenta depois

tá então se você colocar aqui por exemplo 48 meses você vai pagar um proporcional mensal muito menor por bem mais tempo sem ter que se preocupar com isso depois também mas aqui a partir dos 12 meses Você já ganha esse domínio grátis Já E aí eu sei que você pode pensar táia tem aqui 12 meses mas aí no caso então a gente já paga o ano todo de uma vez né sim e não você tem essa opção mas de qualquer maneira também mesmo no plano anual você pode dividir em até 12 vezes no cartão de

crédito vai rolar um pequenos juros ali do cartão mas ainda sim nem se compara a diferença né de valor com que você pagaria na recorrência mensal ainda fica muito maior maior se eu não me engano aqui acho que mais do que o dobro do valor mesmo com o juros do cartão tá então eu recomendo que você opte pelo menos por esse aqui e considere aí suas opções beleza nessa segunda etapa aqui é a parte onde você vai criar sua conta aqui na hoser você pode tanto colocar o e-mail e uma senha aqui ou então fazer

um login social pelo Google ou Facebook eu vou fazer o meu login aqui pelo Google rapidinho você pausa aí e faz o seu login também e a gente se vê aqui rapidinho nessa parte do pagamento Beleza já volto Prontinho fiz meu login aqui do Google em um segundinho já apareceu meu nome aqui em cima já sumiu aquela parte ali do login e agora nós temos aqui essa parte do pagamento em si E aí gente uma coisa que é massa é que aqui na parte do pagamento da hosting a gente tem várias opções cartão de crédito

pix boleto PayPal até moeda digital que eu confesso que eu nunca testei mas assim dessas formas de pagamento as que eu mais recomendo são cartão de crédito e PX justamente porque o pagamento é imediato ou então praticamente imediato E aí dessa forma você já consegue seguir seu tutorial aqui tranquilo na manha no mesmo momento nas outras opções aqui você pode ter que esperar ali de 24 a 72 horas até compensar esse seu pagamento e aí você vai ter que pausar e esperar isso acontecer primeiro beleza mas aí aqui ó eu vou eu vou optar por

essa opção aqui do pix Ok E aí de quebra eu ainda vou fornecer um descontinho extra para vocês porque desconto É sempre bom né gente então ó se você digitar aqui nessa parte do cupom a escola de sites isso funciona para qualquer tipo de pagamento que você optar tá e clicar aqui em aplicar você vai ganhar aqui um descontinho no valor final O que é sempre bom né gente então acho que só esse desconto já vale o like aí nesse vídeo já clica aqui embaixo beleza mas assim e você vai seguir o pagamento aqui da

forma que você preferir tá se for cartão de crédito você vai ser levado para uma nova página onde você vai preencher os dados financeiros do seu cartão fixo do mesmo jeito boleto também é só seguir o passo a passo aqui direitinho do pagamento assim como qualquer transação na internet e aí aqui ó eu vou clicar agora para enviar pagamento seguro antes disso eu vou selecionar aqui os termos de aceito vou clicar aqui para enviar esse pagamento e aí agora ele vai me pedir aqui o CPF ou CNPJ para cadastrar pagamento aqui tá então só vou

preencher aqui rapidinho vou clicar para continuar com pix via qrcode E aí eu já volto na próxima tela Prontinho gente já estou aqui na telinha do pix agora é só copiar o código aqui levar lá no meu aplicativo pagar aqui rapidinho e assim que a Hoster me enviar o e-mail falando olha recebemos o seu pagamento eu vou continuar aqui paraa próxima tela pra gente começar o passo a passo de configuração da nossa hospedagem Beleza então vou fazer esse pagamento aqui e eu já volto com vocês prontinho já efetuei aqui o pagamento e eu até contei

foi menos de 2 minutos para poder compensar aqui já recebi o e-mail e agora que eu recebi esse e-mail eu vou tentar clicar aqui para continuar Às vezes acontece um errinho assim como aconteceu agora ó tá vendo mas não tem problema tá gente sem desespero é só a gente voltar aqui na página inicial da hostinger clicar aqui para entrar novamente e entrar com a sua conta né que você logou aqui vou entrar aqui rapidão e aí e assim que eu logo aqui com a minha conta eu já caio no passo a passo Inicial já que

agora esse pagamento foi compensado beleza Esse passo a passo é bem tranquilo eu vou fazer aqui com vocês mas com certeza até se você tivesse fazendo daí também ia ser um processo bem intuitivo tá ele mesmo vai indicando aquilo que a gente precisa fazer vou clicar aqui para começar agora e aí ele tá perguntando se a gente quer criar um novo site ou migrar um site já existente eu vou clicar aqui para criar um novo site Acabei de perceber que eu tava olhando pro lado aqui ó buguei completamente vou começar a olhar para cá que

aqui que vocês estão ele tá pedindo aqui pra gente selecionar uma plataforma né se a gente quer o WordPress ou se a gente vai utilizar o criador de sites da rosinger aqui a gente ensina a criar sites com WordPress justamente porque tem bem mais opções do que praticamente qualquer outro criador de sites que você for ver por aí tá então para isso eu vou clicar aqui em WordPress E aí nessa etapa aqui ele vai pedir pra gente criar umas credenciais pra gente conseguir fazer o nosso login no painel do WordPress tá isso aqui é muito

importante inclusive já abre aí um bloquinho de notas alguma coisa assim e anota direitinho tanto o usuário como a senha que você vai cadastrar para esse login porque você vai precisar disso depois tá inclusive em outros momentos em outros dias também então anota isso aqui direitinho para você não perder aqui você vai colocar um e-mail pro administrador que vai acessar esse painel do WordPress e aqui embaixo você vai cadastrar uma senha também levando em consideração todas essas recomendações aqui deles tá essas recomendações forçadas Então vou colocar uma senha aqui rapidão vou clicar em ar e

eu vejo vocês na próxima tela Então vamos ver aqui agora ele já dá algumas recomendações de plugins pra gente colocar lá dentro do WordPress mas no caso aqui eu vou desmarcar todos porque eu vou fazer esse processo junto com vocês tá a princípio eu não vou utilizar nenhum desses aqui não vamos clicar para continuar ele também já dá algumas sugestões de tema eu vou pular aqui porque eu vou mostrar exatamente o tema que a gente vai utilizar quando a gente estiver lá dentro do painel do press mesmo vamos clicar aqui para pular e essa parte

aqui é bem importante tá lembra que a gente assinou a opção lá com o domínio gratuito Pois então é aqui que a gente vai resgatar esse domínio tá você tem a opção de resgatar esse seu domínio grátis que você acabou de comprar de que você acabou de ganhar Aliás você tem a opção de comprar um domínio por aqui mesmo pela hostinger ou então usar um domínio já existente caso por exemplo você tenha comprado um domínio lá no registro br ou em qualquer outro provedor E aí você seleciona a opção e traz esse domínio para cá

paraa hostinger tá mas aí no caso eu vou clicar nessa aqui porque a gente vai resgatar o que a gente ganhou né a gente não é besta então vamos clicar aqui para selecionar E aí perceba que agora nós temos dois Campos aqui né um de preenchimento que é onde você vai colocar o nome do seu site e aqui do lado também nós temos as opções de extensão do domínio tem um monte de extensões aqui pon com pnet enfim pon host pinfo com.br também aqui embaixo né E aí as que eu mais recomendo logicamente são o

pon com e o p com.br que são as mais utilizadas por aqui tá principalmente o.com.br se a sua audiência for brasileiro que prov obviamente é porque os sites com extensão pcom.br tem melhores chances de serem indexados Pra audiência daqui do Brasil tá você opta ali pelo pon com quando por exemplo você não tem a disponibilidade de um domino.com.br ou por algum motivo específico se a sua audiência for de fora também aí não tem problema nenhum beleza mas eu vou selecionar aqui o pcom.br mesmo que é o mais comum para cá E aí aqui ó nós

vamos tentar colocar um nome de um domínio pro nosso site tá lembrando que domínio é como se fosse um CPF ali tá ele é único pro site ou seja se você cadastrar um domínio aqui outras pessoas não vão poder utilizar esse mesmo nome e pode ser que você coloque nomes aqui que já não tenha mais essa disponibilidade por exemplo se eu colocar aqui google.com.br e pesquisar vai aparecer para mim que esse domínio já está em uso Beleza então duas pessoas não podem usar o mesmo domínio e aí para esse projeto aqui né como eu tô

fazendo um projeto fictício para uma empresa de assessoria financeira eu vou colocar algo como por exemplo valor acessores aqui tá E aí você pensa direitinho no nome que se encaixar melhor no seu negócio eu sugiro que seja algo por exemplo Como o próprio nome do seu negócio algo que junte o nome do seu negócio com o nicho que você atua também a forma que as pessoas podem querer te procurar de uma forma bem intuitiva objetiva também tá nada de testão no seu domínio algo enxuto mesmo de preferência em português também porque às vezes quando a

gente coloca coisas em inglês as pessoas podem não saber digitar muito bem aquilo e você perde buscas no seu site também por conta disso tá só manter essas práticas sem caracteres especiais também de difícil acesso que você vai conseguir um bom resultado ali no seu domínio vou procurar por essa opção aqui vamos clicar para pesquisar e olha só esse domínio está disponível então vou clicar aqui deixa eu ver se tá escrito Certinho tá gente isso aqui é muito importante de você notar porque depois que você cadastra o domínio acabou para você alterar isso só comprando

outro mesmo então dá uma boa olhada Deixa eu ver se eu escrevi certo Acho que sim vou clicar aqui para continuar depois ele vai pedir pra gente completar o registro desse domínio tá você vai selecionar aqui se você é uma pessoa física ou uma empresa ou organização a única coisa que vai mudar aqui são os dados que você vai preencher tá por exemplo pessoa física coloca CPF empresa coloca CNPJ e aí eu vou colocar aqui por exemplo pessoa física e no próximo passo você vai preencher com os seus dados aqui então nada de segredo aqui

tá gente você preenche direitinho aqui com seus dados de contato vou clicar aqui pro próximo passo e aqui nesse próximo passo você vai colocar o c o CPF ou o CNPJ que você quer adicionar o registro desse seu domínio Beleza então vou colocar aqui um CPF rapidão e vou clicar aqui para finalizar esse registro Prontinho o registro aqui já está sendo registrado ele me pede aqui uma confirmação desses detalhes né tem aqui a localização do Servidor isso aqui é bem importante de você notar porque sempre é bom você colocar o servidor aqui onde vai estar

hospedado o seu site o mais próximo possível de onde estiver a sua audiência vamos supor que você é um Web Designer aqui do Brasil e você tá fazendo um site que a audiência Vai ser lá nos Estados Unidos você vai selecionar o servidor que estiver mais próximo dessa localidade Ok não da sua mas do pessoal que vai acessar esse seu site do seu público alvo aqui no caso é pro Brasil mesmo então eu vou manter essa mesma esse mesmo servidor daqui da América do Sul e vou clicar aqui para eh concluir essa configuração depois é

claro né de revisar se tá tudo aqui certinho vou clicar aqui para concluir e agora é só esperar a mágica acontecer a própria hostinger já tá configurando tudo aqui para mim e o próximo passo já vai ser a gente acessar o nosso painel da hospedagem Prontinho foi só o tempo de eu tomar um gole aqui no café e já caí nessa tela aqui beleza ele dá a opção pra gente já editar o nosso site ou então acessar aqui o nosso painel de controle eu não vou acessar aqui ainda tá isso porque eu quero mostrar um

detalhezinho aqui para vocês então vamos clicar aqui em gerenciar site e tcharam sejam muito bem-vindos ao seu painel de controle aqui da da rosinger tá bom para você ter todo o acesso aqui às configurações do seu servidor beleza se você tiver um tempinho aí depois Ó você dá uma olhadinha em cada uma dessas Abas vê o que que cada coisinha dessa aqui significa beleza e um detalhe muito importante é que aqui do ladinho você tem esse botãozinho de chat online com o suporte da hostinger se você tiver qualquer dúvida qualquer dificuldade em relação ao servidor

do seu site clica aqui entra no chat ao vivo com eles que eles são super solícitos gente de verdade eles já me ajudaram até no final de semana de madrugada no perrengue que eu passei então assim eu não tenho do que reclamar do suporte aqui da rost beleza só pedir ajuda aqui que eles com certeza vão te ajudar e eh um detalhe aqui que eu queria mostrar para vocês é que assim que a gente configura ali e configura o nosso domínio né do nosso servidor ainda tem um processinho que a gente chama de apontamento desse

domínio beleza Ou seja o a rosinger ela tá trazendo aqui o domínio para dentro dela para conseguir vincular isso ao site que você vai criar esse passinho aqui ele pode levar até 24 horas mas eles colocam esse prazo bem grande aqui só para não ter problema porque na verdade na verdade mesmo é uma questão de minutos tá acho que até no máximo meia hora aí provavelmente isso aqui já vai estar funcionando normal para vocês tá Às vezes em poucos minutinhos também então o que eu quero que vocês façam agora é dará uma pausad aqui nesse

vídeo Deixa essa tela aqui aberta e vai atualizando ó de uns dois em dois minutinhos aí até esse aviso aqui sumir tá quando ele sumir a gente vai pro próximo passo aqui para acessar o nosso painel da administrador Beleza então pausa aí eu vou fazer a mesma coisa aqui vai atualizando e quando isso aqui você acessa aqui o vídeo pra gente continuar o nosso tutorial combinado te vejo já já Prontinho atualizei aqui sumiu foi menos de 10 minutos aqui para assumir esse aviso e agora é só a gente clicar aqui em cima em painel de

administrador pra gente poder acessar o nosso painel do press Ok ele vai direcionar aqui o nosso site direcionando Beleza já estamos aqui no painel do WordPress primeiro a gente cai nessa tela aqui da rosinger tentando e dar um passo a passo aqui mais intuitivo da gente conseguir fazer algumas configurações do nosso site Mas a gente não vai utilizar isso aqui tá eu vou clicar aqui do lado em painel para vocês verem a visão inicial do nosso painel para deixar isso aqui um pouco menos assustador nós vamos clicar aqui em cima em opções de tela e

tirar todas essas notificações aqui ó aí a tela fica mais limpinha né Isso aqui é opcional é só um frufru inho mesmo para melhorar a usabilidade mas fica seu critério aí e aqui nós estamos na nossa página inicial do painel do WordPress Bia toda vez que eu precisar acessar esse negócio aqui eu vou precisar fazer tudo isso de entrar lá no meu servidor e ir no painel administrativo e acessar isso aqui não sei o que não sei qu não tem uma forma bem mais simples também tá eu vou clicar aqui ó vou passar o mouse

aqui em cima e vou clicar para sair só para vocês verem e agora Toda vez que você acessar o domínio que você resgatou e colocar um barra WP admin aqui em cima você vai cair nessa página de login de acesso aqui do seu painel lembra daquelas credenciais que eu pedi para você salvar o e-mail e a senha é aqui que você vai usar tá então vou colocar aqui o meu e-mail e minha senha rapidão vou clicar para lembrar para não ter que ficar fazendo isso toda vez e depois eu vou clicar para acessar para ir

de novo para aquele painel que eu acabei de mostrar Ok já volto Prontinho ó já acessei aqui e agora nós estamos aqui dentro do painel chegando até essa etapa Meus parabéns você acabou de concluir a primeira etapa aqui do nosso tutorial tá toda aquela parte ali de contratação do domínio hospedagem já está feita e agora a gente vai pra segunda etapa que é a de preparar o terreno pro nosso site Calma que a parte mais divertida ainda vai chegar isso aqui é só detalhe técnico tá E aí a gente vai preparar aqui bonitinho para poder

fazer isso de uma forma tranquila depois também Beleza então bora começar aqui bom gente pra gente fazer esse processo aqui de preparar o terreno pro nosso site eu separei o mapa mental para ficar bem fácil da gente acompanhar todo esse processo sem se perder até porque eu tenho uma memória péssima E se eu não faço um negocinho desse para me guiar eu deixo de fazer um monte de coisa mas ó Bora lá a primeira etapa a gente já concluiu né que é essa parte de contratação e configuração do nosso domínio e hospedagem E para isso

você teve tanto a opção da contratação guiada com o bônus do elementor pro ou então o passo a passo que eu acabei de mostrar aqui no vídeo e agora nessa segunda etapa nós vamos começar vindo aqui em configurações na aba de configurações do painel do WordPress nela nós vamos mexer no título descrição idioma e links permanentes B que que é tudo isso Calma que eu vou te mostrar agora bora vir aqui no nosso painel E aí eu vou passar o mouse aqui em configurações e vou clicar em geral e aí perceba que logo aqui em

cima a gente já tem o título do site e a descrição basicamente aqui você vai colocar um preview ali do que que é que você quer que o Google entenda sobre o seu site Qual que é o título dele sobre o que que ele se trata algo bem breve mesmo só para dar esse contexto pro Google Beleza então aqui no título do site por exemplo eu vou colocar o nome dessa empresa fictícia vou colocar valoriz e acessores é isso mesmo é isso mesmo a gente vai fazer esse site aqui né e aqui a descrição eu

vou colocar sobre o que que essa empresa se trata eu vou até aproveitar esse titulo Zinho aqui que eu já adianto que foi o chat GPT que me ajudou a fazer e eu já mostro esse processo para vocês Tá vou pegar esse titulo Zinho aqui e vou trazer para cá pra descrição perceba que só uma frase já está ok nada de ficar escrevendo redação do Enem aqui na descrição não e aí a gente tem várias outras opções aqui várias Abas de configurações eu não vou entrar em detalh sobre todas elas porque senão esse vídeo aqui

vai durar 84 anos mas aqui ó eu vou me ater a essa parte do idioma do site porque pode ser que para você esteja aparecendo inglês o que não é nada didático pra grande maioria das pessoas né então qualquer coisa é só você vir aqui selecionar português do Brasil e aí depois nós vamos salvar essas alterações Outro ponto também importante pra gente mexer aqui é essa parte dos links permanentes beleza eu não sei porque de acho isso aqui já não vem como padrão WordPress Nunca aprende isso mas enfim né Vamos clicar aqui basicamente você vai

vir aqui em estrutura de links e vai colocar como nome do post por que isso Bia porque normalmente as pessoas já estão acost acostumadas a acessar sites com nomes amigáveis ali em cima por exemplo Valorize acessorios.com.br se eu tiver uma página de contato uma página né enfim serviços qualquer coisa assim vai ser barra contato barra serviços de uma forma bem didática e intuitiva para todo mundo né se a gente não marca isso aqui a página vai ficar com nomes estranhos nomes misteriosos como por exemplo aqui ó com a data e o nome da página depois

um código aleatório que ninguém sabe o porquê enfim né uma confusão aqui nesses outros outros exemplos mas a gente vai colocar aqui essa parte do nome do post E aí vai ficar tudo fácil para todo mundo acessar Beleza então vamos salvar aqui essas alterações e o próximo passo aqui que a gente tem que fazer é adicionar o tema do nosso site Então bora lá sem enrolação vamos vir aqui novamente no painel agora nós vamos passar o mouse aqui em aparência clicar em temas e aí vem esses temas aqui como padrão que a gente não vai

utilizar Beleza a gente vai clicar aqui em adicionar um novo tema e nós vamos adicionar esse esse tema aqui que é próprio da empresa do elementor esse aqui é o tema que eu mais utilizo que eu mais gosto assim de toda a vida porque ele é bem leve bem simples de configurar não tem nada muito amarrado nele ele é bem tranquilo mesmo e 100% adaptado ao elementor então eu vou clicar aqui para instalar e assim como tudo aqui em relação a tema e plugin no WordPress a gente instala e depois a gente ativa esse recurso

Beleza então já vou clicar aqui para ativar também e a gente vai voltar para aquela telinha com os nossos temas e perceba que mesmo a gente ativando esse aqui esses outros continuaram aqui né de enxeridos então o que que a gente vai fazer a gente vai clicar em cada um deles aqui e vai excluir Bia por que que eu não posso deixar eles aí você até pode mas não deveria Porque quanto menos recursos a gente tiver no nosso site de plugins de tema de mídias de páginas o que você tiver melhor vai ser o desempenho

também do seu servidor beleza melhor vai ser o carregamento das suas páginas melhor vai ser a otimização do seu site porque vai ter menos recursos pesando o seu servidor menos arquivos então quanto mais enxuto você conseguir deixar o seu site melhor tá isso aqui é uma ótima prática e aí já passamos aqui pela parte do tema e agora nós vamos instalar o Bem dito do elementor Beleza bora lá então ó em plugins agora tá para quem não sabia elementor é um plugin que ajuda na criação de sites ele é um construtor de sites aqui dentro

do WordPress que basicamente permite com que você crie sites assim na na base do arrasta e solta você pega um título arrasta o título pra tela pega um botão arrasta esse botão pra tela super fácil bem intuitivo E aí para isso a gente vai clicar aqui em adicionar plugin inclusive Olha só detalhe ó ó tem uma notificação aqui falando Agradecemos por instalar o tema Hello e aí já dá a opção aqui de instalar o elementor eles são sempre juntinhos Mas enfim a gente não vai fazer por aqui a gente vai fazer pelo tradicional para vocês

aprenderem bem então vou clicar aqui em adicionar plugin e a gente vai procurar aqui por elemento esar aqui e aí estamos aqui com o criador de sites mais utilizado pelo Brasil com mais de 5 milhões de instalações ativas nós vamos clicar em instalar e depois ativar assim como a gente fez o nosso tema ali agorinha Beleza então vamos esperar o negócio rodar aqui e agora nós vamos ativar E aí o elementor vem de enxerido aqui querendo dar um um boas-vindas um passo a passo Inicial que a gente faz só clicar em pular porque a gente

vai fazer essas configurações aqui manualmente depois tá para mostrar esse processo para vocês ele já criou uma página aqui de enxerido também que a gente vai incluir daqui a pouquinho mas só para já apresentar para vocês se esse é seu primeiro momento com elementor muito prazer essa aqui é a a a página inicial de edição aqui dentro do elemento E aí perceba que é realmente uma tela em branco aqui onde a gente pode arrastar o que a gente quiser por exemplo eu quero um título aqui eu quero uma imagem aqui eu quero um um botão

depois da imagem né E você vai estilizando aqui nas abinhas da forma que você quiser eu não vou mostrar com muitos detalhes aqui agora porque a gente vai cansar de mexer nisso daqui a pouco na na terceira etapa do tutorial mas por enquanto só para você saber mais ou menos como é que funciona agora eu vou clicar nesse hamburguinho aqui em cima e a gente vai clicar em sair da primeira vez que a gente faz isso ele pergunta sempre que você clicar aqui você quer sair para onde mulher aí eu vou colocar aqui que eu

quero sair pro painel do WordPress vou clicar aqui para aplicar vamos clicar aqui para sair também E aí beleza deixa eu só voltar aqui porque eu já me perdi onde é que a gente tá H estamos aqui ó agora para nas configurações do elemento Então já instalamos ativamos o elemento elor gratuito né Lembrando que eu Ten o elementor gratuito e tem o elementor pro inclusive aqui eu já vou fazer esse processo da ativação do elementor pro em off beleza porque eu tô considerando que a grande maioria das pessoas fizeram o processo ali da da contratação

guiada e já ganharam de bônus e já estão com esse elementor pro ativo aí também tá caso por algum motivo você queira fazer esse processo por fora queira costear Esse elementor pro aí por fora e ativar aqui por conta própria eu não vou mostrar aqui nesse vídeo para não ficar um processo muito longo mas de qualquer maneira se você procurar por esse assunto aqui no canal você vai ver tutorial a respeito disso também tá de como colocar aqui o arquivo do elementor e ativar o elementor pro dentro do seu site Beleza eu vou ativar aqui

por conta eu vou só fazer umas configurações aqui com você Mas aí você dá uma pausinha e faz essa ativação aí também por conta própria se você precisar Beleza agora ó a gente vai vir aqui em elemento vou clicar aqui em configurações e aí aqui em Recursos a gente vai fazer o seguinte ó eh para quem não sabe né até um tempinho atrás o elementor ele se baseava no processo de criação por sessões e colunas isso já ó um tempinho atrás há mais de um ano aí atrás tá mas há uns meses atrás o elemento

já deixou como padrão um novo modo de de criação de ses que é muito mais otimizado mais simples eu mesmo adoro inclusive Já gravei um vídeo Completão aqui no canal também sobre um aulão de flexbox container que é né o que eu acabei de falar o flexbox container e além do flexbox depois depois ele ativou também essa opção aqui de Grid Gente esse contêiner de grade aqui e anda ali juntinho com flexbox container tem hora que vai ser preferível usar ele tem hora que vai ser preferível usar o flexbox só com flexbox você já consegue

fazer tudo também mas ele tá aqui para dar uma ajudinha Extra em determinadas situações tá aqui eu vou usar os dois exemplos para você já ter uma ideia de como fazer isso então ó eu vou clicar aqui para ativar esse contêiner de grade que por padrão não vem ativo e aí aqui embaixo eu vou clicar para salvar ess essas alterações beleza só isso que a gente vai fazer por aqui bem sim agora voltando aqui pro mapinha Mental para Não Me Perder depois agora nós vamos criar a página né que a gente vai utilizar para isso

a gente vai vir aqui ó bem simples na aba páginas aqui do WordPress e inclusive né você vai vendo ó a gente vai clicando em cada uma dessas coisinhas aqui mas tudo tem o seu próprio nominho E aí com o tempo Quando você vai ganhando familiaridade com a ferramenta tudo isso aqui vai ficando bem mais fácil tá mas aqui ó nós já temos três páginas aqui prontas que o WordPress traz como padrão na verdade duas padrões e uma que o elementor trouxe aqui que a gente não pediu mas ele trouxe mas essas páginas eu não

vou utilizar então eu vou selecionar todas elas aqui de uma vez vou vir aqui em ações e massa e vou colocar para mover pra lixeira vamos aplicar isso agora eu vou vir aqui em lixo e eu vou fazer a mesma coisa eu vou selecionar tudo e excluir permanentemente pra gente não deixar recurso que a gente não tá utilizando OK agora eu vou clicar aqui para adicionar uma nova página e nós vamos adicionar aqui a nossa página home início o nome que você qu é daí tá então eu vou colocar aqui home home assim vamos clicar

aqui para publicar essa página e agora né Deixa eu só ver aqui qual que é o próximo passo a gente vai definir essa página aqui como a nossa página inicial e pra gente fazer isso é bem importante a gente clicar aqui nesse botãozinho aqui do WordPress acessar o nosso painel vir aqui em configurações leitura e nessa página nessa parte aqui de sua página inicial exib eu vou selecionar essa opção aqui de página inst e vou selecionar a nossa página home por que isso porque assim a gente salvando isso aqui direitinho quando alguém acessar o nosso

domínio que a gente resgatou ela vai acessar essa página que a gente está criando agora beleza então vou clicar aqui para salvar essas alterações e pronto configuração feita o próximo passo agora já está um pouco mais próximo da da parte da criação do nosso layout em si que é a definição de alguns elementos globais de estilização pra nossa página Beleza então a gente já vai definir aqui um padrão da nossa paleta de cores das nossas Fontes da identidade visual ali do site o plano de fundo várias coisinhas que eu vou mostrar para vocês aqui agora

para facilitar na hora da criação do layout em si beleza Isso aqui é uma ótima prática também para você não se perder nesse processo então ó vamos voltar aqui no painel eu vou clicar aqui em páginas vou clicar aqui na nossa página home E aí eu vou clicar aqui para editar com o elementor nessa página Ok pronto já acessamos aquela telinha de novo né perceba que tem algumas poluições inhas aqui que a gente vai tirar aqui agora tá então eu vou clicar aqui primeiro nessa engrenagem bem na lateral aqui inferior vou clicar aqui nessas configurações

vou ocultar esse título da página e eu também vou vir aqui em layout da página e vou colocar esse tela do elemento que antes se chamava elementor Canvas e agora é tela do elementor tá E aí perceba que agora nós temos uma tela completamente vazia aqui pra gente poder fazer o que quiser nela eu tenho mania de ir clicando sempre nesse botãozinho aqui de atualizar e eu sugiro que você vá criando essa mania também para não acabar não perdendo algum processo aqui dentro Beleza então ó sempre que você vê esse Rosinha aqui de vez em

quando vai dando uma clicad Dinha aqui para ir salvando esse Progresso agora para essa parte das configurações dos elementos globais eu vou clicar de novo aqui nesse hamburguinho aqui em cima nós vamos clicar aqui em configurações do site e a primeira coisa que a gente vai definir são as nossas cores globais perceba que esse projeto aqui que a gente vai criar ó ele tá todo né com uma paleta de cores bem Coesa com Fundos bem específicos o mesmo tom de verde em todos os lugares entende assim ó tudo bem bonitinho para que é não fique

aquela maçaroca de cores que tipo a pessoa começa de um jeito daqui a pouco termina de outro e não cria uma certa consistência no design do início até o fim isso aqui dói os olhos principalmente de quem entende um pouquinho mais e também gera uma confusão na percepção do usuário quando ele acessa uma página que não tem essa coesão muito bem definida Beleza então assim pra gente não se perder nesse acesso Toda hora ter que ficar catando uma cor específica para colocar nos elementos a gente já define uma paleta padrão aqui e depois utiliza esse

elemento global ao longo de toda a página Beleza e como é que você vai saber qual paleta você vai usar aqui olha só eu ainda facilitei todo esse processo no link aqui da descrição desse vídeo você vai ter ali o link de um drive com todos os materiais que você precisa para seguir essa aula tranquilo tá e um dentro desses materiais você vai ter acesso a esse documento aqui de infos de identidade visual a gente vai clicar nele aqui e aí já tem um link aqui ó para facilitar dessa ferramenta aqui que eu uso bastante

dessa coolors onde a gente consegue copiar os hexadecimais hexadecimais são códigos de cores ok que a gente vai utilizar aqui nessa paleta E além disso também eu já coloquei até uma relação aqui mais fácil de como que a gente vai preencher aquilo ali para dar uma facilitada nesse processo ó vamos pegar aqui essa cor primária que é aquele Verde principal eu vou trazer para cá ó para essa cor primária vou clicar aqui na cor e vou colocar esse ex decimal aqui embaixo e aí perceba que já mudou aqui na pré-visualização também né vou arrastar isso

aqui para cá para ficar mais fácil ó no secundário eu vou colocar essa cor fff aqui que nada mais é do que o branco com o tempo você vai até decorando essas paletas de cores tá sempre de que colocar esse hashtag aqui na frente porque senão ele não puxa direito então ó vamos vamos vir agora aqui no texto vou pegar aqui essa corzinha E aí esse cinza um pouco mais claro é um pouco mais escurinho ali né aliás um pouco mais claro tô meio bugada com as cores essa cor de Realce aqui também ó não

sei se eu copiei é um um verde um pouquinho mais claro ok então já temos uma paleta de cor até bonitinha aqui e além dessa paleta de cor a gente consegue ainda adicionar mais cores personalizadas Também vi mas não vai ficar cor demais não porque percebam que todas essas cores aqui elas são subtons umas das outras então é tipo uma cor de destaque e Dois Tons neutros aqui para complementar o site O que fica bem legal tá é uma diquinha Extra aí de Como você consegue utilizar cores aí dentro do site também mas enfim ó

vamos clicar aqui em adicionar uma nova cor vou pegar aqui esse cinza escuro que vai ser o nosso fundo do site Então vou colocar aqui vou colocar esse hashtag beleza e vou colocar aqui cinza escuro vamos pegar essa próxima é um cinza médio para fazer fazer um contraste de uma sessão para outra colocar aqui cinza médio e aqui no outro eu vou colocar qual que era mesmo ah a cor de borda alguma a bordinha de alguns itens pra gente fazer um frufru inho legal que vocês vão ver quando chegar nessa hora vamos pegar aqui essa

cor hashtag é bem simples né bem mecânico já definimos aqui a nossa cor e por mais que tenha esse trabalhinho Extra você vai ver que isso Vai facilitar demais na hora da construção então ó vamos clicar aqui para atualizar e pronto já temos aqui a nossa paleta bonitinha bem construída agora bora aqui pra parte das fontes globais tá Oxi acabei não clicando direito vamos voltar aqui op pera aí deixa eu salvar de novo só para garantir agora vamos vir aqui em Fontes E aí beleza agora estamos na fonte aqui nessa parte das Fontes é do

mesmo jeito tá assim como fica feio nos sites quando a gente vê todas as cores bem bagunçadas e misturadas sem uma consistência a fonte também é do mesmo jeito Tem gente que começa com uma fonte no título depois resolve colocar outra para texto aí depois outra pro botão aí daqui a pouco muda de ideia e vai paraa outra sessão e coloca outra fonte E além disso deixar é deixar o site visualmente ruim é isso também prejudica a otimização da sua página tá gente fonte é uma coisa Eh pera aí de novo de novo e além

de deixar o o site assim com uma estética ruim quando a gente faz esse tipo de coisa isso também é um tipo de prática que prejudica o desempenho da sua página Tá quanto mais fontes e pesos a gente coloca dentro do nosso site mais pesado ele vai ficar Então sempre se atenha ali a uma duas fontes no máximo tente reduzir o número de pesos que você utiliza também para não ficar prejudicando o desempenho da sua página por conta disso beleza e aí eu defini aqui que para esse projeto a gente vai utilizar essa fonte Poppins

mas de qualquer maneira saiba que você pode clicar aqui por exemplo ó e você tem uma grande quantidade aqui de famílias de fontes todas as fontes que estão disponíveis ali no Google fontes para você brincar e utilizar aí nos seus projetos Beleza vou procurar aqui por Poppins E aí eu não vou definir essas outras coisas aqui eu vou deixar para fazer isso na hora da construção mesmo vou só colocar a família tipográfica mesmo vou colocar aqui Poppins nas outras também vamos colocar aqui em texto por padrão ele vem essa Robot que também é legal mas

Poppins vai ficar ainda mais bonitinho Poppins aqui também e vamos atualizar essa informação e o próximo ponto aqui de personalização dos elementos globais é essa parte aqui agora de Identidade do site aqui né perceba que já apareceu o nome e a descrição que a gente colocou lá nas configurações do WordPress e agora a gente vai colocar aqui uma logo para esse site E também o favicon que é um iconz inho que fica ali na abinha do navegador E para isso lembrando mais uma vez que aqui ó na parte do link do drive que vocês vão

ter acesso vocês vão ter acesso a essa pagina essa pastinha de mídias aqui onde tem todas as imagens que nós vamos utilizar aqui no site então ó eu vou clicar aqui em logo do site E aí eu vou clicar para selecionar arquivos e aqui ó Inclusive eu já vou pegar aqui todas as mídias que nós vamos utilizar aqui no site Beleza vou pegar aqui todas essas opções e já vou trazer para cá pra nossa biblioteca e assim fica mais fácil da gente selecionar as coisas depois já vou pegar aqui essa logo vou clicar para selecionar

e agora aqui na parte do fev icon do site eu vou selecionar esse outro arquivo aqui e já perceba também as dimensões das imagens que Vocês pegaram beleza ó tamanho de logo de uma forma que ela fique aqui com uma um um pequeno tamanho de arquivo também o favon que precisa ser um arquivo quadradinho aqui também ó de 200 por 200 300 por 300 500 por 500 tá algo pequenininho mesmo que é só para poder ficar aqui em cima no navegador esse frufru inho que todo mundo gosta e aí vamos selecionar aqui o nosso ícone

vou clicar para atualizar e Prontinho ó ele tá dando aqui um aviso de que para não deixar as imagens muito otimizadas para não e prejudicar o desempenho do site mas de qualquer maneira também isso aqui é bem tranquilo tá todas as imagens aqui já estão otimizadas no ponto de que não vão perder a qualidade e ao mesmo tempo também não tem um tamanho grande então você já pode utilizar isso como parâmetro aí também vamos voltar aqui rapidão e agora a gente vai definir o plano de fundo do nosso site por padrão o site ele vem

todo branco assim mas como a gente vai fazer um estilo mais Dark mode não faz sentido eu ter que ficar colocando essa cor Em Cada sessão né é mais fácil já deixar um fundo escuro e colocar um frufru aqui ou ali quando precisar então Ó vou clicar aqui em tipo plano de fundo vou selecionar essa cor aqui do cinza escuro que a gente já adicionou nas cores globais e vou clicar aqui para atualizar beleza ó todo o site já ficou com essa cor aqui Vamos só ver se eu esqueci alguma coisa fando ah ó já

I esquecendo também tem a parte do layout essa parte aqui ó essa parte aqui nós vamos colocar o seguinte ó 1200 pixels como largura do nosso conteúdo Bia que que é essa largura do nosso conteúdo é a extremidade máxima no qual os nossos itens vão alcançar dentro de um contêiner aqui dentro de uma determinada sessão ó perceba que por exemplo se eu vir aqui nessa minha extensão que eu gosto bastante de usar essa Grid ruler aqui ó vou selecionar essa extensão aqui e vou colocar ó de um lado até a outra perceba que toda a

página ela segue direitinho esse Grid aqui beleza Isso é uma consistência bem legal também deixa o site bem alinhadinho e aí essa largura aqui que os itens alcançam é justamente essa largura que a gente tá definindo aqui agora tá 1200 fica um padrãozinho legal pra grande maioria de todos os monitores Então a gente vai deixar isso aqui vamos colocar o preenchimento zero aqui no contêiner já já vocês vão entender melhor o porquê eu vou zerar esses espaçamentos aqui também para poder fazer isso por conta própria durante a construção do layout vamos clicar aqui para atualizar

E aí Prontinho Agora sim finalizamos o nosso processo de preparação do terreno Aliás só tá faltando um detalhezinho que eu já ia esquecendo ó vamos vir aqui em plugins E aí aqui eu tô com o elementor né que eu acabei de colocar ali junto com vocês e já vem outros dois plugins aqui né eh esse de Cash e o da hosting que já vem por padrão aqui quando a gente instala e configura o WordPress pelo servidor mas eu vou desativar esses dois plugins aqui e vou excluir porque a gente vai utilizar só o elemento mesmo

por enquanto vou clicar aqui para atualizar E aí aquele detalhe eu vou ativar o elementor pro aqui por conta própria Se você né no caso fez ali todo o processo da contratação guiada o que eu acredito que você tenha feito para aproveitar o Super Bônus você já vai estar com o elementor pro aqui ativo ou senão qualquer coisa dá uma procurad Dinha aqui no canal de como eh instalar aqui configurar e ativar Aliás a licença do elementor pro dentro do site também Beleza então vou ativar aqui e agora a gente vai aqui pra próxima etapa

que é a de construção do nosso layout show a primeira coisa que a gente vai fazer nessa etapa aqui ó só para vocês se é ambientar primeiro a gente vai criar todas as sessões para versão desktop depois a gente vai dar uma mexida geral para poder otimizar também a versão responsiva né para tablet para mobile e por fim né gente a gente corre para pro abraço aí mostrar o nosso site pronto para todo mundo M ficar feliz e compartilhar o resultado aqui embaixo também porque todo mundo precisa comemorar junto então bora lá a primeira coisa

vai ser é definir um menu aqui pra nossa página perceba que aqui nesse projeto a gente tem esse menuzinho aqui próprio pra Landing page onde Por exemplo quando a gente clica no botãozinho aqui ele leva a gente de elevador para aquela sessão específica é um menuzinho bem bonitinho aqui transparente também então bora fazer essa chiqueza toda para isso aqui no painel você vai vir aqui em aparência menus e a gente vai configurar os itens Desse nosso menu eu vou dar um nome aqui para ele eu vou colocar menu principal mas ise aqui é opcional tá

da forma que você quiser vou clicar aqui para criar esse menu e aí a única coisa que a gente tem aqui do lado é a nossa página home isso porque as os outros itens aqui não são de páginas especificamente né são de sessões dentro dessa mesma página O que é bem usual nos sites por aí então ó o que que a gente vai fazer primeiro eu vou selecionar essa página home aqui mesmo vou adcionar ao menu e aí para não ficar esse nome engles aqui eu vou colocar essa setinha para baixo e eu vou trocar

esse nome aqui para início e aí vai ser esse primeira essa primeira opção de botão aqui ok vamos já Salvar esse menu e agora aqui em links personalizados a gente vai adicionar aquelas outras opções ali o primeiro texto do link que a gente vai colocar é deixa eu ver aqui porque eu já esqueci Quais que são quem somos Vamos colocar esse item aqui e aqui na URL a gente vai fazer o seguinte olha só a gente vai colocar uma hashtag de identificação Vocês já vão entender lá quando a gente tiver mexendo nisso depois tá quando

a gente mexer nessa ancoragem a gente vai colocar essa hashtag e depois a gente vai colocar um nome para Esse identificador ou seja por exemplo quem traço Somos sim não pode ter caractere especial aqui e nem espaçamento beleza bem limpinho mesmo tipo desse jeito aqui vamos adicionar isso aqui ao menu e agora o próximo vai ser já esqueci o que que é nossas soluções Vou colocar aqui nossas soluções Bia posso posso colocar serviços pode o site é seu você coloca aí do jeito que você quiser tá bom vamos colocar aqui hashtag Vou colocar aqui soluc

coins vou colocar o nossas também porque senão vou esquecer que tá sem isso nossas traços solucões vamos adicionar isso aqui ao menu o próximo aqui vai ser depoimentos depoimentos e perceba que isso aqui é uma estrutura bem padrão de páginas por aí né é o suficiente para você demonstrar bem o seu serviços e captar a atenção das pessoas de uma forma objetiva com a cop bem bonitinha também do jeito que a gente vai ver aqui que o GPT vai trabalhar para nós eu já mostro ai para vocês vai lá já esqueci que eu tava fazendo

Ah depoimentos tá adicionar o menu e agora nós vamos colocar aqui Fale Conosco Ok E aí ó na verdade na verdade mesmo esse aqui eu não vou colocar um identificador Qual que é a ideia aqui esse Fale Conosco ser um botãozinho onde a pessoa clica e é direcionado para uma nova aba no link do WhatsApp Por que que é eh seria bom ir para uma nova aba para que a pessoa não precisa sair aqui dessa essa página tá sempre que você enviar uma pessoa para um link externo é uma boa você colocar isso para uma

nova aba para que ela não tenha que sair é da sua página aqui e perder a retenção daquele usuário então o que que a gente pode fazer aqui você pode colocar o seu link de WhatsApp Ó você coloca aqui por exemplo gerador link WhatsApp no Google você vai encontrar 300 opções aqui ó se eu clicar no primeiro ele já dá opção aqui de você criar um linkzinho bonitinho você pega esse link aqui ó eu vou colocar o do Google mesmo só só para ter isso lá tá como exemplo vou trazer para cá E aí eu

vou colocar aqui o nosso linkzinho né você coloco do WhatsApp vou adicionar isso aqui ao menu mas desse jeito que tá aqui ele ainda não vai abrir Isso numa nova aba como é que a gente pode fazer a gente vai clicar aqui ó vou fechar essa notificação eu vou clicar aqui para gerenciar Aliás não é aqui não onde é que é mesmo Ah não é aqui em cima ó em opções de tela vou clicar aqui e aí eu vou selecionar essa P essa parte aqui de páginas de destino pra gente conseguir configurar isso também tá

vamos vir agora aqui no Fale Conosco E aí agora pera aí Por que que ele não foi Ah não n esse aqui não ó Gente vou colocar esse destino do link aqui vamos selecionar agora essa opção aqui que foi habilitada o Abrir link em uma nova aba e vou salvar esse menu Prontinho o resto vai pra mesma página e esse aqui agora vai para uma outra página com o link do WhatsApp que você quiser colocar aí tá beleza já criamos os nossos itens de menu agora bora voltar aqui na nossa página e começar a editar

esse di com elemento E aí já que a gente já tem esses itens configurados o primeiro a primeira coisa que a gente vai criar aqui é o nosso cabeçalho esse o nosso header que tem basicamente a logo aqui do site e os itens aqui do lado PR as pessoas conseguirem Navegar Lembrando que isso aqui também ó é completamente responsivel olha só a belezinha que vai ficar pra mobile também ok então bora fazer isso aqui agora ó primeiro de tudo nós vamos criar um contêiner aqui contêiner São caixas onde você vai colocar itens do elementor aqui

dentro dentro dele tá então a gente vai adicionar esse maizinho aqui e aí como a gente habilitou aquela opção de Grid apareceu duas opções aqui pra gente tem o flexbox e a grade a gente vai utilizar os dois aqui nesse projeto tá alguns exemplos de cada um se você quiser saber mais sobre Como o flexbox funciona de fato eu não vou entrar em tantos detalhes aqui porque é muita coisa para abordar tem vídeo aqui no canal também a respeito disso tá vou clicar aqui no flexbox a gente vai selecionar essa opção aqui de contêiner horizontal

PR os itens que vão ficar um do lado do outro né E aí aqui ó eu já vou colocar para alinhar esses itens ao centros perceba que tem várias opções aqui né por exemplo de você colocar a direção dos itens na vertical ao contrário para cima justificar todo o conteúdo para um lado para um outro espaçado né Tem várias formas de você brincar aqui ao longo desse processo você vai ver alguns exemplos disso tá então eh Vamos colocar isso aqui vou colocar aqui já uma altura mínima de 100 esse header E aí Vou colocar aqui

também ó na AB de avançado né perceba que nós temos sempre uma aba de layout estilo que é paraa estilização desse item como o próprio nome já diz né E uminha aqui de avançado onde a gente consegue colocar margem pading aqui que é esse preenchimento E aí olha só essa diferença aqui ó a gente tem margem e pading né os dois são espaçamentos mas quando a gente fala de Margem a gente tá falando de um espaçamento externo quando a gente fala de pading a gente tá falando de um espaçamento interno a esse item tá Às

vezes não vai fazer diferença mas às vezes faz muita nesse caso aqui faz muita Então vamos desvincular esses valores aqui e eu vou colocar um espaçamento aqui de 15 em cima e 15 embaixo e aí agora que deixamos esse contêiner aqui configurado nós vamos começar a colocar os itens dentro dele primeiro item que eu vou colocar aqui é a logo do nosso site né já que a gente já configurou isso agorinha então vou procurar aqui por site logo e aí ó tem uma p de widgets aqui do elemento para você brincar beleza é como né

Se fosse várias aplicaçõe zinhas ali que você tem no seu celular pera aí não na verdade esse exemplo não tem nada a ver mas enfim são várias coisinhas que você pode aproveitar aqui tá várias funcionalidade zinhas aqui para você brincar e aí né como eu falei a gente vai vai procurar aqui por logo vou trazer para cá E aí OK ó essa imagem aqui a gente vai deixar ela com resolução completa o link dela já vai ficar pra própria URL aqui do site O que é legal porque às vezes as pessoas têm esse háo de

clicar na imagem inicial aqui para acessar o início do site né E aí aqui em este e avançado Eu não vou mexer em nada porque essa logo especificamente já está com o tamanho certinho para esse site mas caso você precisasse mudar o tamanho dela você pode por exemplo vir aqui ó na largura e colocar uma largura maior menor tá eu vou deixar o padrão aqui mesmo que é a resolução dela aqui completa já vou clicar aqui para atualizar porque eu vi esse botãozinho aqui rosa e já me deu essa vontade e aí agora aqui do

lado eu vou procurar por menu e aí a gente vai selecionar esse WordPress menu aqui ó vou colocar aqui na lateral nessa outra lateral aqui OK e ele tá coladinho aqui na logo mas a gente já vai resolver isso perceba que ele já puxou aqueles itens que a gente configurou e ele já selecionou aqui o menu principal que é o único menu que a gente criou pro site por isso que é tão importante você fazer aquele processo antes porque senão você não vai ter o que configurar aqui nesse wiit do menu beleza porque ele puxa

isso automático E aí pra gente deixar isso aqui melhor espaçado eu vou selecionar esse contêiner aqui de fora vou vir aqui em layout e vou colocar aqui essa opção de espaço entre para poder deixar os itens espaçados um numa extremidade e outro na outra né Assim fica um pouquinho melhor E aí perceba que tanto na parte da estilização dos itens como né essas opções aqui de distribuição dentro do contêiner a gente vai conseguindo deixar as coisas de uma forma bem alinhadinha Então beleza vamos já deixar assim e agora aqui nessa parte do item do do

do menu né a gente vai dar uma configurada aqui para ele ficar ainda mais bonitinho Apesar de que ele já tá até bem legal assim né mas bora dar uma estilizada diferente para vocês verem também com como é que funciona essa aba aqui de estilo então aqui nessa aba aqui de estilo do menu primeiro a gente vai dar uma olhadinha aqui na tipografia perceba que ele já puxou a nossa família aqui de fonte do Poppins né então já não tá puxando mais aquele padrão do Roboto Eu não vou mexer no tamanho e nem no peso

aqui que acho que desse jeito já tá ok então era só para conferir se tava tudo OK mesmo e aí aqui na parte do da cor do texto eu vou deixar esse assim mesmo esse cinza do jeito que tá aqui percebe que tem esse efeitinho aqui também ó da linha embaixo do item né ela é bonitinha de qualquer maneira Mas para dar uma mudada que esse aqui é bem padrão da gente ver no sites eu vou vir aqui na aba de conteúdo primeiro E aí aqui nessa parte aqui do Pointer tá vendo ó a gente

tem várias opções a gente tem por exemplo com linha em cima a gente tem sem efeito nenhum também aqui ó só a corzinha a gente tem aqui o background que é o que a gente vai utilizar tem essa linha dupla aqui também é da sua escolha Tá eu vou colocar esse aqui de background para esse vídeo você pode colocar uma animação específica para isso também eu vou deixar essa padrão que é mais é tranquila de se utilizar vou voltar aqui na aba de estilo e agora sim ó quando eu vir aqui na parte de Rover

ele vai aparecer a cor também desse efeito pra gente dar uma brincada com ela tá não ficou muito bom o contraste aqui que também é uma outra outro princípio de design bem importante pra gente se atentar não ficou bom esse contraste de uma cor clara com outra cor clara então aqui no texto eu vou colocar esse cinza escuro Ok vou deixar essa corzinha verde mesmo ó perceba que o Rover é quando a gente passa o mouse em cima de um it OK aí ele faz esse efeito aqui e aqui no ativo que é o botão

que está ativo naquele momento eu também vou colocar aqui essa cor do texto como cinza escuro e o Pointer que é esse Realce aqui esse efeito que tá dando no botão eu vou colocar esse Verde um pouco mais escuro ó esse aqui tá ativo e ficou mais escuro quando a gente passa o mouse ele fica um pouco mais claro ok E aí aqui no pading que é o preenchimento interno de cada um desses itens eu vou colocar aqui 20 pixels para cada um não vou mexer nesse pading vertical aqui vou colocar aqui um passamento entre

cada um de pelo menos 20 pixels também para eles terem pelo menos ó um respiro Zinho entre cada item e aqui no arredondamento das bordas a gente vai colocar cinco Pixel só para não ficar aquele negócio super Quadradão que não vai combinar muito bem com esse design ó perceba que na logo também tem algumas partes arredondadas então é legal dar uma arredondados outros itens também essas outras duas partes aqui eu não vou mexer agora porque isso aqui tem a ver com o responsivo tá então para não mexer não não confundir a cabeça de vocês vamos

deixar para esse outro momento vamos clicar aqui para atualizar e Ah pera aí rapidinho não tá certo tá certo eu pensei que era para ficar branco mas a gente já acabou de colocar isso aqui então Ó pouquinho tempo já configuramos aqui o nosso menu chuchuzinho aqui PR PR pro para essa versão do desktop beleza e aí agora o próximo passo vai ser a gente fazer esse banner Inicial aqui bora lá bom gente e agora pro nosso banner inicial a gente vai começar a brincar também com os conteúdos que foram construídos a partir da Inteligência Artificial

do GPT esses conteúdos também poderiam ser gerados por outra ia desse mesmo tipo tá como por exemplo Gemini também que é muito bom para isso o Gemini do Google mas aqui ó eu trouxe toda essa conversinha que eu tive aqui pro GPT né com o GPT para poder formular os conteúdos dessa página inteira inclusive para você ter acesso a Essa mesma conversa também é só você vir aqui no link dos seus materiais Beleza você vai clicar aqui em conversa com GPT e vai ter uma imagem aqui com todos esses detalhes para você poder dar uma

lida aí com calma depois ok mas aqui ó só né é demonstrando aqui para vocês o que que a gente tem nessa sessão inicial a gente tem um título a gente tem um subtítulo e a gente tem uma chamada de ação sempre que você for construir um site é sempre legal você já dar uma pensada tipo ó qual que vai ser a estrutura aqui do meu site quais vão ser as sessões que eu vou querer colocar nele você pode pedir ajuda pra Inteligência Artificial também para ela né te guiar ali nesse processo tipo me dê

sugestões de sessões que eu preciso ter num num site de tal Tipo ele vai saber te indicar direitinho e você pode eh partir dessa base aí que ele te der né E aí Além disso também você já pensa tipo tá nessa sessão o que que eu quero eu quero um título um subtítulo preciso de uma descrição vou colocar alguma legenda vou colocar alguma captação alguma coisa assim já pensa nos itens que você precisa colocar ali dentro dele para guiar a inteligência artificial naquilo que você precisa preencher você simplesmente chegar lá no GPT e fala Olha

eu quero um site de contabilidade Gere todo conte Udo para mim desse site ele até vai fazer vai tentar arranhar Ali vai fazer alguma coisa para você mas quanto menos você especificar o que você quer menos ele vai te entender e pior vai ser o resultado beleza nessa conversa aqui com que eu tive com ele eu até me ative ali ao básico mesmo não fiz nada mirabolante aqui não adicionei técnicas de promos aqui no GPT como por exemplo fazer com que ele se identifique como um determinado especialista dar muitas especificações sobre o negócio e tudo

mais até porque isso isso aqui é um projeto fictício mas se isso aqui fosse para um projeto real Com certeza eu tentaria especificar melhor para poder fazer uma coisa mais de acordo com aquilo que eu preciso por exemplo aqui ó eu coloquei preciso fazer um site para um escritório de assessoria financeira com o nome Valorize acessores Então já tinha definido isso antes e coloquei aqui para ele você pode pedir ajuda para tudo isso também tá para nome de empresa para tudo que você precisar e E aí eu coloquei a valoriza acessores é especializado em consultoria

empresarial que acelera o crescimento de negócios implementando processos ferramentas e estratégias inovadoras Pensei aqui num pequeno briefing aqui uma uma pequena promessa para uma empresa fictícia que eu tô criando aqui né para pelo menos já guiar o tipo de conteúdo que ele vai gerar a partir disso eu coloquei me ajude a planejar o conteúdo da primeira sessão do site que deverá conter um título uma pequena descrição e um botão de chamada de ação para falar de com um dos nossos especialistas Ok especifiquei pelo menos aquilo que ele vai precisar preencher nessa minha primeira sessão se

você tiver falando com um cliente é muito legal que por exemplo numa reunião que você tem ali de alinhamento com ele você já pegue direitinho qual que é o seu público alvo Qual que é a promessa da sua empresa quais são os seus diferenciais pergunta do negócio dessa pessoa se comunica bem com ela para você anotar todos esses pontos e trazer tudo isso pro chat GPT também quanto mais especificações ele tiver melhor vai ser a resposta que ele vai te entregar tá e mais satisfeito seu cliente vai ficar no final também porque ele vai falar

oh Caraca eu nem precisei escrever todo o conteúdo aqui pelo menos você já vai dar uma base praticamente entregue pronta para ele para ele poder trabalhar depois beleza e aí ele colocou Claro aqui está uma eu acho tão bonitinho quando ele fala claro com certeza tá aqui está uma sugestão para primeira sessão do seu site E aí ele colocou um título aqui ele colocou Valorize acessores acelerando o crescimento Empresarial não gostei muito dessa Primeira opção achei muito generiques colocou uma descrição aqui que mais pareceu um parágrafo né de sessão e depois um botão de ação

com converse com especialista gostei desse acho que já tá o suficiente mas aí como eu não especifiquei por exemplo o tamanho da descrição ele não considerou isso e me trouxe isso aqui tudo né aí eu falei Reescreva com as seguintes revisões o título não precisa ter o nome da empresa e eu quero que tenha uma frase mais persuasiva que cause um maior impacto a descrição precisa ter apenas uma frase aí com essas revisões ele já me entregou começou a me entregar um resultado mais legal ó colocou o título alavanque O sucesso do seu negócio com

especialistas em crescimento Empresarial já era um título bacana já Apesar de que eu não tinha gostado muito ainda e aí ele colocou aqui a descrição acelere o crescimento do seu negócio com estratégias inovadoras e resultados comprovados massa esse subtítulo eu gostei Bia como é que eu sei o que que o que que é um bom subtítulo o que que é um título ou não dá uma lida vê se tá de acordo com o briefing vê se tá de acordo com aquilo que você quer preencher e vai pedindo essas revisões de de acordo também tá gente

é como se você tivesse conversando com uma pessoa aqui você vai pedindo uma coisa às vezes ele entrega bom às vezes nem tanto você vai revisando e melhorando esse resultado aí eu pedi aqui ó me deu outras sugestões de títulos ele me deu várias acabou que eu gostei de uma delas eu nem me lembro qual que foi Deixa eu ver aqui ó eu coloquei acelere e Valorize consultoria financeira especializada para empresas aí foi Deixa eu ver aqui ver aqui acho que não foi nenhum desses aqui na verdade ó porque depois eu ainda coloquei aqui me

dê algumas sugestões de títulos com a palavra valorizo no meio Eu senti que fugiu um pouco do escopo Ali da palavra-chave que é Valorize que tá na logo da empresa né Aí ele já começou a me dar umas outras opções aqui ó acelere e Valorize consultoria financeira especializada para empresas aí eu meio que peguei esse título aqui e levei ali pro site tá Às vezes você pode mudar uma palavrinha ou outra pode aumentar ou diminuir um pouquinho com as suas próprias palavras ali para poder se ater ao tamanho que você quer ali dentro do seu

conteúdo também tá mas pelo menos só de você ter essa base para você você não tem que sentar ali na cadeira e escrever tudo do zero cara isso aqui é uma mão na roda que ajuda muito muito muito quem ainda utiliza luren ypson hoje em dia para poder preencher ali os textos fictícios do site cara para de fazer isso porque agora não precisa mais já tem uma ferramenta ali que faz tudo prontinho para você e assim gente hoje em dia é de extrema importância que você esteja atento a essas novas mudanças que você aproveite tudo

isso ao seu favor porque não tem como fugir mais as inteligências artificiais elas vieram para ficar mesmo E daqui pra frente é só evolução e uma evolução muito rápida então se você não tiver atento agora sobre Como que você pode fazer com que tudo isso que esteja acontecendo trabalha ao seu favor e não contra você contra o seu trabalho você vai ficar para trás e eu não desejo isso para absolutamente ninguém e inclusive né sobre esse assunto ainda se você já se imaginou liderando toda essa nova onda de de inovações né que tá rolando agora

na área de web design se liga no que eu vou falar aqui agora porque eu vou fazer um super evento gratuito sobre isso o evento a imersão 10k esse evento com certeza pode ser o seu ponto de partida sobre esse assunto porque lá nele eu vou mostrar todas essas novas oportunidades de se trabalhar com Web Design nessa nova era que nós estamos vivendo agora né E desmistificar também vários Tabu sobre EA mostrando não só como elas podem otimizar e acelerar o seu trabalho como também você pode usá-las ao seu próprio favor para criar experiências digitais

que Encantam que brilha os olhinhos ali dos seus clientes e é claro também né convertem mais projetos mais dinheirinho Oli pro bolso também então fica ligado não perca essa chance tá já nota aí direitinho porque esse evento vai rolar na semana dos dias 25 a 31 de Março e vai ser 100% online e gratuito para você aí ter acesso a todo esse conteúdo exclusivo e inédito aqui na escola de ses também é só clicar no link que tá aqui na descrição desse vídeo e fazer a sua inscrição na imersão o quanto antes Combinado então já

dá uma pausinha aí no vídeo clica aí rapidinho se inscreve e bora voltar aqui pro conteúdo bom e agora que a gente já viu como que o conteúdo foi construído inclusive Olha só tudo aquilo que o chat GPT foi gerando para não ficar muito desorganizado o que que eu fui fazendo também ó vou voltar aqui nos nossos materiais perceba que também tem esse documento aqui de cia da página né E aí tudo que ele foi me Ger ali que eu achei bacana eu fui colocando ó primeira sessão banner Inicial já tinha colocado aqui ó título

subtítulo CTA que era o que eu queria preencher né fui colocando todo esse conteúdo aqui certinho para saber exatamente aquilo que eu ia querer passar depois pro site só de ter essa organização aqui de todas as informações que ele me passou já facilitou demais a vida para eu só pegar isso aqui e depois montar a sessão em cima disso Beleza então fica aí uma diquinha de organização também esse documento você também tem acesso tá para você só copiar e colocar lá no seu projeto sem problema algum Então bora lá agora pra parte da construção dele

aqui né perceba que agora nós temos um contêiner com todos os itens na vertical um em cima ali do outro e aí pra gente conseguir montar isso eu vou clicar nesse maizinho aqui vou selecionar a opção de flexbox e vou colocar esse flexbox vertical aqui tá vamos selecionar isso aqui eu já vou vir aqui em avançado vou colocar um preenchimento aqui de 100 pixels em cima e 100 pixels embaixo vocês vão perceber bastante esse padrão de espaçamento aqui vou clicar aqui em atualizar E aí eu vou voltar aqui em layout e verificar algumas configurações aqui

da distribuição dos itens dentro desse nosso contêiner eu vou colocar aqui como eh coluna vertical PR os itens ficarem um embaixo do outro vou justificar todo esse conteúdo ao centro e alinhar os itens ao centro também tá então vamos deixar aqui desse jeito e agora vou clicar aqui para atualizar para não perder essas alterações vou vir aqui nos widgets e já vou arrastar as coisas que eu vou querer trazer para cá para estilizar cada uma tá vou pegar um texto aqui para essa partezinha inicial do acelere e Valorize e perceba que eu mantive esse frufru

aqui ó em todos os títulos tá vendo ó um título assim subdividido assim outro assim também acho que dá um ar de elegância bem bonitinho e a consistência também ajuda muito só não nesse CTA mas de qualquer maneira no em todo o restante tá seguindo esse mesmo padrão E aí beleza vou deixar esse texto aqui vou arrastar agora um widget de título Aqui para baixo dele Bora pegar um outro aqui de texto novamente vou pegar aqui editor de texto A gente já vai estilizar cada um deles tá isso aqui vai ficar aquela boniteza lá e

depois eu vou pegar aqui um botão pra gente estilizar também ok então já temos os nossos itens aqui agora bora mexer no conteúdo de cada um vou vir aqui nesse Primeiro vou colocar aqui acelere e Valorize Beleza já tenho aqui o Primeiro vou pegar aqui ó já vou aproveitar até para para pegar daqui mesmo desse conteúdo ó vou pegar essa próxima parte aqui do título e vou colocar nesse widget de título aqui tá vendo ó que caso essa seja sua primeira vez mexendo no elementor né cada um desses itens aqui dependendo daquilo que você estiver

mexendo vai ter eh Campos diferentes na aba de conteúdo e de estilo também para poder se adequar aquilo que você tá mexendo beleza ó o texto é de um jeito aqui parece tipo um wordzince vida já o título ele tem uma caixa mais simples de personalização cada item vai ser eh vai ser bem intuitivo porque só de você vê aqui você já sabe daquilo que se trata é bem tranquilo de entender mas de qualquer maneira cada um funciona de uma forma diferente e aí agora no subtítulo eu vou pegar ess esse textinho aqui ó chuf

do documento também vou vir aqui na descrição e já vou colar ele já pegou até o aqui para mim também o que já facilita um pouco o trabalho o GPT ele não delimitou nenhum eu fui lendo essas informações e de vez em quando eu fui colocando um outro para poder destacar certos pontos Chaves do texto isso ajuda com que as pessoas consigam escanear as informações depois de uma forma mais fácil também E aí OK ó vamos já colocar desse jeito aqui o CTA vai ser esse aqui ó eu troquei eu troquei o converse com Especialista

com falar com especialista mas fica seu critério Beleza então eu vou colocar aqui já vou clicar aqui ó na biblioteca de ícones também e vamos procurar aqui o ícone de WhatsApp e aí eu Bot então foi o mais diferentinho do que dos que a gente mexeu até agora olha só a gente tem aqui o texto desse botão que foi o que eu acabei de colocar a gente tem aqui o campo de link que é onde você vai colocar por exemplo o link do WhatsApp para poder ser direcionado para uma nova aba para ele ser direcionado

para uma nova aba Você vai clicar aqui em opções de link e vai colocar aqui para abrir uma nova janela Beleza caso você prefira se você quiser que abra na mesma página não precisa fazer isso aí aqui nesse Campo você substituir esse hashtag e coloca um link tá eu vou colocar um hashtag aqui só para ele virar realmente um linkzinho aqui clicável quando a gente colocar passar o mouse aqui em cima beleza mas aí você coloca o seu link aí certinho e agora a gente vai aqui pra parte da estilização de cada um desses itens

esse Primeiro vou clicar aqui nesse título vou vir aqui em estilo e aí aliás antes de tudo gente para não ficar grudado assim vamos fazer o seguinte ó vou vir aqui no nosso contêiner principal aqui em layout vou desvincular esses valores aqui e aqui no espaçamento em linha eu vou colocar aqui ó deixa eu ver não acho que 30 pixels ficou muito vou colocar aqui uns 20 pixels para cada um perceba que alguns elementos Ó tipo texto por exemplo ele já tem um preenchimento embaixo já padrão dele que a gente vai tirar para não ficar

desorganizado desse jeito assim ó cada um com um espaçamento diferente Ok então Ó vou clicar aqui no texto antes de tudo vou vir aqui em avançado vou zerar essa margem e vou colocar uma margem negativa aqui ó de menos 15 dessa forma ele vai pegar só a altura do nosso texto em si tá já vou fazer a mesma coisa com esse outro também vamos vir aqui deixar - 15 agora vou vir nesse aqui vamos vir aqui em estilo nessa estilização eu vou deixar essa mesma cor do texto aqui esse cinza mais clarinho aqui né aqui

na tipograf na na tipograf na tipografia eu vou colocar o tamanho de 20 pixels para ele para dar uma aumentadinha Vou colocar aqui transformação maiúscula também e e aqui ó em espaçamento da letra para dar aquele arzinho de elegância eu vou colocar aqui dois pixels de espaçamento né para ficar com mais cara de título ok aqui vou mexer só nisso mesmo vou deixar com peso 400 aqui nesse próximo título é eu vou vir aqui em estilo Inclusive eu vou já vir aqui em conteúdo e vou trocar ele para H1 tá isso aqui é bem importante

principalmente pro título principal pro o Google entender sobre o que que é que se trata o site esse aqui é o título tipo principal semanticamente pro Google não é em relação a tamanho nem nada é pro Google entender Tipo olha esse título aqui eu devo levar em consideração pro contexto desse site Ok então vou pegar aqui agora em estilo vou trocar essa cor aqui paraa Branca vou clicar aqui em tipografia Vou colocar aqui um tamanho de 45 para essa fonte ele deu uma quebra de linha aqui já vou centralizar esse texto também e eu também

vou colocar aqui ó uma altura de linha de vou trocar aqui para em a unidade de eh qual o nome disso gente unidade de medida aqui para em para ficar mais responsivo eu vou colocar aqui 1.3 mais ou menos para poder ter uma boa quebra de linha e aí ele ficou muito estendido né Não fica legal o título assim tipo a pessoa tem que ficar dançando aqui com a cabeça para ler de um lado pro outro então eu vou diminuir um pouco a largura desse contêiner aqui vou vir aqui no contêiner principal layout em vez

de 1200 aqui para esse caso eu vou colocar 800 tá E aí eu vou tentar variar entre isso 10000 e 800 no máximo para não ficar Aquele bando de de coisa assim desorganizada com grids diferentes Em Cada sessão mas já deu uma melhorada aqui já deu uma quebra melhor e agora esse último aqui ó vou vir aqui em estilo Vamos colocar aqui um tamanho de 18 vou centralizar esse texto também só para garantir E aqui nessa parte do para dar uma acendida nessa expressão eu vou vir aqui em conteúdo e só nessa parte aqui ó

eu vou selecionar esse termo vou clicar aqui para alternar a barra de ferramentas e vou alterar a a cor do texto nessa parte aqui eu vou colocar como branco e aí já deu uma boa diferença aqui no destaque né já tá tomando bastante forma agora só tá faltando o botão para isso ó a gente já colocou aqui as coisas no conteúdo vamos vir agora aqui em estilo para deixar esse botão bem chique eu vou clicar aqui em tipografia Vamos colocar um tamanho maior aqui de 18 para essa letra Vou colocar aqui ó um peso de

600 E aí deixa eu ver aqui vou colocar transformação maiúscula e beleza acho que já deu uma melhorada vou voltar rapidinho aqui em conteúdo e vou colocar um espaçamento desse ícone pro texto vou colocar pelo menos 15 e aí já dá uma espaçada Legal vamos voltar aqui em estilo e agora para mexer nessas cores não tá com contraste legal aqui então eu vou colocar um cinza escuro no texto agora dá para ler bem melhor né vamos vir aqui no tipo de plano de fundo e vamos colocar um degradê bem tranquilo ó vou clicar aqui em

Gradiente E aí a primeira cor eu vou deixar esse essa cor um pouco mais escura aqui o verde mais escuro e depois na segunda cor eu vou colocar essa cor de Realce com o verde mais claro eu também vou mudar o ângulo desse degradê vou trocar de e 180 para 270 é isso 280 né Quais que são os pontos do Círculo de 360º gente acho que é 280 né V colocar aqui 280 E aí pronto já ficou mais bonitinho assim vamos colocar um raio aqui na borda de cinco Pixel só para dar uma arredondada e

aqui no preenchimento eu vou desvincular esses valores e vou colocar 20 pixels em cima 60 na direita 20 pixels embaixo e 60 na esquerda assim ele já dá uma engordadinha e fica mais vistoso aqui na página também E aí ó aqui nesse nessa opção aqui de a passar o mouse no nosso Rover eu vou deixar tudo isso aqui como padrão porém eu vou adicionar uma animação aqui ó Tem vários tipos de animação olha só tem para crescer o botão que também é bem legal tem essas coisas assim de pulsar tá vendo tem umas bem esquisitas

assim também ó tipo Bounce enfim é sempre V se conter ali colocando alguma coisa que seja um pouco mais tranquila eu vou colocar esse float aqui os que eu mais gosto são grow e float tá E aí esse float ele vai fazer tipo assim ó uma subidinha com o botão que já fica bem legal e sempre que você tá mexendo com chamada de ação é bom você colocar um efeitinho tipo de troca de cor alguma movimentação pra pessoa entender que ali ela também pode fazer uma ação beleza e aí deixa eu ver agora eu só

vou aumentar um pouquinho o espaçamento desse botão porque acho que ele ficou um pouco colado com esse subtítulo aí então V vou vir aqui em margem e vou colocar um superior aqui deixa eu ver acho que muito vou colocar 10 e aí eu clico aqui fora para ver dou uma apertada no olho aqui para ver como é que estão os espaçamentos tá bem ok por último pra gente dar mais um chance pra chamada de ação eu vou fazer o seguinte em todos os botões do site ele vai ficar com um efeitinho tipo esse aqui ó

quando a pessoa carrega tá vendo ó o botão Ele carrega aqui também esse outro também sempre que tiver uma chamada de ação ele vai chegar assim com uma chegada Triunfal naquela sessão né isso aí vai chamar atenção também pro nosso CTA como é que a gente faz isso a gente vem aqui em avançado coloca aqui em efeitos de movimento e aqui na animação de entrada você tem vários tipos de animação novamente tem umas super cabulosas assim tipo chegar rodando I ah Inclusive eu tô no contêiner pelo amor de Deus Não façam isso tá é aqui

ó vou clicar aqui no botão vou vir aqui em avançado efeitos de movimento e aí mais uma vez eu gosto de umas que sejam um pouco mais leves também que acho que fica mais bacana e uma que eu gosto muito é essa fading up assim ó que é justamente esse efeito que a gente vai colocar mas você pode testar outras aí também se você quiser tá vou clicar aqui para atualizar e nosso banner tá quase pronto que que tá faltando o nosso preenchimento Aqui de baixo né Tipo ele tá um pouquinho maior aqui tá pegando

com header e também tem um background aqui de fundo também como é que a gente vai resolver isso vindo aqui no Nosso coner principal vou vir aqui em layout e vou colocar uma altura mínima aqui ó de 800 p para poder ficar de acordo com o background que já foi gerado para esse banner Aqui também tá então vou deixar esse background aqui e também para subir aqui pro header é antes de fazer isso na verdade vamos vir aqui em estilo e já vamos colocar esse background né para já deixar isso certinho vamos vir aqui no

tipo de plano de fundo e vamos selecionar essa opção aqui de imagem e eu vou selecionar essa imagem aqui do Banner Inicial essa aqui ó do BG sessão Inicial vamos selecionar ela já meio que encaixou certinho ó perceba que inclusive Ela já tem uma dimensão de 1920 que é o padrão ele de de banner tem vídeo sobre tamanhos de imagens para site aqui no canal também tá e também uma altura aqui de 800 pixis para poder ficar é pixis eu achava que era pixels é 800 pix para ficar de acordo com essa altura que a

gente acabou de colocar ali tá vou selecionar esse background vamos vir aqui em posição vou colocar ela centralizada vou deixar anexo padrão vou colocar para não repetir essa imagem e o tamanho da exibição aqui eu vou deixar como cobertura para ele pegar toda a nossa extensão mesmo vamos clicar aqui para atualizar E aí massa ó só tá faltando agora esse header integrar com ele né e o que que a gente vai fazer a gente vai vir aqui no nosso banner Inicial vamos vir aqui em avançado eu vou desvincular os valores da margem e eu vou

subir isso aqui até ele pegar todo o header aqui em cima inclusive ó a gente já vai resolver isso aqui ó tá vendo que a logo já sumiu Calma que a gente já vai resolver esse pipino tá vamos colocar aqui até ele cobrir toda extensão ali do nosso header acho que 110 pixels a menos tá bom E aí massa o nosso header já tá aqui né os menuzinho mas como é que a gente recupera os itens que ficaram por baixo nele sim o site Ele parece o 2D mas na verdade ele também tem profundidades 3D

ali tá é isso aqui que tá acontecendo é porque cada um desses elementos eles estão dentro de uma camada de profundidade então se eu coloco por exemplo uma profundidade zero para um elemento e um para um outro elemento esse que tem um vai ficar na frente dele então o que que a gente vai fazer a gente vai acessar essas camadas clicando com o botão direito acessando aqui em navegador E aí perceba que a gente já tem esses dois contêiners aqui né Tanto do nosso header como também do nosso banner Inicial que a gente acabou de

de de de Ai meu Deus fugiu a palavra de fazer aqui de desenvolver e para inclusive ficar um pouquinho mais organizado eu vou clicar duas vezes nessas camadas aqui vou colocar banner Inicial pra gente saber do que que é cada uma né e aqui eu vou colocar header ou cabeçalho o que você preferir tá E aqui no header agora vou clicar nessa opção vamos vir aqui em avançado e vamos colocar um z index aqui que é o a profundidade da camada dele como um e agora ele vai ficar é acima do nosso banner Inicial ou

seja o banner inicial Tá aqui e o header tá aqui na frente dele beleza e sempre que você tiver dificuldade de acessar qualquer contêiner ou item dentro do seu site lembra disso também tá clicar com o botão direito navegador E aí você vem aqui e acessa as camadas do seu site também Você pode organizar da forma que você quiser aqui eu senti agora que esse espaçamento tá bem maior que esse né porque tá 100 em cima 100 embaixo Mas a gente tem esse header aqui com uma margem negativa então o que que eu vou fazer

eu vou vir aqui no preenchimento do nosso cabeçalho ó que Inclusive acho que a gente já tá aqui nesse no nosso cabeçalho não gente do nosso banner que Inclusive a gente já tá aqui com ele e vou aumentar esse preenchimento aqui em cima eu vou colocar pelo menos 150 aqui nele deixa eu ver ou talvez 200 deixa eu ver aqui 200 mesmo que ele fica mais e Centralizado aqui nesse nesse nosso banner ó se eu eh tirar aqui a visualização do lado perceba que ele já tá bem mais centralizados já temos o nosso bander Inicial

montadinho aqui para poder continuar com o nosso site esse primeiro banner aqui eu dei um pouco mais de explicação mais detalhes para vocês mas a partir desse segundo momento agora que vocês já estão começando a se familiarizar com a ferramenta eu já vou começar a acelerar um pouco o ritmo dessas explicações Beleza então bora lá pra segunda parte do site que é essa parte aqui de sobre que parece complicada Mas vocês vão ver que é tranquilo também da gente fazer para essa segunda sessão aqui vamos só dar uma revisada nela né olha só a gente

vai ter aqui três diferenciais tá para deixar assim de forma objetiva PR as pessoas verem tem uma imagenzinha E aí nós temos um título aqui uma descrição um pouco maior e um botão novamente aqui de chamada de ação Ok então como é que a gente fez como é que eu fiz isso ali dentro do GPT novamente a mesma lógica tá gente ó eu vim aqui ó por exemplo agora para a sessão de quem somos gostaria de um texto institucional pequeno destacando como a nossa empresa pode ajudar eh as empresas né escreva para mim um título

uma descrição uma frase pequena para chamada de ação e aí mais uma vez se você especificar mais sobre isso né se você por exemplo o cliente te der uma um direcionamento de como que ele quer expressar por exemplo a linguagem da empresa dele pontos específicos ali da empresa dele que o GPT não vai saber dizer a não ser que você passe essa informação você descreve isso aqui tudo direitinho que aí ele vai gerar um texto mais fidedigno para você também tá mas ele já colocou aqui ó um negócio bem legal conheça conheça Valorize acessores sua

parceira estratégica para o crescimento Empresarial fez uma descrição Zinha Bacana aqui que eu não vou ler tudo mas vocês TM acesso à conversa aqui uma chamada de ação também porém e quando eu vi isso aqui eu achei que o título tinha ficado um pouco grande e a descrição um pouco curta eu falei adicione mais umas duas frases a essa descrição e deixe o título mais curto ele deu uma reduzida aqui e aumentou também essa descrição Beleza você pode ir revisando eh da forma que você quiser por último como eu sabia que eu queria colocar uns

uns diferenciais aqui do lado também eu falei destaque três tópicos curtos de diferenciais para empresa e aí ele colocou uns diferenciais aqui inclusive com um contexto para cada um mas para não ficar um negócio muito grande eu aproveitei só essa parte eh essa primeira parte aqui e coloquei nesses diferenciais aqui do lado beleza lembrando mais uma vez que tudo que eu achava ali que ia ficando bom eu pegava essas informações e trazia aqui para esse o documento para poder deixar mais claro na hora de passar pra implementação do site Ok então dando um overview aqui

bora lá passar agora pra implementação vamos clicar aqui mais uma vez nesse mais pra gente adicionar um contêiner vou clicar aqui em flexbox e vou selecionar agora ó essa opção aqui já de duas Coluninha tá perceba que tem vários templates aqui a gente vai usar esse aqui vamos clicar nele vou vir aqui em avançado Vamos colocar aqui um preenchimento em cima de 100 e 100 embaixo também para seguir esse padrão Ok E aí agora nós temos um contêiner com dois contêiners dentro dele para quem já mexe um pouco mais com flexbox sabe que nem sempre

a gente precisa utilizar contêiners dentro de contêiners justamente porque a ideia do flexbox é a gente otimizar a quantidade de itens que a gente coloca dentro da nossa página no aulão sobre isso aqui no canal você tem acesso a todas essas explicações beleza mas para esse caso aqui vai ser mais tranquilo dessa forma porque a gente tem essa estrutura beleza e por isso que eu vou usar desse jeito aqui e aí eh vindo primeiro para essa parte aqui do nosso texto antes de vir para essa outra aqui nós vamos reaproveitar várias coisas que a gente

já usou aqui antes porém estilizando de uma forma um pouco diferente então antes de trazer os itens para cá eu vou clicar nesse contêiner Vou colocar aqui os itens de dentro de forma centralizada tá para ficar no centro desse contêiner e agora eu vou pegar ó vou clicar com o botão direito nesse primeiro item vou copiar trazer para cá ou clicar com o botão direito colar fazer a mesma coisa com o título vamos colar aqui pegar a mesma coisa aqui com o texto tá tudo desorganizado aqui né mas a gente já vai arrumar isso Ó

vou copiar aqui o botão e vou trazer isso para cá agora é só a gente dar uma reorganizada esse primeiro aqui ó eu vou vir aqui em estilo vou deixar ele com alinhamento à esquerda mesmo só para garantir vamos vir aqui na tipografia eu vou diminuir isso aqui para 18 Ok já vai ficar assim Acho que já tá ótimo desse jeito vamos vir agora aqui nesse título vou vir aqui em estilo vou colocar o alinhamento aqui à esquerda para poder fazer sentido de acordo com o contexto dessa sessão vamos vir aqui em tipografia e dar

uma boa diminuída nele ó acho que eu vou colocar aqui 35 o título principal tava 45 agora 35 aqui para dar essa hierarquia aqui de tamanho também né vamos vir aqui em conteúdo inclusive já colocar ele aqui como H2 tá tá para o Google não confundir H1 só pode ter um na página H2 H3 H4 pode ter mais de um também tá isso tudo é questão semântica tá Não é questão de tamanho não é tipo como se fosse o Sumário de um livro Você tem o nome do livro que é o seu título principal depois

você tem os nomes dos Capítulos os nomes dos subcapítulos ali e assim por diante Ok E aí agora aqui no texto também ó vamos vir aqui em estilo alinhar aqui à esquerda e Vamos diminuir o tamanho dele também vou colocar um tamanho aqui de 16 pixels para esse e eh essa descrição aqui bora vir aqui rapidinho no botão Vamos mudar aqui ó em estilo o tamanho desse texto Vamos colocar aqui 16 também e aqui no preenchimento a gente vai desvincular esses valores aliás é tava desvinculado né Vamos desvincular tudo e vamos colocar aqui ó à

direita agora 40 e 40 em vez de 60 para dar uma diminuida agora é uma questão de trocar os conteúdos antes disso vamos só clicar aqui rapidão no cont e vamos colocar um espaçamento Entre Um item e outro para não ficar tudo achatado assim né porque espaçamento é vida pro design gente olha só chega dar um alívio quando a gente vê as coisas se espaçando né Vamos deixar aqui uns 20 acho que já ficou legal assim e agora sim Bora trocar aqui pelos conteúdos que a gente pegou do GPT vamos vir aqui ó no título

vou colocar descubra a valorize acessores nessa partezinha aqui de cima é um título em cima do título beleza vamos pegar aqui esse restante pro próximo título né ó rapidão né Depois que a gente já estiliza algumas coisas a gente já começa a reaproveitar muita coisa também gente o processo fica ainda mais simples vamos vir aqui em conteúdo vamos trocar esse conteúdo aqui tudo que tiver né vou vir aqui para poder seguir aquele padrãozinho vou pegar isso vou deixar aqui como Branco vamos pegar aqui também ó e fica tão bonitinho quando eu ten uns negocinhos aqui

em para poder dar uma hierarquia E aí tipo assim a pessoa tá passando pela página rapidamente ela tipo já escaneia essa essas coisas que estão em destaque né É claro que você precisa selecionar bem isso mas Isso facilita bastante a leitura das pessoas e agora aqui pro botão vou pegar essa cópia aqui ó Quero alavancar os resultados do meu negócio vamos vir aqui nessa nossa página é eu vou deixar o ícone de WhatsApp só quando no botão tiver alguma coisa tipo falar conversar com o especialista Tá mesmo que seja pro mesmo link para poder fazer

mais sentido eu vou trocar aqui o texto eu vou tirar desses outros o botão de WhatsApp ele pode levar pro WhatsApp também mas é só porque eu quero deixar mais específico aqui com essa essa fala mais de promessa pra pessoa tá então vamos deixar assim ó já tá bem do jeito aqui do outro site Beleza tranquilinho a gente fez bem rapidão e agora bora para essa outra parte aqui e para essa outra parte aqui desse banner do dessa sessão do quem somos primeiro né a gente vai vir aqui no nosso contêiner vai colocar também tudo

alinhado aqui ao centro bonitinho só isso aqui a gente vai mexer aqui eu vou selecionar aqui os widgets vou trazer aqui um widget de imagem e eu também já vou trazer aqui um de lista de ícones ó vamos arrastar para cá ainda não tem nada a ver com aquilo né mas vai ficar bonitinho você vai ver vamos clicar aqui agora nesse nosso Edit de imagem Vamos colocar aqui a resolução completa dessa imagem e eu vou clicar aqui e selecionar a mídia que a gente trouxe aqui para essa sessão é bem essa aqui da mãozinha inclusive

curiosidade essa imagem aqui ela foi gerada por Inteligência Artificial tá Não parece mas ela foi gerada e pras outras eu acabei pegando de banco de imagem mesmo mais saiba também que uma forma muito boa de aproveitar as inteligências artificiais é através da geração de imagens a gente tem por exemplo o Leonardo ai tem o mid Journey tem o lexica tem um monte de ferramentas legais no mercado para isso é legal você depois dar uma testada também se vocês inclusive acharem interessante que depois eu trago um outro vídeo só sobre essa parte aqui de geração de

imagens aplicando na prática aqui no site deixa aí nos comentários que eu vou estudar aí a possibilidade de trazer esse material para vocês depois também tá mas aqui ó fica a dica Então vamos trazer essa imagem para cá agora aqui em estilo vou colocar um raio da borda para essa imagem aqui de cinco pi Opa 55 não né acho que eu vou colocar uns 10 pixels aqui para ela ou talvez cinco deixa eu ver qual que fica melhor não acho que vou colocar 10 aqui vou colocar uma bordinha fru fru aqui para ela também ó

vamos vir aqui em sólido Vamos colocar uma lar ura da borda aqui de um pixel e vou colocar essa corzinha aqui de borda para ela acho que não fez muita diferença deixa eu ver então eu vou colocar aquele verde escuro Beleza vou deixar esse verde escuro aqui mesmo e aí para ela descolada aqui eu vou fazer o seguinte ó eu vou vir aqui em avançado Vamos colocar uma margem externa né um espaçamento externo a esse elemento eu vou e mudar a unidade de medida aqui paraa porcentagem e eu vou fazer o seguinte ó eu quero

que isso aqui é o qu gente é direito né Eu quero que à direita ele pegue aqui 30% a menos ele dê 30% de espaçamento beleza e aí imagenzinha já veio para cá por que que eu tô fazendo isso porque eu quero fazer o contrário com esse outro item para poder dar esse efeito aqui que é super chique tá isso aqui já é um nível mais um pouquinho intermediário e vocês já estão vendo aqui em primeira mão como fazer esse tipo de coisa então ó já vamos pegar agora esse outro aqui dos diferenciais Bora pegar

esses diferenciais que estão aqui no conteúdo já vou colocar aqui ó na listinha tá vendo esse conteúdo aqui vamos já tirar esses outros já vou colocar o item certo aqui ó perceba que todos eles têm um Icone Zinho né então você pode tanto trazer um ícone de fora como também você pode importar aqui da própria biblioteca de ícones do elemento a gente vai utilizar daqui mesmo eu vou procurar aqui por Arrow que é Seta em inglês aqui você precisa procurar em inglês tá Vou colocar aqui Arrow e vou pegar essa setinha aqui bonitinha beleza e

aí agora agora eu já vou duplicar com o ícone certo vou duplicar esse item aqui vamos pegar o outro diferencial inovação estratégica Bora lá vamos duplicar aqui de novo vamos pegar aqui resultados comprovados e massa já temos aqui os nossos diferenciais agora é só estilizar antes disso ó também já quero definir esse fundo aqui para poder fazer com que isso aqui Fique dentro de um quadrinho olhando a primeira vista parece que isso aqui é um contêiner mas a gente consegue mexer no fundo e na borda dos itens em específico também Isso facilita para que a

gente não precise ficar colocando tanto contêiner assim na página Beleza então ó para isso eu vou vir aqui em avançado vamos vir aqui ó em plano de fundo e eu já vou colocar aquele verdinho clássico aqui ó vou colocar esse Verde aqui no fundo vamos vir aqui em borda e vamos colocar também um raio de 10 pixels para essa borda aqui e eu vou colocar aqui também ó uma bordinha sólida de um pixel na corzinha Verde um pouco mais claro ok já está ficando legal E aí agora eu já vou mexer aqui nos espaçamentos Ok

ó vamos ver aqui em layout primeiro no preenchimento ó vou desvincular esses valores aqui aliás eu vou vincular tudo vou colocar vou testar colocar 50 aqui ó já deu um preenchimento em volta né E aí acho que é acho que já tá ok dessa forma aqui só que aqui na margem ó novamente eu vou trocar a unidade de medida para porcentagem E aí agora vou fazer o contrário ó à esquerda eu quero colocar 30% eu quero descolar dessa borda aqui também ó Então vou colocar tipo na direita deixa eu ver uns 5% não acho que

na verdade um pouco mais vou colocar aqui uns 10% massa já já deu um efeito legal e eu também vou subir um pouquinho aqui para sobrepor uma imagem na outra ó vamos subir aqui um pouquinho vou colocar aqui 5% a menos e ele já deu uma subidinha quando a gente deu essa subidinha ele mudou aqui um pouquinho né a altura tanto de cima como de baixo e aí a gente consegue resolver isso remodelando aqui os espaçamentos ó por exemplo aqui no superior que tá com muito eu vou colocar tipo 40 e aqui no inferior eu

vou colocar 60 e aí já deu uma melhoradinha aí início tá é um bugzinho do do próprio elementor aqui mesmo desse widgit mas a gente consegue contornar essa situação Massa agora é hora da estilização dos próprios itens aqui dentro né Vamos fazer o seguinte ó e vamos colocar um espaço entre esses itens Então vou aumentar aqui um pouquinho vamos colocar aqui um espaço de 10 entre eles aqui no ícone eu vou colocar uma cor que de pra gente enxergar Então vou colocar esse Verde um pouco mais claro que fica discreto mas ao mesmo tempo fica

legal Vamos tentar aumentar aqui para 20 com massa e aqui na parte do texto a gente vai clicar aqui em tipografia eu vou aumentar esse peso aqui para 600 e eu vou trocar essa cor aqui para esse cinza escuro para poder ficar mais fácil de ler e Prontinho Olha só rapidão a gente tem essa sessão aqui pronta antes de finalizar eu só vou vir aqui no contêiner principal que eu percebi que eu não mudei aqui a estilização dele vamos vir aqui no estilo eu vou trocar a cor dele por esse cinza médio aqui ó para

dar um destaque entre um e outro tá vendo ó que é uma diferença bem bem discreta mas ao mesmo tempo que dá um Tchan legal aqui de um cinza pro outro dá essa Separação das sessões E além disso também eu vou colocar uma bordinha aqui frufru que eu sempre adoro um fru fruin então ó vamos vir aqui no contêiner principal borda Vamos colocar aqui um tipo de borda sólida eu vou colocar aqui uma largura de um pixel para essa borda aliás eu vou desvincular esses valores aqui vou colocar um pixel só em cima e outro

Pixel emb baixo e aqui na cor da borda a gente vai utilizar essa última corzinha aqui e aí clicando fora Dá para ver que tem um l uma leve bordinha ali fazendo aquela linha o que dá um frufru extra aqui para essa sessão vamos clicar aqui em atualizar e olha só inclusive ó a gente pode até clicar aqui no olhinho e pré-visualizar o nosso site Olha só como já tá ficando chique gente parabéns hein já chegou até a segunda sessão bora continuar então para no perdeu o ritmo bom gente essa próxima sessão aqui é mais

tranquila ainda tá ó Bora dar uma olhadinha em como que ela é aqui é a parte dos serviços em si né então a gente tem esse título aqui tem esses cards também com cada serviço perceba que cada um desses cards aqui também são chamadas de ação porque eles também são clicáveis e a pessoa pode ir para um link externo da mesma forma que esse botão aqui para ter também esse reforço tá então toda essa página aqui foi pensada para ter chamada de ação distribuída em todo canto clicáveis em todo canto também e se o objetivo

suficiente da pessoa conseguir escanear aquela situação Aquela aquele conteúdo ali pegar a informação que ela precisa e entrar em contato com a empresa Beleza então bora fazer essa estrutur aqui agora em relação ao conteúdo foi o mesmo processo que eu tenho falado até Então olha só aqui ó na parte de serviços eu coloquei preciso de um título curto e chamativo com a palavra soluções o conteúdo para seis cards de serviço contendo o nome do serviço mais uma frase frase que descreve esse serviço de uma forma bem objetiva e uma frase curta que faça sentido com

o contexto dessa sessão para o CTA é claro que aqui eu tô falando de um projeto fictício né então eu meio que pedi é meio que um quadro branco assim pro pro pro GPT trabalhar em cima mas sendo para um projeto real eu vou pegar direitinho o nome de cada serviço o que que é que o cliente quer mais ou menos expressar em cada um deles e vou deixar mais especificado pro GPT né porque não é o GPT que vai dizer quais são os serviços que a empresa presta ao contrário aí você descreve essas coisas

direitinho e pede pro GPT te ajudar em relação a isso tá e depois eu fui preenchendo aqui o documento da mesma maneira que foi nos outros casos beleza mas aqui ó agora pra parte da implementação vou fechar essa página aqui para não confundir nós vamos novamente clicar nesse maizinho aqui eu vou selecionar o flexbox container Bia quando é que você vai usar aquele Grid ali daqui a pouco espera só um pouquinho eu vou selecionar essa primeira opção do flexbox aqui vertical pro nosso título vamos selecionar isso aqui já vou vir aqui em avançado vou colocar

aquele nosso espaçamento padrão ali de 100 pixels em cima e embaixo Bia posso usar outro número posso usar 80 posso usar 120 posso usar 90 pode tá a única coisa que eu recomendo é que você não deixa um valor nem muito baixo e nem muito alto também para não dar uma estranheza naquele espaçamento Porém esse respiro aqui ele já é bem padrãozinho de dar uma boa é uma boa sensação pra pessoa que tá vendo aqui o conteúdo da p E aí aqui em layout nós vamos deixar aqui tudo Centralizado Ok e acho que a princípio

eu vou mexer só nisso aqui qualquer coisa a gente volta e mexe aqui nas configurações tá vamos clicar aqui em atualizar E aí para aproveitar essas eh essas estilizações que a gente já fez aqui em cima eu vou novamente clicar com o botão direito nesse título aqui vou copiar o título de cima né vou colar aqui vou fazer a mesma coisa com esse outro título aqui ó e eu já tô copiando desse aqui porque esse título aqui faz muito mais sentido de estilização do que esse daqui de cima né em relação a tamanho e tudo

mais então já tô pegando dessa sessão aqui e aí é agora eu vou trocar aliás eu vou vir aqui no no no nosso contêiner para poder dar um espaçamento geral vamos desvincular esse valor aqui eu vou colocar 20 de espaçamento também e agora vou vir aqui no conteúdo e já vou pegar o título que a gente precisa colocar aqui ó vou colocar nossos serviços Vou Colocar assim nossos serviços e embaixo eu vou colocar soluções sobre medida para seu sucesso Empresarial aqui pronto já tá bem legal e o meu que não gostei muito de como que

esse título ficou muito estendido pela são tá legal assim mas acho que ele ficaria melhor com uma quebra Zinha então o que que eu vou fazer eu não vou colocar aquele 800 igual eu fiz aqui nessa sessão Inicial porque eu não quero que os serviços ó tá vendo aqui tá quebradinho eu não quero que os serviços fiquem achatados também eu quero que eles peguem os 1200 pixels mas aí como é que eu faço para esse aqui ficar menor eu vou vir aqui em avançado nesse próprio item aqui vou clicar aqui em largura selecionar essa opção

de personalizado e eu vou diminuir a quebra aqui até o ponto que eu quero ó por exemplo eu quero aqui na faixa de uns eu quero aqui 40 vou colocar 40 beleza Tá com uma quebra legal e agora eu vou vir aqui em estilo e vou centralizar esse título também tá vendo ó já ficou com uma quebra bem bonitinha aqui vou aumentar um pouco esse espaçamento embaixo também tá vamos colocar aqui um pading de 20 pixels porque eu quero que ele fique um pouco mais espaçados dos cards de serviço que a gente vai colocar aqui

embaixo e agora nós vamos fazer Justamente esse cardz inho aqui ó esse Grid aqui de serviços de uma forma bem simplificada justamente utilizando agora o Grid do elemento então ó a gente tá utilizando esse contêiner aqui externo beleza e para fazer esse Grid eu vou arrastar um novo contêiner para cá Bia eu consigo fazer isso que a gente vai fazer agora com flexbox também sim inclusive no aulão que tem aqui no canal você vê um exemplo desse bem próximo a esse inclusive na prática aqui mas eu vou usar o Grid aqui para vocês verem Também

o tanto que é simples tá e você pode selecionar um contêiner e colocar ele como Grid ou então você já pode colocar aqui como grade eu vou até arrastar já esse grade para cá e ele já vai formar uma grade zinha aqui para mim tá E aí como é que funciona esse Grid gente a gente tem aqui ó essas linhazinha um contêiner com seis contêiners dentro dele mas na verdade não é nada disso Olha só se a gente clica aqui no navegador igual eu mostrei para vocês aquela hora e eu seleciono aqui ó a camada

de grade perceba que não tem nada dentro dela não tem nenhum contêiner tá ele faz essa subdivisões esses grids imaginários aqui e a gente distribui os conteúdos dentro disso aqui de uma forma super simplificada beleza Vocês vão ver isso aqui agora ó por exemplo se eu colocar um título aqui e depois eu ar arrar um outro widget para cá ou eu arrastar uma imagem ele já foi pro outro lado se eu arrastar um editor de texto ele já foi pro outro lado também se eu arrastar um vídeo para cá ele já foi para cá também

e assim eu consigo ir montando um Grid de conteúdo tá vou dar um Ctrl Z aqui rapidão pra gente voltar mas o que eu quero é arrastado é nada disso aqui n Na verdade eu vou colocar aqueles cards de serviço mesmo E para isso Ten o wiet aqui no elemento que é muito bom para esse tipo de coisa que o nome dele é Call to Action esse aqui ó chamada para Então vamos arrastar esse cardz inho para cá E aí primeiro eu vou colocar o conteúdo e vou estilizar cada um desses cards e depois a

gente volta aqui no nosso Grid para estilizar esses espaçamentos direitinho Beleza então bora lá ó primeiro a skin desse Card aqui tem essa opção que também é bem bacana E tem essa outra cover aqui tá eu vou nessa primeira opção para poder ficar mais de acordo com esse modelo que já fica bem legal também e nesse Card aqui a gente vai fazer o seguinte ó aqui nessa parte do conteúdo primeiro nós vamos escolher a imagem desse Card Então já vou pegar um dos serviços aqui deixa eu ver qual que é o primeiro é esse aqui

de análise financeira com a pessoa mostrando ali o negocinho Então vamos selecionar esse aqui eu vou colocar aqui ó a resolução da imagem como completo e aqui no conteúdo a gente vai pegar a cópia do documento aqui ó vamos vir aqui nos serviços vamos pegar aqui cadê cadê esse aqui vamos pegar aqui o primeiro título que é análise financeira Vamos colocar aqui vamos colocar essa tag também como H3 já que a gente já tem o H1 e o H2 de nível né agora o H3 e agora ó vamos pegar essa descrição Zinha e colocar aqui

embaixo beleza eu não vou colocar botão nela você pode deixar se quiser tá mas eu vou colocar na verdade todo o Card como clicável e o botão embaixo igual eu mostrei para vocês e aí olha só a gente pode ter Pode colocar um link aqui tá você pode não colocar também se você preferir mas eu vou colocar um hashtag aqui só para você ver que ele já fica clicável tá vendo e aí você pode colocar tanto só no Bot botão o que não faz sentido para esse caso aqui porque a gente nem tem botão né

então no fim das contas a pessoa não vai conseguir clicar ou então em todo o Card também E aí dessa forma já fica tudo clicável é mais fácil da pessoa selecionar aí tem uma um destaque aqui que a gente não vai utilizar aqui ó é esse destaque Zinho aqui em cima beleza mas Além disso também aqui no estilo nós temos essa opção aqui de box que a gente não vai mexer em nada deixar tudo como padrão aqui em conteúdo a gente vai pegar a parte aqui da tipografia do título E aí ó eu vou colocar

aqui mais ou menos deixa eu ver o tamanho 20 acho que fica muito pequeno Vou colocar aqui 22 vamos deixar um peso aqui de 600 vou deixar transformação maiúsculo tudo aliás padrão aqui vou deixar todo o resto assim aqui na parte da descrição eu vou dar uma diminuída nesse tamanho aqui vou colocar Opa diminuída de 15 pixels aqui acho que assim fica um pouco melhor e deixa eu ver aqui ó a parte do das cores aqui embaixo ó vou colocar um background com a cor essa cinza média para dar um destaque em relação ao fundo

aqui a gente ainda vai colocar um background aqui para melhorar isso aqui também tá aqui no título eu vou colocar esse verdinho mais claro e a descrição eu vou deixar esse cinza mais claro Aqui também tá vendo ó já tá dando uma melhorada show Além disso também ó aqui nos efeitos de movimento Você pode trocar essa animação se você quiser ó tipo por exemplo a movimentação da imagem aqui ó eu vou deixar naquele padrão mesmo acho que esse zoomin aqui que fica bem legal E aqui nessa parte da da sombra em volta do cardz inho

aqui também ó na na opção do Rover quando a pessoa passar o mouse em cima aqui ó Nessa opção aqui eu vou colocar também um pequeno brilho nessa imagem eu vou clicar aqui em filtro CSS e vou aumentar acho que 10 pontinhos aqui no brilho dela não fez tanta diferença assim deixa eu aumentar um pouquinho mais ó acho que assim já ficou um pouquinho melhor é só um frufru inho mesmo E além disso também aqui na aba de avançado eu vou vir aqui em borda vou colocar o um raio de borda aqui de 20 pixels

nas laterais vamos clicar aqui no tipo de borda vou colocar como sólido um pixel vou colocar essa corzinha de borda aqui ó e aí quando a gente clica aqui fora já dá para ver uma pequena delimitada Nas extremidades o que melhora a visualização E além disso também quando a pessoa passar o mouse eu quero que ela faça esse efeito neon aqui tá vendo ó dessa sombrinha acho que ficou até muito delimitado eu vou deixar um pouco mais discreto Então vamos vir aqui na cor da sombra da Caixa eu vou pegar esse verdinho aqui ó vamos

só voltar aqui pegar das cores globais deixa eu vir aqui em título vou pegar esse mesmo verdinho aqui vou voltar aqui na borda E aí aqui na sombra ao passar o mouse eu vou colocar essa cor desse Verde aqui vou deixar ele quase transparente bem aqui ó tá vendo vou mexendo a opacidade já dá para ver uma diferença deixa eu ver deixa eu colocar assim para conseguir ver melhor que ainda não tá dando para ver vamos dar uma espalhada Nisse aqui ó deixa eu colocar aqui 10 para ver se ele aí ó já começou a

aparecer tá vendo vamos dar uma espalhadinho aqui aqui ó de 15 Vamos colocar um pouco para na vertical isso aqui você vai mexendo um pouco no olhômetro e também aqui eu vou dar uma boa espalhada vou dar uma desfocados Vou colocar aqui opa vou colocar aqui 15 e vou colocar aqui cinco ó deu uma uma espalhadinho aqui deixa eu colocar aqui vou dar uma desfocada aqui também pronto e agora eu vou tirar bast aqui essa opacidade deixar bem de leve aqui tá vendo isso aqui é muito no olhômetro tá gente eu aconselho bastante que vocês

deem uma olhadinha em referências por aí porque quando a gente coloca umas sombras muito delimitadas não fica muito bom tá então sempre Tente fazer ali o mais discreto possível e normalmente mais nesses efeitos assim de Rover então algo bem pequenininho mesmo para poder ficar legal Vamos clicar agora aqui para atualizar e beleza o nosso Card aqui ele meio que tá pronto e agora que ele já tá estilizado eu vou clicar aqui com o botão direito e e vou duplicar esse item ó vou clicar para duplicar até ter seis cards aqui desse mesmo estilo tá tudo

grudadinho né E como é que a gente resolve aqui essa situação a gente clica no nosso Grid vem aqui ó nessa parte de espaçamentos eu vou colocar um espaçamento aqui de 20 pixels entre cada um deixa eu até aumentar um pouquinho acho que eu vou colocar 30 e aí ficou um pouquinho melhor agora beleza inclusive ó só dando overview aqui para vocês aqui nós temos né de uma forma bem simples bem didática a parte aqui das colunas e das Linhas basicamente ele tá falando aqui ó esse aqui é um Grid de três colunas e duas

linhas e se eu quiser diferente se eu quiser quatro colunas por exemplo ó Eu só coloco aqui e ele faz eu quero duas colunas ele faz isso também e os itens eles vão se adequando eu posso inclusive colocar personalizado aqui ó não vou entrar em muitos detalhes sobre isso mas olha só eu posso por exemplo colocar uma fração duas frações aqui e mais uma fração aqui na na do outro lado tá vendo ó aí eu fico tipo com 1/4 do meu contêiner aqui para essa coluna dois quartos para essa outra aqui e um quarto de

novo para essa né fração é importante da gente entender então ó é dá para você brincar bastante aqui mas eu vou manter o padrãozinho aqui mesmo ó de FR e eu vou colocar aqui três colunas e duas linhas inclusive se você tiver interesse num vídeo mais completo tipo um aulão sobre Grid deixa aqui nos comentários também que aí eu preparo o material sobre isso tá assim como eu já fiz do flexbox aí eu posso trazer o do Grid aqui também ok então ó estamos com os nossos cardz inhos aqui e agora é mamão com açúcar

gente a gente só vai vir aqui em cada um desses cards e vai trocar a imagem o conteúdo de cada uma delas de acordo com o nosso documento então Ó o próximo aqui é essa otimização de processos vou pegar aqui esse essa imagenzinha aqui ó beleza eu já vou trocar todas as imagens para ficar com isso certinho o próximo é estratégia de investimento vamos lá vamos colocar aqui o outro aqui é é consultoria tributária e gestão de riscos Então vamos clicar aqui na imagem consultoria tributária Gestão de Risco Lembrando que todas as imagens foram tiradas

de banco de imagem gratuito da internet tá só de acordo com o contexto aqui de cada Card você pode usar ícones também se você preferir e o outro aqui deixa eu ver análise é análise financeira não né plano de negócio então vamos colocar aqui cadê esse pronto todas as imagens já estão trocadas e agora bora pro conteúdo vamos lá ó deixa eu pegar aqui o próximo conteúdo vamos vir aqui ó eu vou trocar de um E aí você dá uma pausinha aí nesse vídeo e troca de todos os outros também tá porque senão a gente

vai aumentar muito a duração aqui do vídeo com coisinha besta então ó tô trocando aqui o título e tô trocando o conteúdo bem tranquilo né vou clicar aqui para atualizar dá uma olhadinha aqui ó eu vou trocar agora todos os conteúdos você dá uma pausa aí faz a mesma coisa e a gente se vê pro no próximo passo aqui bora lá Prontinho no passe de mágica eu já tenho todos esses conteúdos aqui tá vou clicar aqui em atualizar e agora o próximo item vai ser o nosso botão que vai ser super simples também ó vou

clicar aqui com o botão direito copiar esse item aqui vamos colar aqui ó colar aqui embaixo e ó perceba que ele ficou aqui dentro do Grid né não é o que a gente quer eu vou excluir ele aqui e vou fazer o seguinte ó vou clicar aqui no nosso título com o botão direito eu vou clicar em colar ele ficou aqui embaixo e agora eu vou clicar aqui em navegador tá vendo vou Minimizar essa grade aqui e vou arrastar esse botão aqui para baixo dela às vezes é meio chatinho tá de mexer nessas camadas do

elemento mas fazendo essas movimentações zinhas Assim entre navegador e os itens aqui na tela a gente consegue remediar essa situação Deixa eu só dar uma olhadinha aqui nos espaçamentos no geral vou clicar aqui fora apertar o olho ver como é que tá acho que tá bacana ó vou só aumentar um pouquinho esse espaçamento aqui em cima vou colocar uns 25 e aqui também nesse botão vou aumentar pelo menos para uns 20 para ficar um pouco mais espaçado beleza agora tá ótimo aqui dando esse efeitinho e tudo mais né E aí vou trocar aqui a c

desse botão também eu vou colocar quero impulsionar meu negócio para o próximo nível e é sempre legal você colocar um ctas de acordo com o contexto da sua sessão para parecer uma conversa mesmo com a pessoa Beleza então ok ó já tá ficando F hein já estamos mais indo pra reta final agora da página Meus parabéns então dito isso bora aqui então Ó pra próxima sessão que é a de depoimentos só que antes eu acabei de perceber que eu quase esqueci de um frufru inho super importante aqui que é uma textura nesse background né olha

só se você perceber aqui no banner inicial a gente tem tipo uns quadrinhos aqui né que é a textura padrão aqui dessa página então para ter uma consistência dessa textura aqui ó para esse background se eu clicar aqui no contêiner vira aqui em estilo e colocar aqui um plano de fundo na verdade vou colocar uma sobreposição de fundo para ela vou selecionar aqui em clássico imagem e vou pegar essa textura aqui selecionar E aí eu vou colocar aqui a mesma coisa vou colocar Centralizado Vamos colocar fixo aqui para dar esse efeito paralax tá vendo que

ele fica seguindo a tela só que em vez de Centralizado eu vou pegar essa parte superior que tá com esse degradê superior ao centro Aí ele vai priorizar essa parte aqui da Imagem Beleza ó tá ficando já com efeito bem legal E aí eu consigo mexer nessa opacidade aqui ó por isso que eu selecionei a opção de sobreposição em vez de fundo aplicando esse background aqui a gente já consegue ter uma consistência dessa textura e é um frufru inho que traz uma personalidade a mais um charme a mais pra página tá vendo ó esses detalhezinhos

assim fazem bastante diferença vamos clicar aqui para atualizar E aí Massa agora sim bora aqui para essa sessão de depoimentos que é bem mais tranquilo do que as outras que a gente já fez até agora bora lá de show PR essa próxima sessão aqui do site de depoimentos você pode ver que ela é bem parecida estruturalmente com essa anterior aqui a diferença é que em vez do Grid a gente vai ter esse Carrossel aqui de depoimentos né tem essa descrição zinha aqui a mais mas ainda assim algo bem simples de implementar aproveitando que é uma

estrutura bem parecida a gente vai fazer o seguinte Olha só eu vou clicar aqui com o botão direito nessa sessão e vou clicar para duplicar aqui ó E Agora Nós temos duas dela né Eu já vou modificar algumas coisinhas aqui como por exemplo esse background né que não vai ser o mesmo aqui essa superposição de fundo a gente vai tirar isso aqui para dar uma diferenciada na sessão se você perceber também aqui ó ela tem uma corzinha um pouco diferente né parecida com aquela que a gente viu anteriormente ali na parte do quem somos E

aí para isso aqui nessa outra sessão eu vou tirar já esse Grid aqui também vou vir aqui novamente no no contêiner né no background do contêiner Vamos colocar Aquela nossa cor de Cinza médio aqui e na bordinha eu vou vou fazer aquele mesmo estilo ó vou colocar aqui sólido um pixel em cima um pixel aqui embaixo e vamos colocar aqui nessa corzinha da borda para poder fazer esse frufru inho aqui pronto já fizemos essa diferenciação E aí nós vamos pegar aqui a cop já dessa dessa sessão ó tá vendo aqui nesse nesse título anterior a

gente vai colocar depoimentos E aí depois aqui a gente vai colocar clientes satisfeitos comprovam nosso resultado vamos vir aqui ó já já tá ficando legal só que aí nesse caso aqui como o título é menor eu vou testar Colocar assim ou então na verdade eu vou vir aqui em personalizado e vou dar uma aqui vou tentar fazer uma quebra um pouco melhor acho que na verdade na verdade mesmo acho que esse aqui eu vou deixar como largura 100% porque no o título não tá tão grande assim e aí como esse aqui ele tem uma descrição

inha abaixo dele eu também vou tirar esse preenchimento aqui embaixo e aí eu vou arrastar um elemento de texto para cá deixa eu até ver se tem um outro subtítulo por aqui ó vou pegar esse aqui aqui mesmo do Banner Inicial vou clicar aqui para colar pra gente aproveitar esse essa formatação vou pegar aqui a cópia desse subtítulo ó o que nossos clientes têm a dizer sobre a experiência com a valorize acessores Ok E aí mais uma vez vocês têm acesso à conversa ali do chat GPT podem dar uma olhadinha direitinho em Como que foi

o processo de cada uma dessas sessões mas é basicamente a mesma estrutura ali do papo com ele que eu já havin mostrado anteriormente OK vou dar uma destacada nesse Valorize a ores aqui também para destacar o nome da empresa show acho que ficou bem legal vou clicar aqui para atualizar já vou pegar a cópia aqui do CTA também vamos lá ó pegar esse cinho aqui vir aqui no botão e vou trocar esse texto descubra como podemos ajudar o seu negócio também o que tem mais a ver com o contexto ali dos depoimentos que a gente

tá mostrando né uma coisa muito comum de se utilizada para essa sessão de depoimentos é a gente colocar um Carrossel de imagens que exemplificam os prints que aquela pessoa ganha isso porque cada vez mais tá ficando meio meio antigo assim meio obsoleta aquela Vibe da gente colocar aqueles textinhos pré-prontos sabe aqui que as pessoas ficam meio na dúvida se aquilo é real ou não com prints a gente tem uma sensação de que isso aquilo é mais palpável que realmente aconteceu né E que é realmente é um depoimento real que aquela pessoa recebeu então para aplicar

esse Carrossel aqui a gente vai fazer o seguinte ó nós vamos vir aqui nos widgets do elemento vamos procurar aqui por Carrossel de imagem vamos arrastar para cá e esse wiit aqui ele é super simples de mexer gente parece que é complicado mas não é ó a gente vai clicar aqui para adicionar uma imagem e aí eu adicionei aqui sete prints iguaizinhos sete mups aqui de de conversa no WhatsApp iguaizinhos só pra gente exemplificar Esse Carrossel tá é claro que num projeto real você vai colocar prints reais também e orientar o seu cliente a isso

Beleza mas eu vou colocar todos esses prints aqui na galeria do nosso Carrossel vamos inserir aqui ele já ficou aqui meio espa passado né para melhorar essa visualização a gente vai vir aqui na resolução da imagem vai colocar como completo e agora os prints estão aparecendo assim aqui nessa parte de slides para mostrar a gente vai colocar aqui quatro por vez desse jeito você pode colocar quatro três a quantidade que você quiser beleza cinco ó por exemplo eu vou colocar quatro aqui que eu acho que dá uma visualização legal preenche bem a tela essa navegação

não tá dando para ver por conta da cor mas aqui embaixo tem uns pontinhos e aqui do lado tem umas setinhas também eu vou deixar a navegação só para as setinhas mesmo tá então nós vamos trocar aqui por setas beleza os pontinhos já sumiram aqui nesse ícone aqui da seta anterior e posterior eu vou trocar também para poder ficar igual esses diferenciais aqui seguir esse padrãozinho ok então orora eu vou eu vou clicar aqui na biblioteca de ícones do próprio elemento Lembrando que se você clicar aqui ó no enviar arquivo svg você também pode ativar

essa permissão e trazer um arquivo de ícone aqui pro elementor também inclusive Nós ainda vamos fazer isso só que em outro momento aqui tá Por enquanto eu vou usar aqui da biblioteca do elementor mesmo ele já dá algumas sugestões de setas E aí a que eu vou utilizar É bem essa aqui ó para ser igual aqueles diferenciais vou fazer a mesma coisa aqui no ícone da seta de próximo né posterior vamos clicar aqui na biblioteca de ícones e pegar essa outra setinha aqui também e aí olha só aqui nessa parte do link você pode colocar

uma url personalizada levar as pessoas por exemplo para um link do WhatsApp alguma coisa assim você pode colocar aqui como arquivo de mídia que aí desse jeito quando a pessoa clicar na imagem ela vai ter acesso a visualizar ela de forma maior eu vou até deixar isso aqui ativo Desse jeito ok vamos clicar aqui de novo e aqui nas opções adicionais que é em relação à parte do carregamento a velocidade tudo mais eu vou deixar tudo como padrão mesmo A única coisa que eu vou ativar é esse carregamento lento aqui que faz com que eh

esses widgets que tem mais imagens assim ele seja carregado de uma forma mais otimizada durante a navegação do usuário tá vou clicar aqui para atualizar e agora na parte da estilização a gente vai mexer nisso aqui um pouquinho essa setinha aqui eu vou deixar como tamanho padrão mesmo você pode aumentar aqui ou diminuir Se você quiser eu vou deixar como padrão e vou colocar ela como esse Realce aqui essa cor branquinha essa cor verde um pouco mais clara e eu também vou deixar ela para fora para poder melhorar essa visualização Na verdade acho que eu

vou aumentar essa seta um pouquinho mesmo eu vou deixar ela encostada aqui ó na imagenzinha vou deixar ela como 32 ela fica exatamente encostada aqui na imagem e na parte da imagem eu vou colocar um espaçamento personalizado entre elas vamos deixar aqui pelo menos 20 Deixa eu testar 30 PR ver como é que fica então acho que 20 ficou melhor deixar 20 aqui mesmo e eu vou colocar uma bordinha sólida de um pixel naquela corzinha que a gente tá usando sempre esse borda aqui e o raio da borda aqui eu vou colocar 10 para cada

depoimento para ficar um pouco mais arredondado igual todo o restante Ok acho que já ficou bem legal desse jeito aqui ó deu uma bugadinha aqui deixa eu dar um cont CRL Z pronto eu só vou voltar aqui na navegação eu vou aumentar um pouquinho isso aqui só para ela ficar realmente colada ali na imagem vamos clicar aqui para atualizar e Prontinho ó ela tem um espaçamento inferior bem pequenininho aqui do lado que tá dando uma uma diferenciada aqui então vou fazer o seguinte vou vir aqui ó e vou diminuir um pouquinho até tirar esse espaçamento

aqui inferior acho que os10 um pouquinho menos né Vou colocar aqui é vou colocar os5 já melhora um pouco e eu também vou vir aqui nessa descrição aqui embaixo e vou colocar um espaçamento maior para ela vou tirar esse menos 15 e vou ainda adicionar pelo menos uns uns 20 pixels aqui embaixo vamos ver como é que fica vamos clicar aqui fora não vou colocar acho que um pouquinho mais um pouquinho mais só V colocar aqui 25 aí novamente clico fora dou uma apertadinha de Olho Vejo como é que tá esse espaçamento Beleza acho que

ficou bem legal assim ó e aí quando passa a pessoa consegue ver esse print de depoimento e novamente né gente seguindo meu estrutura bem Coesa aqui onde a pessoa tem a apresentação da empresa depois um pouco sobre ela diferencia iis as soluções de uma forma bem breve concisa aqui visual também ctas para todos os lados depoimento como prova social e aí por último tá faltando o quê a cereja no topo do bolo que é justamente o CTA gente o reforço do CTA onde a pessoa teve todas as informações que ela precisava para depois bum clicar

do link do de chamada de ação no final para eh falar com o especialista né pedir um orçamento e tudo mais então vamos fazer justamente essa sessão aqui agora meus parabéns mais uma sessão pro desktop feita e já partindo aqui para esse CTA Bora lá ver o que que a gente vai precisar fazer a mesma coisa que a gente tem feito até agora gente ó um contêiner principal um contêiner aqui dentro também para encapsular todo esse background aqui de dingue irinho e tal com esse mesmo padrão de textura que a gente tem utilizado até agora

também e Um textinho descrição e botão no meio estrutura bem tranquila de fazer bora botar a mão na massa aqui agora vou aqui clicar no mais de novo vamos selecionar a opção de flexbox e eu vou adicionar essa primeira opção aqui vertical Ok isso aqui esse contêiner principal é só para encapsular o contêiner interior do CTA então Ó vou clicar aqui em avançado Vamos colocar aqui aquele espaçamento padrão de 100 em cima 100 embaixo Ok E aí agora eu vou vir aqui nos widgets novamente e vou arrastar um novo contêiner aqui para dentro ó já

temos um novo contêiner não dá para ver mas ó já configurando ele um pouco aqui eu vou colocar a direção dos itens dentro dele como verte vou colocar todo o conteúdo justificado e alinhado também ao centro eu já vou colocar aqui ó um espaçamento entre as linhas de 20 pixels também tá pra gente já ter esse espaçamento interior vamos clicar aqui para atualizar vou vir aqui em estilo Vamos colocar aqui um tipo de plano de fundo para ele Ó já vou colocar essa cor verde já vamos vir aqui também em imagem e vou colocar aqui

essa imagenzinha de do background dele vamos selecionar ela aqui não tá dando para ver direito porque ele ainda tá sem altura Tá mas quando a gente colocar os itens vai ficar bem legal inclusive ó deixa eu até ver aqui tá vendo essa imagem ela tem 485 pixis de altura para poder ver ela direitinho e também para sempre ficar inteira eu já vou vir aqui em layout e vou colocar também uma altura aqui de 485 E aí dessa forma eu me certifico de que ela sempre vai ter no mínimo essa altura aqui para compor toda a

imagem vamos voltar aqui em estilo Vou colocar aqui a posição Centralizado padrão e vou colocar aqui também para não repetir Ok vamos atualizar aqui na borda eu vou colocar um raio da borda aqui de 10 pixels Vamos colocar uma uma bordinha sólida também de um pixel na cor desse Verde um pouco mais claro e aí quando a gente clica aqui por fora ó dá para ver que agora ele tem tipo né uma bordinha ali para poder dar um destaque e também clicando aqui novamente no contêiner vamos vir aqui em borda eu vou colocar um efeito

também de neon ao passar o mouse Então a gente vai clicar aqui nesse ao passar o mouse e aqui na sombra da Caixa eu vou adicionar aqui uma sombra deixa eu ver aqui eu vou pegar primeiro aquele verdinho que a gente utilizou ali ó vou pegar esse Verde aqui e aí vamos vir aqui na borda aliás eu vou pegar esse Verde um pouco mais claro aqui ó pegar esse verdinho vir aqui na sombra da Caixa ao passar o mouse vou trazer esse verde para cá já vou deixar ele aqui quase transparentinho por aqui ó e

aí vamos colocar aqui um posicionamento vertical de cinco pixels aqui acho que eu vou colocar uns 15 e aqui uns 10 ó já deu uma diferenç fazinha eu vou só diminuir um pouquinho a passo aqui e beleza ó ele já deu uma acendida bem de leve ao passar o mouse vamos clicar aqui para atualizar massa já temos aqui o nosso box do CTA pronto só tá faltando inclusive o espaçamento interno Vou colocar aqui deixa eu ver uns uns 500 não né pelo amor de Deus uns 50 pixels aqui ah inclusive ó já deu para ver

que não não tá bem posicionada essa imagem vou voltar aqui no contêiner Vamos colocar aqui ó PR tamanho da exibição Vamos colocar ela aqui cobertura e ela sempre pega tudo mas não se preocupe tá tá esse jeito aqui mas assim que a gente arrastar um elemento aqui para dentro ele já vai se posicionar melhor Inclusive eu já vou pegar o nosso elemento aqui vou pegar deixa eu só dar uma olhadinha aqui na estrutura ó a gente tem um título uma descrição e um botão né então eu vou pegar aqui vou testar um título do tamanho

desse principal aqui vamos copiar vamos colar aqui ok Inclusive eu tô achando que ele tá ficando muito assim né muito espaçado nas laterais então eu vou vir aqui no contêiner vou colocar uma largura máxima de 800 igual a gente fez lá em cima também já deu uma melhorada aqui vamos melhorar também o contraste desse título aqui ó colocando cinza escuro vou voltar aqui em conteúdo e vou colocar esse aqui também como H2 tá porque o H1 é só o título lá de cima mesmo e vamos trazer a cópia para cá vamos ver a cópia aqui

do CPA pronto para transformar seu seu negócio entre em contato agora vamos colocar assim e ó uma dicazinha Extra viu aqui nesse título né infelizmente a gente não tem muita opção de personalização como quando a gente mexe com com um editor de texto aqui né onde a gente tem tipo um mini um mini Word aqui para poder colocar trocar a cor e tudo mais mas tem umas tagin de html que são super simples da gente lembrar e aí nesse caso se torna bem útil por exemplo eu quero deixar essa parte aqui em que que eu

faço eu vou abrir aqui esse sinalzinho que eu não sei o nome é maior ou é menor não sei vou abrir aqui um maior e um menor vou colocar um b no meio de bold em inglês tá E aí eu vou vir aqui vou fazer a mesma coisa do outro lado vou colocar um B aqui entre essas tags porém eu vou fechar aqui com esse sinalzinho E Agora Nós temos um nessa parte aqui do entre agora isso é algo opcional tá você pode aderir se você quiser mas fica a dica aqui porque às vezes dá

um efeitinho legal mesmo quando você utiliza o widget de título também vamos clicar aqui para atualizar e lembrando também tá gente você não precisa saber HTML para poder mexer aqui no elementor Beleza isso aqui é só uma diquinha Extra mesmo um fru fru a mais mas mesmo se eu não colocasse isso eu não faria Meio Que diferença nenhuma aqui é só pra gente dar um destaque um pouquinho maior para essa parte do ent em contato Inclusive eu tô achando que esse título tá um pouquinho grande eu não vou deixar ele tão grande quanto o primeiro

da página Então acho que eu vou diminuir aqui para 40 ficou melhor assim vou arrastar um um wided de texto para cá agora já vou vir aqui em estilo para conseguir ver ele direitinho Vou colocar aqui como cinza escuro e Centralizado também E aí vou pegar a cópia aqui do documento aqui nossos especialistas piriri pororó vamos vir aqui conteúdo e deixa eu só dar uma olhadinha no site real aqui para ver se tem alguma parte em ó tinha colocado impulsionar o crescimento do seu negócio com estratégias comprovadas e personalizadas você sempre vai tentar pegar o

foco chave ali daquele texto daquela frase para poder tentar colocar um negritinho ali e trazer essa hierarquia visual para para as pessoas conseguirem escanear melhor o conteúdo Beleza deixa eu só ver aqui ó impulsionar até personalizadas ah personalizadas show como o edit de texto tem esse espaçamento inferior aqui padrão novamente eu vou vir aqui em avançar ado vou zerar os valores aqui da margem e vou colocar uma margem inferior negativa de -1 para zerar esse essa margem padrão inferior que já vem também tá esse pé vamos clicar aqui para atualizar e agora vou vou pegar

qualquer botão aqui da página tipo esse aqui por exemplo vou copiar vou colar aqui não tá dando para ver nada porque tá verde com verde aqui né então vou fazer o seguinte vamos vir aqui em estilo eu vou trocar a cor dele ó vou trocar o tipo de fundo dele para esse clássico aqui e vamos colocar esse cinza escuro Além disso também na cor do texto vou fazer o contrário vou colocar esse verde claro a passar o mouse ele já tá com aquele mesmo efeitinho que a gente tá utilizando em todos os outros botões só

passar aqui o o coisa aqui em cima vou clicar aqui fora para poder ver o espaçamento acho que tá um pouco espaçado demais para cima Então vamos opa vou vincular aqui vou colocar um zero aqui para todo mundo e vamos colocar aqui ó desvincular vou colocar um 10 aqui em cima para ver se melhora vamos ver agora sim vamos clicar aqui para atualizar e agora o que tá faltando é a gente trocar a copia desse botão Vamos colocar aqui ó Inclusive eu até delimitei aqui que é com ícone do WhatsApp porque eu tô falando de

conversar com um dos nossos especialistas para deixar isso bem claro vamos colocar aqui em conteúdo vou colocar essa copy e vou adicionar novamente o ícone do WhatsApp clicar aqui beleza já tá bonitinho aqui do lado e já temos também a nossa sessão aqui de CTA fazendo tudo isso só tá faltando o quê o nosso rodapé que também é bem mamão com açúcar da gente fazer que é justamente esse aqui ó parece muita coisa mas é bem tranquilo também Lembrando que aqui eu tô fazendo uma página única né meio que uma página onde você Ancora aqui

as sessões a gente ainda vai botar isso para funcionar também tá a gente Ancora aqui essas sessões e tem todas as informações numa página só esse tipo de página é excelente pros clientes A grande maioria das pessoas inclusive busca por esse tipo de página aqui que é essa página One page que a gente chama né e é ela é ótima para tipo tráfego pago PR os usuários não terem que ficar clicando ali em várias páginas para poder ter o conteúdo que ela quer enfim é um bom tipo de página para você tentar vender e eh

como a gente tá fazendo esse tipo de página eu não tô me preocupando em deixar com que esse cabeçalho esse rodapé é seja reutilizado em outras páginas do site também mas aqui dentro do elementor pro Você também tem a opção de colocar o cabeçalho e o header e uma outra uma um outro local ali de modelos em que você consegue reaproveitar Essas funções se se você procurar por esse assunto aqui no canal você encontra sobre isso também tá mas nessa página aqui eu vou deixar tudo dentro dela mesmo sem me preocupar muito com isso e

agora para fazer esse rodapé aqui eu vou fazer o seguinte eu vou clicar nesse mais eu vou selecionar a opção de grade eu vou utilizar de novo o Grid vou pegar qualquer um desses aqui ó por exemplo esse de três mas eu não vou usar exatamente esses três direitinho aqui ó se você parar para perceber na página real nós temos um espaçamento diferente entre eles esse aqui é menor esse também é menor e esse aqui ele é um pouco maior então eu vou mexer nisso ainda só que antes disso eu vou vir aqui em estilo

e vou colocar uma cor diferente pra gente poder diferenciar Vou colocar aqui esse cinza médio aqui dessa vez na verdade Na verdade acho que eu vou colocar essa essa cor de borda aqui para dar uma diferenciad dona mesmo e aí eu vou vir aqui em avançado vamos zerar aqui esse preenchimento vou colocar 50 em cima e 50 embaixo Ok deixar assim desse jeito vamos voltar aqui em layout e agora nessa parte aqui das colunas em vez de utilizar três colunas fixas né três FRS ou frações do contêiner fixos eu vou colocar aqui em personalizado e

vou fazer aquele mesmo exemplo que eu tinha mostrado anteriormente eu vou colocar aqui ó uma fração pra primeira coluna duas frações pra primeira pra segunda coluna aqui né e uma fração pra terceira coluna Opa eu acho que eu fiz alguma coisa aqui eu coloquei um 11 aqui e aí dessa forma o que que eu fiz né o meu contêiner ele é dividido em quatro partes esse aqui essa primeira coluna pega uma parte das quatro isso aqui pega duas partes das quatro e aqui pega uma novamente por isso que fica repartido desse jeito aqui tá Isso

aqui é super útil na do com esse conceito todo de Grid que o elementor trouxe agora e é legal dominar isso para você conseguir fazer uma subdivisões de uma forma muito mais fácil Em vez de ter que ficar fazendo cálculo de porcentagem igual normalmente a gente tem que fazer com flexbox contêiner ok então beleza ó vamos deixar tudo assim por enquanto vou só colocar aqui para alinhar os itens ao centro E também não aqui eu vou deixar desse jeito mesmo vamos clicar aqui para atualizar vou colocar também aqui o espaço entre desse jeito para sempre

Um item ficar aqui nessa extremidade outro aqui nessa outra extremidade e o outro aqui dividido no meio beleza vamos clicar aqui para atualizar e bora ver aqui ó o primeiro item que a gente vai mexer é esse aqui que é uma lista de icones Ok bem tranquilo de mexer também ó a gente vai vir aqui em avançado aliás vai vir aqui nesses seis pontinhos vai procurar pelo widget aqui de lista de i e trazer para cá porque ele já vem bem pré-configurado vou tirar dois desses aqui ó e vamos preencher um de cada vez Ok

o primeiro ícone vai ser o de WhatsApp então já tem até um número fictício aqui também colocar aqui esse numerozinho e aqui no ícone eu vou procurar na biblioteca do elementor mesmo o ícone de WhatsApp vamos inserir isso aqui OK vou duplicar aqui e vamos colocar o próximo item que é o e-mail então para isso eu vou usar um ícone de envelope ó vamos pegar esse e-mail aqui f também vamos colocar aqui nessa parte do texto vou procurar o ícone de envelope vou colocar esse aqui preenchida aqui pegar o próximo que vai ser esse de

mapa E aí eu coloquei um Loren IPS aqui para endereço Bia Por que que você não colocou o GPT para poder gerar o endereço porque aí não faz sentido né a gente tá fazendo negócio fictício aqui nunca esse esse aqui não tem problema não Da gente colocar um Loren e para quem não sabe Loren imps era o antigo texto fictício que a gente utilizava para poder encher linguiça aqui mesmo né para preencher os espaços e depois mostrar pro cliente para depois colocar as informações reais agora com as inteligências artificiais a gente já consegue colocar uma

base textual de verdade e aí se as pessoas quiserem elas vão trabalhando em cima disso E aí OK beleza ó vou trocar aqui o ícone agora por um de mapa lembrando de sempre procurar por inglês ok então ó por exemplo esse aqui eu coloquei envelope né que é envelope inglês e aqui eu coloquei map para achar esse Icone Zinho aqui que eu queria e por último a gente vai colocar um aqui paraa política de privacidade e a gente vai fazer política de privacidade nesse vídeo não tá gente para não ficar muito grande eu não vou

desenvolver a página de política de privacidade Mas não se preocupe também porque tem vários vídeos aqui no canal sobre esse assunto de como você instala como você configura aquele popup de cookies Como que você configura a lgpd dentro do site como desenvolver uma página de política de privacidade então material para isso não falta tá Eu só vou colocar aqui linkado aqui ó vamos colocar um iconeinstagram pode ser de documento também vou colocar esse cookies assim ó aqui beleza e aí aqui eu vou colocar um hashtag Só meio que já deixando implícito que aqui vai ter

um link que vai ser levado para uma página de política de privacidade tá vou deixar arrumadinho desse jeito aqui aí depois quando desenvolver a página de política vocês vê aqui e coloca esse link certinho vou já clicar para atualizar aqui rapidão mas a gente ainda vai estilizar essa lista aqui então já vindo aqui na aba de estilo rapidão vou colocar um espaço entre aqui esses itens de oito pixels mais ou menos acho que já é o suficiente aqui em equen eu vou deixar desse tamanho aqui mesmo vou colocar aqui verdinho desse jeito e quando a

pessoa passar o mouse el eu vou deixar um verde um pouquinho mais claro assim ó para dar esse pequeno efeitinho e aqui deixa eu ver aqui em texto que onde a gente precisa melhorar mais vou vir aqui em tipografia vou colocar um tamanho 14 aqui Opa 114 não vamos colocar 14 aqui para dar uma diminuída esse texto só precisa ser pequenininho mesmo o suficiente para as pessoas verem e deixa eu ver aqui ó eu vou trocar a cor também por esse texto assim ó quando ela passar o mouse vou deixar esse branco para poder acender

desse jeito aqui ok vamos clicar aqui para atualizar e pronto primeiro item do nosso rapé aqui já está pronto agora falta esse aqui que é a logo e um Um textinho aqui de de direitos reservados Ok então inclusive até isso aqui eu pedi pro GPT também tá lá na conversa se você parar para olhar como né o o Grid ele funciona o seguinte é cada um desses quadradinhos aqui comporta Apenas Um item ou seja se eu colocar uma imagem e um texto aqui elas não vão ficar nesse quadradinho juntos tá elas vão para um próximo

vai ficar a imagem aqui e depois o próximo nesse o o texo Né o próximo item nesse outro Quadradinho que vai se formar aqui do lado não é isso que eu quero Então como é que eu faço para remediar essa situação eu tento procurar algum índice do elemento que já tenha essas duas coisas já que comporte uma imagem e comporte um texto e felizmente nós temos temos um assim se chama caixa de imagem é muito legal você criar familiaridade com a ferramenta testar várias opções porque depois você vai conseguindo pensar em outros usos para cada

tipo de widget desse que não necessariamente foi para isso que ele foi feito então ó vamos trocar esse cabo Vamos colocar esse caixa de imagem aqui eu não vou utilizar essa parte do título dele Vamos usar só a parte da Imagem e o textinho aqui embaixo também então já vou clicar aqui para escolher uma imagem vou pegar aquela logo vou selecionar essa logo aqui o bom é que ela já ficou bonitinha aqui pequenininha do jeito que eu queria vou vir aqui na cópia ó e vou pegar esse textinho aqui de direitos reservados Vou colocar aqui

ah só já ficou bem legal e aqui na parte do estilo é na imagem Eu não vou mexer em nada eu vou vir aqui em conteúdo vou zerar esse espaçamento aqui deixa eu ver aqui rapidinho ó vou zerar esse espaçamento aqui da imagem Também cadê vamos zerar esse espaçamento aqui para eles ficarem mais próximos E aí se você quiser também ó você pode aumentar aqui essa largura da imagem ela não tá aumentando muito mas acho que é por causa causa do tamanho dela talvez se eu der uma diminuída aqui ela diminui tá vendo vou deixar

aqui padrão mesmo e aqui deixa eu ver em conteúdo eu vou só diminuir um pouco esse texto aqui também eu vou colocar 15 aqui ah eu tô mexendo em título por isso que não tá fazendo diferença porque a gente tirou o título né então vou apagar aqui essa informação vou vir aqui na descrição e vou colocar aqui como 15 pixels aqui para essa parte de baixo má já temos aqui o nosso a nossa caixa também a única coisa que eu vou fazer aqui antes disso é vir aqui em conteúdo e eu também vou vir aqui

ó na no link aqui da da nossa caixa e vou colocar aqui nessas tags dinâmicas e vou colocar como site URL para isso aqui ficar linkado a a URL do do site aqui porque normalmente as pessoas vem uma logo e já acham que ela é clicável para poder voltar ali pro início do site né então é sempre uma boa prática você deixar isso ativo e aí por último nós temos aqui essa parte das redes sociais que ficou esse quadradinho bem charmoso aqui do lado a gente vai clicar aqui nos widgets do elemento vai procurar aqui

por redes sociais vamos procurar aqui por social ícones sociais vou trazer esses ícones para cá E aí eu já vou colocar os as redes sociais que meu cliente pediu que normalmente são aqui é WhatsApp tem casos que muda tá tem gente que usa Twitter LinkedIn e tudo mais mas normalmente é WhatsApp Instagram como os principais aí eu vou colocar aqui embaixo também um Facebook e aqui nesse outro pode ser um LinkedIn mas acho que eu vou colocar vou vou colocar de novo aqui o YouTube que tava vamos procurar aqui por YouTube E aí né Assim

como na lista de ícones tá vendo ó que aqui em conteúdo cada um desses itens tem um texto o ícone e o link aqui nas redes sociais a mesma coisa aqui ó o texto já é o próprio ícone que você coloca né já é aquela rede social você coloca o ícone aqui e você e coloca também o link dessa sua rede social eu vou deixar tudo aqui só com hashtag tá só para ficar com essa pontinha aqui ó esse Pointer Zinho aqui de clicável mas aí no no caso né num projeto real você coloca a

rede social daquela empresa mesmo beleza tem as formas aqui ó você pode colocar totalmente quadrado círculo arredondado para combinar com o restante do Design eu vou deixar aqui arredondado mesmo essa parte das colunas né Você pode deixar automático ele vai tentar caber todos os ícones que ele consegue caber naquela mesma linha e depois ele vai quebrar ou você pode colocar o número de colunas específico para ficar aquele quadradinho assim ó eu vou colocar duas colunas e duas linhas assim tá vendo ele vai ficar bonitinho assim vou alinhar isso aqui à direita e aí aqui em

estilo eu vou colocar também uma cor personalizada Vamos colocar aquele Verde aqui ó mais escuro assim a cor secundária eu vou colocar essa cor de dentro aqui do nosso contêiner essa borda tamanho deixa eu dar uma melhoradinha nisso aqui deixa eu ver eu vou colocar acho que tamanho tamanho 22 preenchimento eu vou deixar padrão o espaçamento eu vou aumentar um pouco aqui ó vou colocar pelo menos 15 aqui deixa eu ver acho que foi muito vou colocar 10 aqui e 10 aqui entre as linhas também acho que já tá um pouco melhor e ó ele

já tá dando uma uma um efeito Zinho quando a gente passa o mouse mas eu vou vir aqui em ícone após passar o mouse e eu vou colocar a nossa cor primária aqui como essa Realce desse jeito aqui E além disso também eu vou colocar aquele efeito de float que a gente tá usando nos botões ó para ele fazer esse efeitinho aqui também tá que fica bem legal eu vou só aumentar um pouco aqui ficou muito pequenininho deixa eu testar aqui 25 acho que 25 fica má vou clicar aqui para ar e vamos dar uma

olhadinha aqui no geral vou até clicar no olhinho e olha só tcharam um botão chegando ali com a Entrada Triunfal nossa segunda sessão aqui de quem somos os serviços também nos cards bonitinho depoimentos e todo o nosso site na versão desktop já está pronto Meus parabéns com isso a gente concluiu aqui mais uma parte aqui dessa terceira etapa a gente já fez todas as sessões versão desktop que é a principal né a mais difícil agora a gente só vai adaptar essas sessões pra parte responsiva também tanto pra tablet como pra mobile aqui dentro do elemento

Beleza então bora lá bom gente para mexer nessa parte do responsivo é bem tranquilo tá para isso a gente vai selecionar essa opção aqui de modo responsivo no canto inferior do elemento vamos selecionar isso aqui e aí agora a gente tem tanto a versão de tablet como a versão mobile do site também algumas coisas já ficam até meio que pré-configuradas só que outras ficam bem né resolvendo aqui tá mas ainda assim é um processo bem mais tranquilo do que propriamente criar essas sessões eu vou voltar aqui pro início da página tá com como essa parte

aqui tá sobreposta pelo menos o cabeçalho e esse banner Inicial Eu vou acessar com o navegador tá então eu vou clicar com o botão direito navegador só pra gente ter certeza de que a gente tá pegando a coisa certa vou clicar aqui primeiro no header Ok E aí é a na versão da sk toop a gente sempre estava utilizando o padrão de 100 em cima e 100 embaixo né aqui pro pro Qual o nome disso gente tablet pro iPad né eu vou usar eh esse preenchimento aqui ó eu vou colocar na verdade na verdade pro

cabeçalho não vai funcionar muito isso Tá Mas eu vou colocar aqui ó esse preenchimento aqui de pelo menos pro cabeçalho eu vou colocar 15 em cima 15 embaixo e eu vou colocar 20 nas laterais tá esse 20 vai servir para todas as sessões agora também agora o nosso menu ele tá diferente assim né ó ele tá todo desconfigurados e aí lembra daqueles aquelas corzinha a gente ainda ia configurar né nessa parte aqui do menu responsivo Pois é a gente vai fazer isso aqui agora OK para isso Ó eu vou clicar aqui nesse menu vamos vir

aqui em conteúdo primeiro e vamos ativar essa opção aqui de largura Total ó vamos ativar essa opção aqui e agora quando a gente clica no menu ele fica aparecendo aqui né já deu uma boa melhorada Além disso também esse Toggle Zinho que vem aqui com elemento não tá dando para ver direito porque ele tá escuro igual o fundo aqui mas ele já é bem bonitinho mas eu vou trocar por um outro até para vocês ver verem como adicionar um ícone aqui do elementor também tá eu vou clicar aqui para enviar um novo arquivo svg vou

ativar essa permissão e eu vou selecionar o arquivo aqui da nossa pasta vou clicar aqui deixa eu até ver se ela tá aqui ó ó já até apareceu esse ícone menu aqui ok vamos selecionar essa opção vamos inserir E aí eu adicionei esse iconeinstagram fazer o seguinte olha só a gente vai mexer aqui nessa parte do Drop Down que é esse e esses itens que abaixam aqui quando a gente clica naquele Toggle né E aí aqui ó nessa parte da cor do texto vamos só dar uma revisada para ver como é que ele fica quem

tá com curiosidade de saber que extensão é essa ela se chama mobile Simulator tá inclusive deu até uma bugadinha no menu que eu tinha configurado aqui antes necessário Ah não é porque esse aqui é o que a gente tá fazendo agora tá vendo confundi vou até fechar essa aba aqui e vou no site real vamos clicar aqui ó para ativar var essa essa extensão aqui e aí clicando aqui até tinha tava com togon normal aqui beleza Ele é bem bonitinho também qualquer coisa a gente pode usar esse Mas ó aqui quando a gente passa o

mouse aqui o texto ele tá nessa cor escura né quando ele está ativa ele fica com esse verde mais escuro e quando ele não está ele fica com essa cor mais clara Então como é que a gente faz isso a gente vai vir aqui na cor do texto e vai colocar esse cinza escuro aqui no na cor de fundo desse drop Down a gente vai colocar aquele verde claro ok a tipografia eu vou deixar Exatamente Essa mesmo aqui no Rover a gente vai colocar a cor do texto também como cinza escuro o background do Rover

vai ficar com esse cinza um pouco mais com esse Verde um pouco mais escuro também e o ativo a gente vai deixar exatamente aqui como tá com cinza escura no texto e o background com o verde um pouco mais escuro também beleza já deu aquele mesmo efeito B ele tá pegando um pouco na logo aqui sim pra gente resolver isso a gente vai mexer um pouco nessa distância aqui embaixo tá vendo ó a gente vai colocar numa distância segura onde ele não fica pegando na nossa logo dessa forma ele já fica um pouco melhor também

eu também vou aumentar um pouco o preenchimento vertical dele tá vou colocar pelo menos uns 15 aqui para ficar com espaçamento maior Entre Um item e outro vamos atualizar porque já deu uma boa diferença né isso aqui e agora aqui nessa parte do Toggle acho que eu vou colocar até um divisor Zinho ó não tinha colocado no outro mas eu vou colocar agora vamos colocar aqui um tipo de borda sólido a cor da borda eu vou colocar essa aqui vamos colocar um pixel só de borda e eu vou deixar ela quase transparente ó só para

dar uma pequena diferenciada aumentar aqui ó tá vendo ó ficou bem de leve e já deu um charminho a mais e agora nesse botão aqui do Toggle né Vamos aumentar ele aqui PR ele ficar num tamanho mais bacana Vamos aumentar ele assim ó deixa eu ver assim É acho que tá bacana Vou colocar aqui 30 Vamos colocar uma cor aqui para ele de Vou Deixar Na verdade essa corzinha mesmo né mas só para quando ele tiver com um x aqui eu vou colocar uma corzinha aqui aqui de Realce E aqui nessa essa corzinha aqui de

verde um pouco mais claro e no Rover eu vou colocar com essa animaçãozinha aqui beleza ele vai ficar assim vamos clicar aqui para atualizar cliquei aqui no no botãozinho aqui do preciso de ajuda sem querer mas beleza ó já estamos com o nosso header pronto aqui para responsivo também já tô com a logo no tamanho certo o Tozinho aqui também ficou bem legal agora bora arrumar aqui esse banner Inicial novamente vou vir aqui ó em enchimento e vamos colocar aqui ó um preenchimento dessa vez deixa eu ver vou colocar 80 em cima 80 embaixo e

20 aqui nas laterais talvez eu vou tenha que colocar um pouco mais em cima por conta daquela margem negativa aqui do header né então vou colocar aqui um 120 vou vir aqui em layout também vou dar uma diminuída no tamanho desse banner Vamos colocar aqui deixa eu ver un 650 acho que já é o suficiente pra tablet né não precisa ser tão alto assim e agora aqui em estilo pra gente posicionar melhor aquela imagem eu vou fazer o seguinte eu vou vou clicar aqui em posição vamos clicar aqui em personalizado eu vou puxar o meu

eixo X de um jeito que fique numa posição legal aqui com essa nosso essa nossa textura aqui na lateral dessa imagem ó deixa eu puxar um pouquinho para cá assim deixa eu ver é vou colocar acho que aqui em zero mesmo para pegar esse canto aqui tá vendo aí fica pelo menos com essa texturinha aqui do lado vamos clicar aqui para atualizar e massa já tá bem bom desse jeito aqui Acho que só vou dar uma diminuída em alguns pontos ó vou vir nesse título aqui vamos colocar de 18 aqui Vamos diminuir um pouquinho esse

aqui também ó deixa eu testar aqui colocar uns 40 e aqui também eu vou diminuir para ficar em uma linha só vamos colocar 16 e esse botão aqui também eu vou colocar com a tipografia 16 Tá vendo você vai melhorando ali as alturas os tamanhos e tudo mais para poder se adequar E com isso você vai arrumando o seu responsivo vamos clicar aqui para atualizar e agora fazer esse mesmo processo nas próximas sessões também tá até gerando uma um scroll horizontal aqui que eu acredito que inclusive é dessa sessão mas a gente já vai arrumar

isso Ó vou clicar aqui no contêiner principal vamos vir aqui em avançado vou zerar esse preenchimento vou colocar 80 em cima 80 embaixo e 20 aqui nas laterais Beleza já deu um respiro aqui na lateral também porque é muito ruim quando a gente entra no site fica tipo tudo colado nas bordas do celular sabe nem que seja 10 pixels é bom você ter um respiro Zinho lateral ali para não dar essa sensação de tudo muito espaçado no dispositivo E aí aqui até que ficou levemente bacana que tá bem espaçados mas a gente vai melhorar isso

aqui fazendo o seguinte eu vou clicar aqui no nosso contêiner principal vamos vir aqui em layout em vez de ficar na direção aqui horizontal eu vou clicar aqui para ficar vertical Desse jeito ok E aí aqui nesses contêiners internos eu vou vir aqui em largura Total mesmo e vou deixar cada um aqui ó em por cento e 100% vou deixar ele pegando tudo aqui vou fazer a mesma coisa no outro largura Total porcentagem e 100% aqui já vou vir nesse aqui de baixo avançado e vou colocar uma margem superior aqui deixa eu ver de pelo

menos 30 30 pixels acho que um pouquinho mais vou tentar colocar uns 40 aqui é acho que fica um pouco melhor uns 40 aqui aqui acho que já ficou com um bom tamanho talvez eu diminuir um pouquinho aqui deixa eu ver uns 33 de ver se como é que fica não para ficar em uma linha só ele fica muito pequeno vou colocar uns uns 33 aqui esse aqui eu vou deixar como vou colocar como 17 diminuir só um pixel aqui tudo eu vou deixar dessa forma aqui mesmo esse esse nosso eh esse nosso diferencial aqui

ele tá com um espaçamento meio esquisitinho que não tem problema também a gente né dá uma arrumada aqui ó vou colocar primeiro eu vou vincular todos os valores aqui vou testar aqui como 20 ó Opa como 20 aqui ó já deu uma boa melhorada na verdade eu vou só aumentar aqui como 30 e vou deixar dessa forma aqui mesmo vamos deixar desse jeito e Prontinho ó já estamos aqui com tudo arrumado o tablet é bom você dar uma focada principalmente para não ficar uma visualização quebrada mas é sempre bom também você pensar que não não

necess necessariamente é algo que você precisa quebrar tanto a cabeça assim porque se você for analisar a porcentagem de pessoas que é entram no site via esse tipo de dispositivo é muito pouca Então os principais focos sempre tem que ser no desktop e no mobile tablet você arruma para não ficar completamente quebrada ali para não ser uma experiência ruim mas não precisa também ficar entrando em tantos pormenores assim não tá então ok essas duas sessões aqui já estão legais vamos para essa aqui então eu vou clicar aqui no contêiner principal avançado Vamos colocar aqui aquele

padrão de 880 20 80 Opa 80 e 20 também vou vir aqui ó nesse nosso título Vamos colocar 17 igual no outro Vamos colocar aqui também uma largura de 100% para esse título e diminuir ele aqui para 33 desse jeito acho que eu não gostei dessa quebra de linha vou voltar pro personalizado aqui vou melhorar essa quebra dele vou deixar assim você pode tanto colocar em Pixel como também em porcentagem eu prefiro deixar em porcentagem Vamos colocar aqui 70% e agora aqui na parte do Grid né parece que tá meio quebradinho e tal mas tem

uma funcionalidade muito boa desse Grid aqui que ajuda demais no responsivo olha só a gente vai clicar aqui no nosso contêiner de Grid e aqui nessa parte das colunas a gente pode simplesmente delimitar um novo número de colunas Ó tipo se três tá muito apertado Vamos colocar aqui duas colunas e olha só rapidinho a gente já arrumou essa situação tá com espaçamento tá com tudo bonitinho não tem que se preocupar mais com isso vamos clicar aqui para atualizar o botão tamb também já ficou legal desse jeito aqui vamos vir aqui agora para esse próximo contêiner

avançado vou zerar esse preenchimento colocar aqui 80 20 80 20 desse jeito vamos deixa eu ver dar uma diminuido também para ficar tudo consistente ó vou colocar 17 aqui eu vou colocar 33 é sempre bom você manter um padrãozinho não gostei dessa quebra vou fazer a mesma coisa ó personalizado vamos melhorar essa quebra aqui vamos colocar aliás vou vir aqui em porcentagem Vamos colocar uma quebra melhor aqui ó deixa eu ver aqui não em três não vou deixar em duas deixar 80 não gosto de números quebrados e aqui nesse texto também ó vamos vir aqui

vamos dar uma diminuída para 16 deixar em uma linha só aqui nos depoimentos dois F ficaram legais mas acho que eu vou dar uma diminuída aqui para três vai ficar um pouco menor mas a pessoa tem a opção de clicar aqui e ver isso um pouco maior tá só para essa sessão não ficar muito grande nesses dispositivos Beleza acho que já ficou legal assim nesse próximo vamos vir aqui novamente fica até repetitivo né mas é sempre esse acesso é bom para reforçar bem vou desvincular esses valores aqui vamos colocar aqui 80 20 80 20 nas

laterais vou diminuir um pouco esse pading aqui ó vamos colocar 40 de pading Vamos diminuir esse título aqui deixa eu ver deixa eu testar 35 ó acho que 35 ficou legal vamos ver aqui eu acho que se desto eu vou deixar desse jeito aqui mesmo já tá com tamanho Bom 16 E aqui nessa altura desse Box aqui eu vou dar uma diminuída também ó vamos colocar aqui deixa eu ver vamos colocar na verdade eu vou tirar esse mínimo aqui ó vou colocar o mínimo zero e não acho que o mínimo zero ficou muito pouco vou

aumentar só um pouquinho mesmo vamos colocar assim aqui ó 45 E aqui nessa nessa parte aqui do background eu também vou pegar a posição desse background aqui colocar como personalizado eu vou tentar puxar essa carinha do real aqui um pouco mais para cá para ela aparecer um pouco mais show vou clicar aqui para atualizar já já tá praticamente Pronto agora é só mexer nesse rodapé aqui vamos pegar esse cont aqui de Grid né vamos vir aqui em layout E aí como é muita informação para poder ficar exprimido pra tablet né eu vou fazer o seguinte

aqui ó eu vou deixar tudo isso agora vou colocar aqui em coluna FR e vou colocar como uma coluna só Ok vai ficar tudo assim vamos vir já aqui em avançado também ó vou zerar esse preenchimento vou colocar aquele mesmo padrão na verdade aqui eu vou colocar menos eu vou colocar 40 em cima 40 embaixo e 20 nas laterais a lateral é sempre igual tá E aí aqui eu vou dar uma reorganizada Olha só eu vou pegar essa logo aqui vamos vir aqui em estilo e vou deixar ela para cá justificada para cá e essas

redes sociais também ó vou vir aqui em conteúdo e vou justificar isso à esquerda vou vir aqui no contêiner Opa fiz uma besteirinha aqui dá um Ctrl Z vou vir aqui no contêiner principal layout e vou colocar um espaçamento entre essas linhas Vamos colocar um espaçamento aqui de pelo menos 20 deixa eu ver aqui é acho que 20 já ficou o suficiente e eu também vou vir nesse item aqui da logo vou vir aqui avançado e vou colocar ele para ficar ao final vou deixar desse jeito aqui tá não necessariamente você precisa fazer isso mas

acho que ele ficou meio desencontrado entre os dois por isso que eu vou trocar a ordem aqui e uma coisa importante gente tudo que eu tô mexendo aqui ó Tem coisas que tem esse iconeinstagram puxa pro celular ok tem essa ordem hierárquica aqui no elementor por isso que não vale a pena você fazer para celular e depois você fazer o processo contrário porque você perde o sentido dessa hierarquia mas quando você modifica alguma coisa em tablet ou mobile que tem esse ícone aqui significa que você tá mudando essa especificação só para aquele item naquele dispositivo

Ok então ó por exemplo se eu vir aqui ó se eu vi deixa eu ver uma coisa que não tem aqui esse ícone Zinho Ó tipo opacidade se eu mudo aqui que a opacidade disso Isso aqui vai mudar paraa desktop também ó perceba que sim então vou tirar aqui essa opacidade agora mas se eu Muda alguma coisa que que funcione só para esse dispositivo aqui ó tipo eu vou colocar um espaçamento aqui se eu voltar pra desktop não vai acontecer isso Beleza então tendo esse ícone significa que essa modificação é só para aquilo vamos clicar

aqui agora em atualizar e Prontinho ó só dar uma revisada aqui geral para ver se tá tudo certo pra tablet a gente já matou rapidão agora bora aqui aqui para celular para celular vai ser exatamente do mesmo jeito tá então Ó já vou vir aqui no header acho que eu vou diminuir só um pouquinho essa logo aqui que ficou um pouco grande para celular então Vamos diminuir ela aqui um pouquinho deixa eu ver vou colocar aqui uns 90% uns 85 Acho que uns 85 já tá bom vou alinhar ela aqui à esquerda vamos vir aqui

no contêiner principal avançado vou tirar aqui esse espaçamento vou vincular os valores e dessa vez as laterais vão ser de 15 Então vou colocar 15 aqui para tudo Opa 1061 não pelo amor de Deus colocar aqui 15 beleza ó o mobile aqui o o o drop Down já tá funcionando legal também vamos deixar desse jeito aqui eu vou dar uma diminuída nesse título Zinho de cima vamos colocar aqui deixa eu verou colocar 17 aqui no título também vou fazer a mesma coisa inclusive para títulos assim ó em em mobile uma coisa muito legal é você

usar uma outra unidade de medida essa aqui ó essa VW essa unidade ela se modifica fica de acordo com a largura do dispositivo da pessoa e aí uma coisa ruim de título é que às vezes quando você coloca uma quebra de linha específica dependendo do celular ela fica legal e dependendo do tamanho do celular que pode mudar bastante Ela não fica muito boa e aí você fazendo desse jeito aqui ó com o VW já dá para ter uma ideia melhor de como é que essa essa quebra de linha vai ficar para outros dispositivos também ó

por exemplo eu vou colocar aqui 7.2 se eu aumentar aqui a tela perceba que ele vai aumentando junto então eu não tenho que ficar me preocupando muito com isso vou voltar aqui paraa visualização padrão de 360 E aí aqui no texto acho que eu vou deixar desse jeito aqui mesmo da forma que já está esse botão eu vou dar uma modificada nele ó vamos clicar nele aqui vou vir aqui em conteúdo e deixar ele aqui justificado completo aliás eu vou deixar sem só para você ver o efeito que isso faz tá vamos vir aqui em

estilo eu vou tirar esse preenchimento daqui e aí tá vendo ele já ficou Magrinho desse jeito e aí eu posso até vir aqui em preenchimento por exemplo colocar um pad em geral para tudo aqui ó 20 pixels o que já ficou bacana até mas ele não pega toda a extensão aqui da largura do meu contêiner né que que eu posso fazer para ele fazer isso eu posso vir aqui em avançado colocar como largura Total 100% E aí para ele chegar até o finalzinho aqui eu vou colocar ele como justificado dessa forma ele fica assim bonitinho

independente do tamanho aqui do celular também ok então massa vamos deixar desse jeito aqui inclusive ó aqui no banner Inicial também vou vir aqui em layout e vou diminuir tamanho dessa altura aqui vamos colocar deixa eu ver 550 aqui 500 e colocar aqui 575 vamos vir também aqui em avançado Eu não mudei aqui esse preenchimento então eu vou tirar esse aqui vamos colocar um preenchimento superior aqui normalmente o padrão PR mobile que eu utilizo é 60 em cima e baixo e 15 nas laterais mas aqui né por conta desse header acho que eu vou colocar

talvez uns 80 aqui em cima colocar 60 embaixo acho que vou colocar um pouco mais em cima colocar 90 tipo e aqui dos lados eu vou colocar 15 então V colocar 15 aqui 15 aqui e ó beleza já ficou com uma visualização legal aqui paraa mobile também pegando um pouco dessa textura que a gente tinha colocado aqui isso aqui pra mobile também não ficou muito legal Vamos aumentar a extensão desse diferencial aqui OK vou vir aqui primeiro na imagem vou desvincular esse valor aqui e eu vou colocar aqui ó à direita 20 em vez de

30 acho que fica um pouco melhor e aqui nesse ó eu vou zerar também esse essa margem aqui e vamos colocar um superior aqui também de -5 eu vou diminuir aqui esse enchimento para 20 e aqui também ó vou colocar a direita não no caso a direita não vou colocar aqui à esquerda um espaçamento Zinho aqui de 20 também e aqui inferior deixa eu ver acho que aqui na verdade eu vou colocar um pouco menos ó vou colocar 10 aqui beleza acho que já tá legal assim e agora aqui no estilo do texto eu vou

diminuir isso aqui para 15 deixa eu ver como é que fica aí ó ficou bem melhor desse jeito né vamos voltar aqui isso aqui ó eu vou colocar uma margem inferior negativa aqui só para ele puxar um pouco para cima Beleza vou colocar aqui os10 e show ó já tá começando a pegar forma né vamos vir também aqui nesse contêiner principal avançado vou colocar aquele espaçamento padrão de 60 em cima e 15 aqui nas laterais Acabei esquecendo de fazer isso 60 aqui embaixo também e aqui nesse contêiner eu também vou diminuir um pouco esse espaçamento

acho que 40 é muito para mobile Vou colocar aqui talvez uns 20 Acho que uns 20 já é o suficiente beleza vamos vir aqui nesse título de cima Vou trocar ele aqui para 16 Vamos diminuir também esse título aqui ó vou novamente colocar essa opção de VW E aí eu vou diminuir aqui até ter uma quebra Legal vamos colocar aqui deixa eu ver acho que 6,7 esse texto aqui deixa eu ver acho que eu vou deixar padrão aqui como 16 mesmo e vou fazer essa mesma configuração para esse botão Beleza então bora vir aqui ó

em e aliás aqui em estilo Vamos colocar aqui 20 para todos os lados deixa eu diminuir não acho que ele aqui eu vou deixar como 16 mesmo eu vou aumentar um pouco a a altura da quebra de linha ó vamos colocar aqui 1.3 em só para ficar um pouco mais legível e aqui em conteúdo eu também vou deixar ele como justificado tá lembrando sempre de deixar ele aqui também como largura 100% vamos clicar aqui para atualizar beleza as duas primeiras sessões já estão OK agora essa próxima novamente clicar no contêiner principal tirar o preenchimento colocar

aquele padrão 60 15 60 15 aqui vamos colocar aqui ó como 16 esse primeiro diminuir novamente também o tamanho desse título vou trocar aqui pra VW e vou colocar aqui 6,7 igual a gente colocou no outro Vamos aumentar isso aqui agora para 100% ó já ficou melhor assim vou clicar aqui fora acho que esse espaçamento tá muito grande eu vou diminuir um pouquinho aqui tá vamos tirar aqui esse espaçamento inferior Vamos colocar aqui 15 já é o suficiente os cards aqui já ficaram bem legais dessa forma a única questão é que tá dando esse bugzinho

aqui tá vendo ó que as bordas estão ultrapassando infelizmente às vezes dá esse bugzinho no elemento uma forma da gente melhorar isso é clicando aqui no card vindo aqui em avançado e colocar esse alinhamento ao centro aqui aí isso deixa de acontecer vamos fazer a mesma coisa agora com os outros itens também deixar esse aqui alinhado ao centro esse aqui é ao centro também e agora a gente tira esse bugzinho vamos fazer isso com os seis cards vir aqui beleza acho que foram todos vamos só dar uma olhadinha geral ó já tá bem alinhadinho aqui

também vamos clicar aqui para atualizar e agora aqui nesse então vou fazer aquele mesmo processo vamos vir aqui em estilo acho que esse aqui eu vou colocar até um pouco menos ó vou colocar 20 em cima 15 nas laterais só porque ele tem mais texto vou colocar 20 assim também e aqui na tipografia eu vou aumentar esse essa altura de linha Beleza já ficou um pouco melhor show agora nesse próximo a mesma coisa fica repetitivo mas é assim mesmo gente é assim que a gente grava as informações Vamos colocar aqui 60 15 60 15 também

nas laterais diminuir novamente isso aqui eu poderia até estar copiando e colando estilo mas a gente tem que ter um cuidado em relação a isso tá sempre que você copia e cola um estilo tipo ó vem aqui copia e depois vem aqui em outro item do do do mesmo widgit né e cola esse estilo às vezes dá dá legal tipo ajuda a gente mas às vezes atrapalha tá porque quando você cola esse estilo você cola o estilo de todas as coisas que você fez anteriormente também tanto para tablet como paraa e desktop então se você

faz isso no celular por exemplo você tem ter a certeza de que os estilos desse widget são exatamente iguais em todos os outros dispositivos porque senão você atrapalha os outros que você já fez e aí você vai ter que ter e retrabalho depois também tá então por isso que celular só de vez em quando que eu uso essa função e aí ó que eu tenho uma memória muito ruim então eu nunca lembro direito o que que eu fiz nos anteriores tá mas aqui vamos lá esse contêiner aqui já coloquei o espaçamento vamos vir aqui agora

no título estilo Vamos colocar aquele VW 6,7 a massa vamos vir aqui avançado Vou colocar aqui como 100% também aqui eu vou deixar como tá vou só diminuir esse espaçamento inferior Vamos colocar aqui 15 e já está Bom na verdade como esse aqui é um texto nem precisa né ele já tem esse espaçamento inferior Então vamos tirar isso aqui aqui eu vou deixar um por vez mesmo porque senão fica muito ilegível para mobile acho que fica bom assim desse jeito e aqui no botão vamos fazer o mesmo processo vou colocar ele aqui como justificado largura

100% não tenho certeza se eu fiz isso no outro vamos ver aqui deixa eu ver ó não tinha feito largura 100% justificado vamos atualizar e agora aqui eu vou mudar esse pedin vamos vir aqui em estilo Vamos colocar aqui deixa eu ver vou colocar a mesma coisa que o outro ó 20 em cima 15 nas laterais 20 embaixo 15 na esquerda e aqui na tipografia eu vou aumentar essa altura de linha para 1.3 vamos clicar aqui para atualizar show agora esse último aqui ó vamos lá penúltimo né ainda tem o rodapé vamos clicar aqui no

contêiner avançado Vamos colocar aqui 60 em cima 15 nas laterais Vamos colocar agora aqui vamos clicar no contêiner aqui de dentro do CTA avançado esse aqui eu vou colocar 20 em todas as laterais aqui Vamos diminuir esse título aqui também ó vou colocar como VW e Vamos diminuir esse tamanho deixa eu ver aqui ó vou colocar acho que um pouquinho maior vou dividir vou vou quebrar em quatro mesmo vamos colocar aqui 7.5 aqui também vou deixar desse jeitinho Ok e aqui nesse botão vamos aqui ó colocar como justificado avançado 100% Vou colocar aqui também um

preenchimento de 15 na aliás 20 superior 15 na lateral 20 inferior e 15 aqui na esquerda também aumentando essa altura de linha colocar aqui 1.3 Nosa só dar uma revisadinha aqui geral em tudo tá que ficou bem bom deixa eu só dar uma olhadinha ó eu só vou fazer uma coisa que tá me agoniando tá e alguns Não na verdade acho que eu não vou fazer não ia colocar alinhado à esquerda porque quando passa assim de três linhas normalmente não é uma boa prática você deixar tudo Centralizado assim tá porque normalmente o nosso olho ele

tem uma certa dificuldade de ler as coisas centralizadas mas sempre que você puder se passou de três linhas coloca linha alinhada à esquerda que vai dar uma facilidade melhor de leitura mas acho que no nível que tá aqui ainda tá confortável pro usuário porém fica seu critério qualquer coisa de vir aqui em cada um desses itens e deixar aqui sempre alinhado à esquerda se você quiser tá opcional e aqui ó na parte do rodapé vou fazer o mesmo processo na verdade ele já tá bem deitadinho aqui do jeito que tá não sei nem se eu

vou mexer em alguma coisa acho que talvez só aumentar um pouquinho esse espaçamento superior aqui ó vou colocar uns cinco pixels aqui em cima porque eu percebi que ele tá um pouquinho diferente do outro Vou colocar aqui para alinhar o centro também para não dar aquele bugzinho assim pronto e show Olha só Já temos tudo bonitinho aqui para mobile também vou só pegar esse contêiner aqui ó também vou desvincular esse preenchimento e vou colocar 30 em cima e 30 emb baixo só para ficar um pouco mais confortável assim vamos clicar aqui para atualizar e vamos

dar uma olhada geral é hora que a gente dá uma revisadinha clicar aqui no botão e está ótima o a nossa visualização aqui ó vamos até colocar o olhinho aqui para ver direitinho ó o nosso site aqui no desktop eu vou até visualizar aqui ó numa janela anônima né como se fosse uma outra pessoa acessando Vamos colocar aqui ó e olha só ó já temos aqui toda a nossa página Chique né paraa desktop tanã já tá quase no ponto de correr para abraço pera aí t chique aqui ó vamos visualizar agora pra opa não tenho

aqui o a extensão Mas vamos visualizar daqui ó pra mobile pra tablet né é mobile Simulator tá o nome dessa extensão aqui ó tanto pra mobile a visualização bem chique tá vendo uns efeitinho no botão esses efeitinho de forma leve faz bastante diferença viu gente todo funcional para mobile bem legível bem consistente e aqui pra iPad também vamos lá olha só a visualização né aquele negócio que eu falei não precisa ter tanta dor de cabeça mas quando a gente deixa pelo menos ajeitadinho já faz uma diferença até para você mostrar esse serviço pro cliente né

porque quando a gente fala ah eu desenvolvo sites 100% responsivos e aí a pessoa entra no tablet por acaso tá todo quebrado sabe aí é meio Sacanagem né a gente tem que pelo menos dar uma visão inha geral ali para não passar por esse tipo de perrengue porém ainda tá faltando um detalhezinho aqui ó que é essa parte da Âncora o nosso menu tá lindo maravilhoso aqui mas ele ainda não tá funcional só Relembrando ó eu vou abrir aqui o painel em uma outra aba vou pegar aqui vou abrir isso aqui numa outra aba só

para relembrar lembra que a gente veio aqui em aparência menus e colocou esses linkzin personalizados aqui ó com esse hashtag quem somos # Nossa solucões pois então a gente vai fazer essas identificações agora beleza então Ó aqui no quem somos por exemplo a gente vai clicar aqui nesse contêiner dessa sessão vamos vir aqui em avançado e a gente vai vir aqui nessa parte de ID que é é um identificador e a gente vai colocar exatamente a mesma coisa que a gente colocou aqui no menu só que sem o hashtag tem que ser exatamente a mesma

coisa tá gente senão não dá certo isso aqui ele funciona como se fosse um link dentro da própria página então eu vou colocar aqui ó quem somos aqui nas soluções eu vou colocar o noas nossas solucões assim nesse aqui eu vou colocar depoimentos sempre sem o hashtag Senão também não funciona e o Fale Conosco né no caso ele não traz para cá ele já leva direto ali para uma nova aa Então vamos clicar aqui para atualizar vou clicar aqui para visualizar o site novamente e quando a gente clica por exemplo aqui em nossa soluções ele

vem de elevador para cá quando a gente clica aqui em quem somos também e o Fale Conosco quando a gente clica aqui ele vai para aquele link externo que eu coloquei aqui o Google como exemplo né mas aí no caso você coloca lá o link do WhatsApp beleza e dessa forma nós já temos o nosso site One page completamente configurada aqui bonitinho responsivo para você utilizar no seu próprio projeto no seu próprio negócio colocar no seu portfólio mostrar pra família mostrar pro seu cachorro se orgulhar de si mesmo eu sei que para fazer isso aqui

principalmente Se isso for a sua primeira vez Exige uma baita de uma dedicação então Meus parabéns por você ter chegado até aqui de verdade com certeza esse esforço se você colocar isso em prática mesmo vai valer muito a pena e eu fico muito feliz e orgulhosa de você ter chegado até aqui inclusive se você topar de fazer isso se você animar e fazer isso Pega aí esse resultado final que você acabou de criar dá um printz inho Tira uma foto alguma coisa assim e marca a gente lá no Instagram Faz um storyzinho lá Marca a

gente coloca #es resultado do site projeto feito o que você quiser lá e compartilha com a gente que com certeza a gente vai comemorar junto vai Compartilhar esse resultado com a galera também a gente fica muito animado toda vez que a gente recebe um compartilhamento desse jeito então se você animar faz lá que a gente comemora junto show demais agora você já tem o seu site profissional completo super Modern seja para usar como portfólio para vender para um cliente para anunciar os seus serviços ou o que você quiser Meus parabéns porém antes de terminar esse

tutorial eu quero só aproveitar para relembrar sobre a imersão que vai rolar entre os dias 25 a 31 de Março e vai ser 100% online e gratuito lá nessa imersão eu vou te mostrar todas as novas oportunidades de se trabalhar com web design e desmistificar todo esse negócio de inteligência artificial mostrando não só como essas ias podem otimizar acelerar o seu trabalho e também como você pode usá-las para criar experiências digitais que Encantam e consequentemente ó convertem mais clientes também eu te garanto que com esse conteúdo você vai estar ó um passo à frente de

liderar toda essa nova onda de inovação na área de web design que veio para ficar né gente daqui paraa frente é inteligência artificial para todo lado e o mais importante não ficar para trás esse mercado também então ó já anota direitinho aí na sua agenda tá vai rolar entre os dias 25 a 31 de Março e para fazer a sua inscrição na imersão É só você clicar no link que estará aqui na descrição desse vídeo aproveita também para deixar o seu like se você gostou desse tutorial e seguir o canal aqui para continuar recebendo mais

conteúdo sobre criação de sites profissionais combinado por hoje eu vou ficando por aqui e até o próximo tutorial tchau tchau