Como criar site Institucional com várias páginas no Wordpress e Elementor (Passo a Passo Completo)

Fala pessoal aqui quem tá falando é a Bia da escola de size e nesse tutorial vem passo a passo você vai aprender a fazer um site institucional completo do zero com direito a página inicial páginas sobre empresa página de serviços página de contato ou seja quem completar o mesmo né E ainda por cima 100% personalizado saca só nesse resultado final hiper mega profissional desse site institucional completo eu tenho certeza Que você vai conseguir construir aqui junto comigo do zero mesmo que você nunca tenha feito um site antes na sua vida saca só [Música] e que

demais né fala sério e se você já ficou empolgado com o site que você vai construir aqui hoje já aproveita para deixar um like nesse vídeo né e comentar também o que que você achou se inscrever aqui para continuar recebendo mais conteúdos desse tipo beleza E é claro Lembrando também que esse tutorial é perfeito para você que é web designer Ou pelo menos quer se tornar um Web Designer né e quer ter um projeto bonitão e completo como esse né de site institucional no seu portfólio ou ainda também quer construir algo assim é um cliente

seu Além disso também é perfeito para você que tem uma empresa e quer construir por si só sem precisar contratar outra pessoa para isso né construir um site para apresentar as Informações do seu negócio para as pessoas de uma forma bem bonita e profissional também e uma coisa que é importante de salientar é que aqui nós iremos construir um exemplo de site institucional para uma clínica de psicologia assim como vocês viram né mas todo essa estrutura que nós vamos montar é super simples gente mamão com açúcar de adaptar para qualquer outro nicho que você precise

por aí também apenas trocando por exemplo as cores do site as Imagens o conteúdo em si que a gente vai colocar em si mas toda o esqueleto né todas as páginas e tudo mais já vão estar criado só para você adaptar de uma forma bem tranquila rapidinho e facinha por aí massa né agora bora começar para fazer esse tutorial eu vou utilizar a hospedagem da hostinger que é a hospedagem que eu mesma mais utilizo nos meus próprios projetos e também é hospedagem que a gente mais recomenda para os nossos alunos e já já eu te

Explico melhor o porquê mas antes de tudo sim é importante reforçar que sempre que você quiser criar um site e quiser que esse site esteja disponível para as pessoas Você vai precisar fazer a contratação de um domínio e de uma hospedagem para isso ok Além disso é importante que essa hospedagem seja de qualidade justamente para você não precisar ficar sofrendo com dor de cabeça em relação a esse serviço então em resumo esses dois passos são Indispensáveis independente do site que você for fazer Ok de uma forma bem simplificada para você que nunca ouviu falar o

que que é esse negócio O que que é esse diacho de hospedagem domínio hospedagem é basicamente um espaço onde você vai colocar os arquivos do seu site para que outras pessoas consigam ver esse site de forma online É como se você tivesse por exemplo alugando um espaço na internet para guardar as suas páginas imagens e informações para que depois as Pessoas consigam acessar isso pela internet Ok já o domínio por outro lado é basicamente o nome do seu site é por ele que as pessoas vão conseguir encontrar suas páginas por exemplo o domínio do Google

é o quê www ponto google.com.br ou então www.google.com certo o domínio da escola de sites www.escola de site e assim por diante Ok meu nome do seu site e a gente for colocar isso dentro de uma analogia é Como se o domínio por exemplo fosse o nosso número de celular onde as pessoas conseguem salvar né o nosso contato ligar e mandar mensagem através desse número e a hospedagem fosse a operadora por trás disso tudo ok e sim do mesmo jeito que a gente não consegue fazer ou receber chamadas tem um número e sem um operadora

a gente não consegue ter um site no ar e ser encontrado pelas pessoas sem um hospedagem e sem o domínio Beleza acho que assim fica Simples de entender né e justamente para ter acesso a um domínio e uma hospedagem no site que eu vou desenvolver aqui com vocês eu vou utilizar o serviços da hostinger e é a nossa maior recomendação de empresa de hospedagem tanto pela questão da qualidade como também facilidade suporte e principalmente pela questão do custo-benefício que ela oferece Ok já já eu mostro isso mais em detalhes para vocês também Essa vai ser

a etapa no processo de construção do Site que a gente vai fazer aqui hoje e para fazer essa etapa da contratação você tem duas opções a seguir mas eu já adianto que a segunda opção é a melhor porém de qualquer maneira fica a critério aí para você escolher qual que é o melhor caminho para você vamos lá a primeira opção é a de seguir aqui comigo normalmente nesse tutorial onde eu vou mostrar todo o processo de contratação aqui junto com vocês mostrando todo esse passo a passo ok porém a segunda opção Que é a mais

indicada é a de clicar no botão abaixo e fazer uma contratação guiada com um especialista na nossa equipe nessa contratação guiada você vai ter alguém aqui da escola de sites fazendo todo esse processo junto com você justamente para garantir que tudo fique 100% Beleza você vai basicamente ganhar uma consultoria de graça para fazer esse processo Porém isso não é tudo ainda vem a melhor parte no final da contratação vem uma grande surpresa Você vai ganhar de bônus a nossa conta uma licença do elementor pro só para você ter uma ideia essa licença por fora aí

ela tá custando numa média de 59 dólares para você comprar aí por sua conta de forma avulsa mas se você fizer essa contratação guiada com a gente você vai ganhar ela de graça sem pagar um centavinho a mais por isso olha que coisa boa mas ó reforçando hein esse super bom não só vale para quem fizer a contratação ao vivo ali com a nossa Equipe tá bom essa contratação guiada se você decidir Por algum motivo não optar por essa contratação guiada e perder esse benefício né Essa licença que sim Você vai precisar para conseguir seguir

esse tutorial vai ficar com sua conta Beleza então se eu fosse você eu já clicaria no link aqui de resgate aqui embaixo tá na descrição desse vídeo para fazer essa contratação guiada e ganhar esse presentão que com certeza vai valer bastante a pena mas de qualquer maneira Como eu falei eu vou mostrar aqui também todo esse passo a passo da contratação e por algum motivo você preferir esse outro caminho ok vamos lá bom gente eu já tô aqui na página da hosting é para conseguir fazer esse processo de contratação junto com vocês Tá e para

você conseguir chegar nessa mesma página que eu tô é só você acessar um link que também vai estar aqui na descrição Beleza você vai acessar essa mesma página aqui que eu tô também e para a Gente conseguir acessar aqui a hospedagem que a gente vai contratar a gente vai vir aqui no menu de hospedagem e vai clicar aqui em hospedagem de site Ok vamos ver as opções que eles dão aqui pra gente e só para reforçar gente no fim das contas Por que que a gente mais recomenda a hosting Primeiro ela é uma empresa que

é referência de qualidade aqui no mercado tá se você for no Reclame aqui você vai ver que ela é referência de qualidade por lá também Ela tem muita recomendação uma comunidade gigantesca também para te ajudar é a hospedagem que a gente mesmo mais utiliza nos nossos projetos tanto nos nossos projetos como também dos nossos clientes os nossos alunos utilizam também e gostam bastante da experiência é uma empresa que tem um ótimo custo-benefício também e vários tipos de hospedagem para praticamente qualquer necessidade que você tenha por aí e né Assim como eu falei sobre a Questão

do número da operadora quando a gente vai contratar uma hospedagem é bem importante que a gente Pegue uma hospedagem que tem uma certa referência e a gente consegue escutar de uma pessoa que já tem experiência de que sim ali você não vai ter muita dor de cabeça ou não vai ter dor de cabeça justamente porque assim Como as operadoras né Que enchem a gente de dor de cabeça Ave Maria as hospedagens elas também podem ser desse jeito tá e eu tô aqui como uma Voz amiga dizendo para vocês Tipo olha eu já tive experiência com

todo tipo de hospedagem que vocês podem imaginar daí tá já tive muita dor de cabeça com isso mas com arroz chega Felizmente eu encontrei uma ótima experiência um ótimo suporte também uma ótima facilidade de configuração e por isso que eu recomendo assim tranquilamente para os meus alunos porque eu sei que Muito provavelmente eles também vão ter essa mesma boa experiência Ok e aqui como você pode ver A gente tem alguns tipos de hospedagem tá olhando por aqui dando uma explorada no site você vai encontrar ainda mais mas basicamente só para a gente dar uma explorada

aqui em geral esses aqui são os principais hospedagens contratadas aqui dentro da Rocha ela vai desse preço aqui da single até Por exemplo essa Cloud a que a gente vai contratar é essa aqui ó a Premium beleza primeiro porque tá sites institucionais principalmente que não tem em 99,9% das vezes uma Necessidade muito grande assim de uma hospedagem hiper robusta e dê muitos acessos e muito desempenho e muita armazenamento e tudo mais são projetos um pouco mais tranquilos que você não tem tanta necessidade desse tamanho de robustez essa aqui ela já é uma excelente opção com

recursos mais do que o suficiente para poder te dar Total tranquilidade para esse tipo de projeto Beleza então por isso que a gente vai pegar justamente essa aqui e se você for Dar uma comparada aqui com os outros recursos aqui eles dão várias informações de comparativos de recursos caso você queira dar uma pausada nesse vídeo e ver aqui ó tem esses pontinhos de interrogação onde você pode passar o mo ver uma explicação de cada um desses recursos também tá eu não vou entrar em detalhes aqui mas basicamente essa aqui é a que traz o melhor

custo-benefício para o tipo de projeto que a gente vai fazer aqui hoje que é um site Institucional a gente der só uma olhadinha aqui bem básica rapidinho você pode ver que ela dá acesso a muitos sites dentro de uma própria hospedagem eu não digo para você colocar 100 sites numa mesma hospedagem Tá mas pelo menos isso aqui é um indicativo para você tipo saber que tipo ah se eu quiser se eu quiser por exemplo colocar um ou dois sites três sites para um cliente aqui dentro dessa mesma hospedagem Muito provavelmente eu vou estar com recurso

Suficiente para isso E além disso também ó Ela traz 100 GB de armazenamento SSD que é um tipo de armazenamento que faz com que o seu site tenha um desempenho mais rápido traz backup semanais também e Meios profissionais grátis SSL limitado grátis também para quem não sabe o que que é SSL é basicamente o que ativa esse cadeadinho aqui do lado da nossa URL e diz para os mecanismos de busca de tipo ó esse site aqui confiável as pessoas podem entrar nada pior do que Você entrar no site já aparecer logo de cara que não

seguro dá para você ter uma ideia o Google nem mostra esse tipo de site para as pessoas ele não ranqueia então você precisa disso aqui e na grande maioria das hospitais você teria que pagar por isso aqui a parte e a roxa iria te dar de forma ilimitada tanto para os domínios Como subdomínios que você criar por aqui beleza entre vários outros recursos aqui como eu falei eu não vou entrar em detalhes para isso Aqui não ficar muito extenso Mas você pode dar uma pausada e fazer esse comparativo se de qualquer maneira você quiser uma

consultoria mais detalhada sobre o qual que é o melhor tipo de plano especificamente para o seu projeto tipo abi eu tô fazendo um site aqui mas sim eu tenho a expectativa de um grande número de tráfego eu preciso de bastante armazenamento Porque vão ter muitas imagens e tudo mais então ó faz o seguinte mais uma vez opta pela Contratação guiada que você vai ter um especialista te ajudando nesse processo E além disso também o próprio suporte da Rocher pode te ajudar nesse processo beleza aqui eu tô recomendando essa que vai adiantar para grande maioria dos

casos Mas se você tiver algum caso bem específico eu aconselho que você faça esse processo também ok eu sei que muitas pessoas devem olhar principalmente esses dois planos aqui pensar por que que você não escolhe esse Aqui que ainda mais baratinho do que esse outro olha sabe quando você vai no shopping por exemplo você tem lá duas opções de milk shake né você tá com vontade de tomar muito vai lá e vai comprar um milk shake e aí você tem um milkshake pequenininho de 300 ml e tem outro maior tipo que eles ml ou mais

né E aí às vezes quando você vai ver a diferença de preço entre os dois é tipo um dois reais a mais e você fica cara eu nem queria um milkshake grande mas no Fim das contas acho que eu vou pegar esse aqui porque parece sacanagem vou pagar tanto por um produto tão menor né e basicamente esse aqui é a mesma coisa tá gente Ele tem muito menos recursos E além disso também ele tem uma coisa que faz com que não vale a pena que é essa questão aqui de não oferecer um domínio grátis lembra

do que eu falei que a gente precisa de hospedagem E domínio a partir desse plano aqui quando você contrata a partir de um ano aqui de Hospedagem você ganha o domínio também o que já é um ótimo chamariz para esse aqui justamente porque vai ser você vai ter um investimento a menos aqui de pelo menos uns r$ 50 de domínio e você teria que contratar por fora de qualquer maneira e já não compensaria essa diferença de valor fora todos os outros recursos a menos também tá então por custo-benefício esse aqui é o que eu mais

recomendo e por isso que eu já vou inclusive clicar aqui para adicionar Esse é o carrinho quando a gente adicionar o carrinho ele dá mais um resumo aqui dos recursos que você vai ganhar nesse plano que você optou E aí Aqui tem algumas diferenças de valores e é claro que quanto mais o prazo né Quanto mais durar sua hospedagem por exemplo se você contratar aqui por 48 meses menos vai ser o valor proporcional por mês do valor total dessa contratação Ok então 48 meses você tem uma mensalidade proporcional a isso de 12,99 Né mas esse

benefício aqui de três meses grátis dentro desse plano aqui e você tem também essas outras opções o que eu menos recomendo é justamente esse aqui de pagamento recorrente porque primeiro que é bem desproporcional a quantidade aqui de do quanto que você pagaria por mês né proporcionalmente do quanto que você pagaria por mês nessa recorrência aqui mensal tá vendo vá mais do que dobra esse valor então por isso que eu não recomendo E além disso também você Perde o benefício do domínio grátis quando a gente faz um site é sempre bom pensar ali de médio a

longo prazo né quando você tá fazendo essa contratação Então esse aqui já é uma excelente opção onde você vai ter um bom valor total inclusive você ainda pode dividir também em 12 vezes beleza no cartão vai ter um pequeno juros ali mas de qualquer maneira não chega nem perto dessa recorrência mensal aqui tá você pagaria tipo por exemplo cerca de 20 e poucos Reais né nesse caso aqui o que ainda fica menos da metade do valor desse aqui ok E você ainda não perde esse grande benefício aqui do domínio grátis lembrando também que quando a

gente fala de contratação de hospedagem de domínio isso é um valor de recorrência OK assim como operadora de telefone tá e número e você não paga uma vez ali uma um plano da operadora por exemplo e depois pronto você tem esse número e essa linha para o resto da sua vida não você precisa ir Pagando né ou seja mensalmente ou então colocando crédito no seu celular e tudo mais né Aqui é do mesmo jeito também tá essa hospedagem aqui por exemplo se você contratar de 12 meses após 12 meses vai ter o processo de renovação

E aí O valor vai ser de acordo com a tabela vigente dessa época não tem como eu te adiantar quanto que seria isso OK mas de qualquer maneira e o domínio também é da mesma forma ele dá um domínio grátis por um ano mas após um ano se você quiser Continuar com esse nome do ar e o seu site ele no ar direitinho você vai precisar renovar tanto a hospedagem quanto o seu domínio também ok isso no caso esse site for para um cliente seu é preciso que você dê uma orientada quanto a isso também

que sim é um investimento necessário quando a pessoa quer ter um site no ar assim como a gente já conversou ali atrás aqui no caso como eu já tenho uma conta aqui na Rocher já aparece para mim que eu tô logada aqui Beleza assim que eu adicionei no carrinho ele já logo automaticamente para mim mas de qualquer maneira Pode ser que caso você não tenha uma conta o que provavelmente é o caso vai aparecer aqui um segundo passo de criar uma conta onde você pode colocar o seu e-mail ou então logar diretamente com uma rede

social tipo Google por exemplo ou Facebook é só você clicar lá Google por exemplo selecionar um e-mail do seu gmail e aí você já vai estar autenticado Aqui dentro da Rocha Tá e por fim agora sobre a forma de pagamento a Rússia tem vários tipos de formas diferentes você pode pegar pelo cartão de crédito pics boleto PayPal até moeda digital aqui o que sinceramente não tem nem ideia de como é que faz mas se você já tiver habituado beleza Tá mas aqui ó as que eu mais recomendo Quais são as de cartão de crédito ou

pics porque é um pagamento instantâneo ou então pelo menos praticamente instantâneo onde você não Vai precisar demorar muito para continuar com esse tutorial aqui tá se você escolher principalmente essa opção de boleto aqui pode ser que você tenha que pausar esse vídeo aqui e voltar só Talvez daqui a dois ou três dias úteis no período de compensação desse boleto tá Às vezes pode ser antes mas levando ali em essa compensação Pode ser que leve esse prazo todo também E aí para não ter que esperar tudo isso eu recomendo que você vá aqui pela opção de

Cartão de crédito ou então de pics e o pagamento ali ele já cai na hora ou então pelo menos de 15 a 30 minutos no caso ali do pix Ok na grande maioria das vezes até bem mais rápido que isso Mas eles colocam esse tempo limite ali de 15 a 30 minutos de compensação desse valor e lembrando também que por cartão de crédito assim como eu falei ó aqui você tem um valor total desse hospedagem que seria o valor anual nesse valor promocional aqui ok que inclusive eu já Vou colocar um descontinho a mais aqui

para vocês mas de qualquer maneira colocando aqui para enviar um pagamento seguro você ainda consegue optar pela opção de parcelar em até 12 vezes no cartão vai rolar um pequeno juros ali mas como eu falei ainda fica bem menor do que esse valor aqui então ainda vale bastante a pena se você tiver esse limite do seu cartão eu vou optar pela opção de pics aqui ok então vou clicar aqui para primeiro né antes de enviar Esse pagamento eu vou clicar aqui tem um cupom de desconto e eu vou adicionar o cupom da de sites que

é só você digitar a escola de sites desse mesmo jeito aqui ok e clicar aqui em aplicar E aí olha só que beleza ele já vai aplicar aqui uns 20 reais de desconto né nesse valor aqui o que é um ótimo descontinho também já é mais do que o milk shake né E no fim das contas vai ficar um valor um pouquinho menor então fica isso aí de presente para vocês Beleza vou clicar aqui para Enviar pagamento seguro e no caso aqui de pix ele vai pedir para você um CPF ou CNPJ depois clicar aqui

para continuar o pix ele vai gerar um código e um QR que é só você pagar direitinho no aplicativo do seu banco e como eu falei naquele período ali de 15 a 30 minutos vai rolar essa compensação beleza e se você optar também por boleto ou cartão de crédito vai ter o passo a passo de acordo com esse tipo de pagamento assim como qualquer compra online que você já tenha Feito aí na vida é um processo bem tranquilo E no fim das contas a gente vai cair na mesma tela ali quando a gente for ali

para a plataforma mesmo dahost que após esse pagamento Beleza eu vou fazer aqui o preenchimento com meu CPF vou clicar aqui para continuar e vou o meu QR vou fazer esse pagamento e eu já volto com vocês na próxima tela Prontinho gerei aqui o meu QR E aí vou fazer o pagamento aqui rapidinho desse desse valor e eu já volto com vocês na Próxima tela Prontinho gente eu fiz o pagamento lá no banco tá eu cliquei em continuar e assim que eu acessei em continuar Eu já entrei aqui na minha página inicial aqui do painel

da Rocher Ok para vocês não vai estar aparecendo desse jeito porque aqui no caso eu já tenho várias hospedagens contratadas nesse meu mesmo usuário Ok eu tenho várias hospedagens e domínio justamente porque eu tô sempre né fazendo novos tutoriais aqui para vocês e tudo mais Mas de qualquer maneira para vocês pode ser que não esteja aparecendo a opção nenhuma tá e quando a gente clica por exemplo aqui em hospedagem Pode ser que para você apareça ali os planos de hospedagem se você tiver feito essa mesma modalidade de pagamento via pics igual eu Ok não tem

problema beleza isso só significa que a sua contratação ainda que o seu pagamento ainda não caiu E aí no caso é só você ir atualizando essa página Até que apareça aqui a opção de Começar a hospedagem aqui junto comigo beleza no caso aqui ó quando eu venho aqui início ainda não aparece nenhuma hospedagem contratada ainda hoje justamente porque não foi feito aqui não caiu o pagamento do pix que eu acabei de fazer aqui beleza mas assim que cair eu vou continuar atualizando aqui pode ser que leve esse períodozinho aí de uns 15 a 30 minutos

eu vou dar uma pausa aqui vou continuar atualizando assim que cair eu volto com vocês se você tiver feito Por cartão de crédito o processo é instantâneo e assim que você clicar em finalizar esse crédito e esse pagamento foi aprovado né você já vai cair na página de assistente virtual para começar a sua configuração eu peço que você dê uma pausa tá nesse processo aí E daqui a pouquinho volte comigo para fazer aqui junto assim que eu acessar esse assistente Beleza eu vou dar uma pausa aqui vou esperar esse pagamento cair e assim que cair

eu volto aqui com Vocês aí Prontinho depois de esperar ansiosamente aqui por uns 15 minutos mais ou menos apareceu aqui para mim a nova hospedagem que eu acabei de efetuar o pagamento aqui tá E aí eu vou clicar aqui em configurar para começar o assistente virtual aqui da roxa em grande ele vai guiar todo o nosso processo essa configuração da nossa hospedagem e instalação do WordPress também beleza e aí ó você pode tanto fazer isso aqui nessa aba Inicial como Também aqui em hospedagem clicarem em configurar na hospedagem que ainda não foi configurada Beleza vou

vir aqui e aí lembrando também que eu vou clicar aqui em configurar a gente vai cair nesse assistente virtual e se você tiver feito esse mesmo processo de pagamento só que pelo cartão de crédito você já vai cair diretamente nessa página aqui o que é bem mais simples né por isso que é a forma de pagamento que eu mais recomendo de qualquer maneira E daqui a gente Segue igual todo mundo aqui de mão dada fazendo essa contratação Ok Bora lá vou clicar em comece agora primeira coisa que ele pergunta para a gente é se a

gente quer criar um novo site por exemplo cria um site WordPress ou em outro sistema de gerenciamento de conteúdo ou se a gente quer migrar um site de um outro servidor vou clicar aqui para selecionar nessa parte de criar um novo site utilizando WordPress Ele pergunta se a gente vai utilizar o WordPress ou esse criador de partes da roxa e ir utilizando Inteligência Artificial apesar de parecer bem legal ele é bem mais limitado do que você fazer sites pelo WordPress e por isso que a gente vai optar por essa opção aqui optar por essa opção

está certo ah a gente vai optar por esse aqui tá porque o nosso site é feito WordPress vou selecionar isso e agora ó eu tava importante aqui em presta atenção Ele pede para a gente criar credenciais de Login para nossa conta do WordPress porque eu preciso ter atenção nessa parte Bia porque essa parte aqui você vai preencher tanto com o seu e-mail administrador do site o e-mail que vai servir de administração desse site e a senha do administrador eu preciso que você salve essas informações aí tá já abre um bloquinho de notas salva isso aí

direitinho e use um usuário e uma senha que você vai lembrar depois justamente porque você vai precisar disso aqui para Depois acessar novamente o painel administrativo do seu site e conseguir editar e manter o que você quiser lá dentro Beleza então você precisa disso aqui lembrando também que essa senha ela precisa ser forte cumprindo todos esses requisitos preencher com uma senha aqui rapidão e vou clicar aqui em continuar depois disso ele já vem dando uma de enxerida aqui querendo que a gente já adicione alguns plugins tipo ah pega essas recomendações de plugins aqui o Que

na maioria das vezes são plugins bem bons mas nesse caso aqui eu vou desabilitar todas essas opções e os plugins que a gente for utilizar eu vou colocar personalizadamente essa palavra existe personalizadamente com vocês lá dentro do nosso painel do WordPress Ok vou deixar tudo isso aqui desmarcado e vou clicar em continuar isso aqui caso você queira adicionar depois também não tem problema nenhum tá lá no painel dowordpress você vai ver como é que a Gente adiciona plugin você vai ver que é um processo bem fácil também vamos clicar aqui em continuar nesse próximo passo

ele já dá alguma sugestões de visuais e templates aqui pra gente utilizar na criação do nosso site eu vou colocar aqui pular eu não preciso de um template porque a gente vai construir esse site do zero e utilizando o outro tema que não é esse que tá mostrando aqui ok então vou clicar aqui e agora outro passo bem importante Essa é a hora Onde a gente vai começar a configurar o nosso domínio lembra que a gente colocou um plano lá que dá acesso a um do gratuito por um ano Pois é Aqui é onde a

gente vai falar Beleza vou resgatar esse presente que eu acabei de ganhar Então você tem a opção de comprar um novo domínio aqui pela roxanguer mesmo né se você quiser fazer isso você pode usar também um domínio existente por exemplo se você comprou um domínio e um outro servidor então por exemplo pela registro Br alguma coisa assim e quiser trazer esse domínio para cá você pode seguir os passos aqui dessa outra opção mas no caso como a gente ganhou um domínio aqui eu vou selecionar justamente o resgate dessa opção aqui beleza vou falar que eu

quero meu domínio grátis vamos selecionar isso aqui e aí ele vai perguntar qual que é o domínio desejado algumas recomendações tá primeiro aqui do lado você vai encontrar várias extensões de domínio extensão de domínio É o que fica no final da só URL por exemplo.com.br enfim tem diversos tipos de opções é só você dar uma olhada aqui e ver a quantidade que tem tá as extensões que eu mais recomendo para grande maioria dos casos são com.br em primeiro lugar principalmente quando você tá fazendo sites com a audiência aqui no Brasil porque você tem mais chances

de aparecer no Google ou essa extensão aqui ok e em segundo caso Essa ponto também que também é muito utilizada Beleza ela é mais geral mais internacional tipo não tem delimitação do BR né no final ali mas de qualquer maneira também é um tipo de extensão legal caso você tenha alguma dificuldade Então não queira que o ponto com.br ou talvez já tenha o ponto com.br também tá E aí um outro detalhe domínios são exclusivos assim como o número de telefone duas pessoas não podem ter o mesmo número de telefone certo dois Sites também não podem

ter o mesmo domínio por isso que pode ser que aqui você tem que colocar algum nome aqui que outra pessoa já esteja utilizando dessa forma você não vai conseguir utilizar esse domínio Então você precisa escolher um nome exclusivo aqui beleza ele já faz essa pesquisa de disponibilidade para você por exemplo aqui o site que a gente vai fazer eu coloquei lá uma logo com o nome psicovida eu inclusive do jeito que não tem esse domínio aqui porque me Parece um nome um tanto comum para clínica de psicologia vou colocar aqui extensão ponto com.br E vou

colocar aqui para pesquisar e como eu imaginei esse domínio já está em uso tente outro domínio e aí eu posso tentando outras possibilidades que se encaixem no nome que eu esteja querendo beleza a minha recomendação é que você procure por algo que seja relacionado com o nome da sua empresa ou então o próprio nome mesmo da sua empresa OK e não seja algo muito Grande ou com caracteres especiais também porque o URL a gente não utiliza isso Beleza sem espaço e sem caracteres especial e evitar também palavras que sejam de difícil escrita como por exemplo

palavras mais puxadas ali para o inglês e tal que no fim das contas das pessoas vão falar né o nome do seu domínio Mas vai ficar na cabeça das pessoas Tá mas como é que eu escrevo isso para acessar esse site Então vamos facilitar a vida dos nossos usuários Colocar uma coisa enxuta que tem a ver com a nossa marca com o nome ele da nossa marca né mas que de qualquer maneira não seja difícil de escrever e que também não seja uma frase inteira dentro de um domínio Beleza então por exemplo eu vou tentar

aqui Clínica psicovida provavelmente acredito que já devo ter também E aí é claro se você quiser uma coisa muito exclusiva e já ter no ponto com ponto br você pode ver se tem no ponto com ele também mas eu Vou tentar uma outra opção aqui consultório psicovida vamos ver esse aqui é mais específico ó tá vendo esse aqui tá disponível Beleza então vou selecionar esse aqui mesmo e aí você faz a mesma coisa com seu domínio aí também vamos clicar aqui em continuar depois ele vai pedir para a gente completar o registro desse domínio aqui

tá se você já tiver um login na host que já tiver feito esse processo antes Provavelmente você vai ter já um perfil existente você Pode utilizar as informações que já tem existência aqui tá Inclusive eu mesmo tenha mas eu cliquei aqui para adicionar o novo perfil para fazer isso junto com vocês vou clicar aqui em próximo passo também você clica nisso Se isso for sua primeira vez Ok E aí você vai selecionar aqui se você quer para um perfil pessoal se você quer contratar esse domínio e um perfil pessoal ou então para uma empresa e

organização e isso aqui vai mudar basicamente se você vai contratar por Exemplo por meio de um CPF ou se você vai utilizar um CNPJ nessa configuração eu vou colocar aqui como o pessoal mesmo mas fica a sua escolha vou clicar aqui em próximo passo depois para efetuar esse cadastro você vai colocar aqui os seus dados de contato né nome e-mail cidade endereço CEP telefone enche aqui tudo direitinho e depois a gente clica aqui em próximo passo e por fim você vai adicionar aqui o CPF ou CNPJ que você quer vincular a configuração desse Domínio Beleza

vou colocar um CPF aqui e vou finalizar esse registro Prontinho depois de finalizar aquele registro lá ele já aparece aqui algum alguns detalhes de resuma aqui dessa configuração né é onde você pode por exemplo consultar se você realmente escreveu certinho domínio que você tá configurando Lembrando que se você digitar alguma coisa errada aqui ou depois quiser mudar não tem como tá depois só contratando outro domínio Mesmo não tem disponibilidade de edição sobre isso aqui não e também aqui ó na localização do Servidor padrão aqui na roxa em que você já contrata com o América do

Sul ligado aqui né que é o servidor mais próximo aqui dentro do Brasil mas de qualquer maneira é caso você esteja fazendo um site por exemplo com audiência em outro local né primeira recomendação é que você não utilize.com.br Provavelmente nessa nessa opção Seria legal você Colocar uma extensão ponto com né que é mais Internacional e aqui você selecione uma localização de servidor que seja mais próxima da audiência que vai estar acessando o seu site tá então se por exemplo você tá fazendo aqui um site que vai ser acessado pelo público do Canadá você vem aqui

e seleciona o da América do Norte que fica mais próximo do de onde é só audiência vai estar isso Vai facilitar o desempenho para essas pessoas também não vou deixar aqui como Padrão mesmo tá tudo certinho aqui e vou concluir essa configuração depois disso é a hora dele fazer essa configuração aqui de forma descomplicada rapidinho ele vai passar um tempo carregando a gente toma um cafezinho e espera isso aqui acontecer beleza e Prontinho Chegamos aqui etapa final de configuração da nossa hospedagem E aí aqui ele já dá a opção da gente editar o nosso site

eu vou clicar aqui Ctrl e clicar em editar site para abrir uma Outra aba ele tá aparecendo aqui que ainda não é possível acessar esse site tá isso porque depois que a gente faz essa configuração ainda tem um tempinho de propagação desse domínio para hospedagem que você acabou de adquirir Ok Isso pode durar é cerca de algumas horinhas tipo de duas horas de pode ser de alguns minutos na verdade até em média umas 24 no máximo 48 Horas beleza mas aqui ó de qualquer maneira quando você clica aqui em gerenciar site deixa Eu clicar aqui

quando ainda tá tendo esse esse processo de propagação a maioria das vezes vai aparecer um aviso aqui para você de que o seu site ainda tá sendo propagado ó tá vendo apareceu aqui status de domínio seu domínio está se conectando com a hosting Ou seja ainda tá acontecendo nesse processo de propagação Beleza então o que que eu vou fazer mais uma vez eu vou dar uma pausa aqui nesse vídeo sugiro que você pausa aí também ok atualizando aqui algumas Vezes até esse aviso aqui é parar de acontecer e uma outra forma também de você ver

se essa propagação já foi concluída ou não caso você não queira seguir a exclusivamente por esse aviso aqui é você pegando aqui a sua url que você acabou de configurar né o seu domínio no caso aqui consultório psicovida.com.br eu vou dar um enter aqui e quando aparecer alguma coisa que não seja isso aqui ou uma pré-visualização uma coisa assim tipo Aparece uma página aqui certinha significa que essa propagação foi concluída e a gente já pode continuar aqui com tutorial Ok eu vou dar uma pausa aqui mais uma vez esperar uns minutinhos e eu já volto

aqui com vocês para a gente fazer esses próximos processos combinado Prontinho apesar do aviso de propagação mostrar ali que esse processo pode durar de duas a 24 horas não foi nem um tempo de eu pegar direito aqui é um café novo na cozinha para Poder enfim cumprir como eu visto diário né eu voltei aqui já tinha sido propagado e tal já tá tudo certinho aqui ó atualizei aquela página que tava mostrando que não tava disponível E já apareceu esse outro sitezinho aqui bem bonitão né a gente ainda vai mudar muita coisa nele e também aqui

já não tá mais aparecendo aquele aviso beleza e como é que como é que eu faço para poder chegar agora até o meu painel do WordPress Lembrando que durante esse processo de Contratação aqui com assistente virtual da Rocha que ele já fez esse processo de instalação também do WordPress no nosso site tá desde que a gente sinalizou que sim a gente utilizaria o WordPress no nosso site e por isso que agora é só a gente clicar aqui para editar o nosso site e a gente já vai cair direto no painel do WordPress Beleza vai aparecer

esse gazinho da roxa aqui e ele vai redirecionar a gente para o nosso painel E aí Lembrando aqui tá lembra do que eu Falei sobre a questão do usuário e da senha Você vai precisar utilizar agora aquele mesmo usuário e a senha que eu pedi para você salvar para poder acessar esse site aqui não vou colocar aquele mesmo e-mail que eu cadastrei lá a senha eu posso até selecionar aqui para lembrar para depois não ter que fazer esse mesmo processo de novo e clicar aqui para acessar e lembrando também que para você conseguir acessar mesmo

essa mesma tela de login aqui é Sem ser pela hostga né para você não ter que toda vez entrar aqui clicar para editar o site acessar o seu painel O que que você vai fazer você vai acessar a sua URL aqui vai completar com WP - admin e você vai cair nessa tela de login aqui ah não rimou eu não gosto quando as coisas rimam Não beleza gente mas eu vou colocar aqui agora vou clicar para acessar e eu vou acessar o painel Prontinho Chegamos aqui ao nosso painel lindo e maravilhoso tá só um lembrete

Aqui também rapidão é que depois dessa propagação Pode ser que mesmo quando você acesse o painel ainda esteja aparecendo para você aqui em cima não seguro Ok para mim esse cadeadinho já foi ativo porque foi um processo bem rápido mas às vezes essa questão aqui do SSL Ele pode demorar um pouquinho mais do que a propagação do domínio não tem problema beleza aqui na Rocher esse processo de ativação do SSL acontece de forma automática você não precisa se Preocupar com isso só esperar ali cerca de um dia mais ou menos que isso aqui vai vai

vai estar funcionando normalmente aqui para você e se você tiver algum problema quanto a isso tio passou de 24 horas os seus SSL ainda não tá ativo você pode voltar aqui no seu painel clicar aqui nessa parte do chatzinho e entrar em contato com o suporte da hosting falando sobre a sua situação que eles vão te ajudar com isso também inclusive aqui Você já tem o Tópico de SSL É só você clicar nesse tópico aqui e falar com atendente a respeito desse assunto que ele vai te ajudar a ativar isso direitinho beleza vamos fechar aqui

e vamos começar aqui agora a nossa segunda etapa aqui dentro do painel do WordPress e sim essa é a segunda de seis etapas que a gente vai fazer para concluir esse tutorial aqui beleza a primeira etapa aqui ó da criação do nosso site institucional já foi feita que é justamente esse ponto Aqui da contratação do nosso domínio e hospedagem beleza sendo que você tinha duas opções para isso tanta contratação guiada com direito ao bônus do elementor pro que vale muito a pena além da Consultoria gratuita com um dos nossos especialistas ou então uma contratação que

acabou de ser feita aqui com dentro desse vídeo beleza e depois também esse processo aqui de instalação de WordPress que já é feito durante a própria contratação aqui da hospedagem agora na Segunda etapa nós vamos fazer algumas configurações iniciais no WordPress e no elemento pro Ou seja a gente vai fazer algumas configurações Gerais aqui dentro do painel mesmo mexendo no título descrição e nos links permanentes da nossa página a gente vai fazer aqui a instalação e ativação do nosso tema e os plugins que a gente vai utilizar e depois a gente vai ativar aqui um

recurso bem importante que é o do Flex Box container dentro do nosso elemento Beleza então vamos lá Começando por essa etapa aqui vamos vir aqui ó primeiro de tudo né fazer esse aqui é o painel do GPS aqui em cima você vai ter algumas opções aqui que você não precisa se preocupar basicamente o principal aqui em cima é essa parte aqui da visita no seu site se você quiser ver como é que é que tá a sua página inicial aqui ou então esse wzinho aqui para você voltar para parte inicial do seu painel e aqui

do lado você vai ter acesso a várias Ferramentas que sim a gente vai passar aqui os principais pontos durante esse passo a passo e por isso que eu não vou entrar em detalhes sobre cada uma nesse momento três tutorial aqui não durar 84 anos e três dias né então primeiro aqui ó na nossa no painel Inicial aqui do WordPress o que que eu vou fazer eu vou clicar aqui em opções de tela só para dar uma limpada vou desvincular todas essas notificações aqui eu detesto essa poluição visual que aparece aqui no Início do WordPress e

vamos deixar desse jeito aqui para ficar mais limpinho beleza mas isso aqui é dispensável opcional Só se você quiser também e aqui um ponto importantíssimo é a gente vir justamente aqui em configurações ok Você vai clicar aqui vai cair nessa aba de geral e aqui tem três pontos fundamentais para a gente dar uma olhada direitinho o primeiro é o título do nosso site e o segundo é a descrição você pode colocar uma descrição um pouco Mais detalhada sobre o que que é que se trata esse site aqui por exemplo aqui eu vou colocar título do

site vou colocar o nome da empresa aqui corrida terapias e poderia até ter sido esse o domínio né Mas vamos deixar desse jeito mesmo e aqui embaixo eu posso colocar por exemplo consultório especializado em terapias cognitivos comportamentais por exemplo E aí você coloca aqui algumas palavras-chaves que tem a ver com um Negócio que você esteja trabalhando beleza é o título e a descrição e você vai estar informando essas coisas no Google entender do que que é que se trata o seu site Outro ponto importante aqui é a parte do idioma do site lá na hostinger

a gente já sinalizou a linguagem quando a gente instalou que o WordPress por eles e por isso que aqui já caiu automaticamente como português do Brasil mas você pode vir aqui e colocar diretamente em português né caso O seu painel aí esteja todo em inglês também você vai selecionar aqui português do Brasil e depois é só salvar as alterações ou do restante eu vou deixar como padrão Mas se você quiser dar uma lida melhor em cada uma desses detalhes aqui É bem intuitivo é só você pausar esse vídeo e dar uma olhadinha aí rapidinho caso

você queira modificar alguma outra coisa Tá Outro ponto importante nesse primeiro momento é vir aqui em links permanentes e aqui ó em Vez de deixar isso aqui como padrão a gente vai selecionar essa opção de nome do post para que azul urls do nosso site fiquem mais amigáveis dessa forma quando a pessoa por exemplo acessar nossa página de serviços não vai aparecer o seu domínio.com.br/1 código aqui aleatório ou então a data aqui de criação dessa página e depois o nome dela vai aparecer de uma forma muito mais intuitiva tipo www consultório Psicovida.com.br/servicos né o nome

da página que a gente estabelecer Beleza a gente vai deixar isso aqui ativo e vou clicar aqui para salvar essas alterações Então desabafe eu não sei porque que WordPress não deixa isso já como padrão eu fico indignada com isso porque é uma coisa tão óbvia né mas toda vez a gente tem que vir aqui e selecionar esse nome do post e salvar essa alteração sempre faça isso tá depois seguindo a ordem aqui do nosso passo a passo né a gente Vai vir aqui agora para o tema e os plugins que a gente vai utilizar então

para a gente selecionar o tema do nosso site a gente vai ver aqui em aparência temas E aí por padrão vem alguma coisa aqui a gente não vai utilizar nenhum deles tá a gente vai utilizar um outro tema também que tem tudo a ver com elemento a gente vai clicar aqui em Adicionar novo e vai selecionar o meu tema queridinho de todos e da maioria dos web designs também que é esse Hello Elementor aqui e é um tema justamente feito pela própria empresa do elemento por isso que ele tem 100% de compatibilidade é um tema

super leve muito utilizado muito enxuto também e totalmente personalizável e por isso que a gente vai utilizar esse aqui OK e como tudo aqui no WordPress a gente instala e depois a gente ativa Beleza então vou clicar aqui para instalar e depois eu vou ativar esse tema aqui com vocês beleza instalei vou clicar aqui para Ativar E aí depois que ativar ele vai voltar aqui para nossa lista de temas e ó um detalhe importante tá a gente vai utilizar esse aqui e todos esses outros vão ficar aqui inutilizados então para evitar de ficar enchendo nosso

site de lixo que não tá sendo utilizado né recursos que não são utilizados e que a gente vai fazer a a gente vai vir em cada um desses temas aqui e clicar em excluir beleza dessa forma a gente vai limpando o nosso site para ele ficar o Mais enxuto possível Isso aqui vai melhorar o nosso desempenho beleza vamos deixar sempre só o que a gente tiver utilizando mesmo tanto tema como fotos como plugins o que for Ok aproveitando vou tirar aqui essas notificações porque isso aqui me bate um stress e agora vamos vir aqui em

plugins o padrão quando a gente faz esse processo de configuração e instalação do WordPress pela hostinger ela já traz alguns plugins como padrão para gente no caso Eu vou limpar tudo isso aqui tá vou deixar Zerado só para a gente deixar o que a gente vai utilizar mesmo então ó primeiro eu vou selecionar todos esses plugins vou clicar aqui em desativar Não que seja um plugins ruins tá você pode utilizar se você quiser mas aqui para ficar mais intuitivo eu vou mexer só nos que a gente realmente vai precisar para esse tutorial vou selecionar todos

aqui de novo e vou excluir agora tá vamos excluir ele pede a certeza aqui para Gente né e depois a gente Exclui isso aqui tudo visualizar e pronto agora já tá limpinho aqui e o que que a gente vai adicionar a gente vai adicionar o elemento e depois o elementor pro e para adicionar um novo plugin a gente vai clicar aqui em Adicionar novo vai procurar pelo Plugin do elemento aqui beleza Vai procurar aqui elemento e vai selecionar esse plugin aqui ok ele é a versão gratuita do elemento a gente precisa instalar esse aqui para

depois Ativar o elementor pro em cima dele então cliquei aqui para instalar e agora eu vou ativar E aí você pode se perguntar tá Bia Mas por que que a gente precisa adicionar o elemento porque basicamente através desse plugin de criação de sites a gente consegue fazer sites de uma forma muito mais fácil e 100% Visual na base do arrasto e solta assim como vocês vão ver durante todo esse tutorial Beleza a gente basicamente consegue constrói construir um site Todinho sem precisar utilizar uma linhazinha se quer de código Só realmente pegando um elemento arrastando para

o nosso site e personalizando ali mesmo de uma forma totalmente visual aqui ele dá um processo aqui de assistente virtual que a gente não precisa concluir ele todo tá eu só vou clicar aqui em pular mesmo isso aqui tudo e no geral a gente vai fazer toda essa configuração ao longo mesmo do processo do tutorial aqui ele já cria Uma página de enxerida aqui para a gente também e a gente não vai utilizar aqui ó só para você ver aqui como exemplo Beleza a gente tem os elementos aqui a gente consegue arrastar aqui para o

nosso site e vai fazer isso totalmente visual Mas vocês vão se cansar de ver isso aqui ao longo dessa prática então eu não vou mexer nisso aqui agora primeiro eu vou clicar nesse hamburguinho aqui do lado vou clicar em sair e eu vou colocar aqui que toda vez Que a gente clicar e sair eu quero voltar para o meu painel do WordPress vamos aplicar clicar aqui em sair novamente e beleza voltamos aqui para o nosso painel vou vir aqui de novo em opções de tela tirar essa notificação do elemento vamos voltar aqui para os nossos

plugins porém detalhe como eu falei esse aqui é a versão gratuita do elemento beleza para isso tutorial aqui principalmente para a gente conseguir mexer com algumas coisas de Configurações globais de cabeçalho rodapé e tudo mais a gente vai vai precisar do elementor pro ativo também ok aqui eu não vou fazer esse processo de ativação do Plugin do elementor pro junto com vocês para não estender ainda mais esse conteúdo tá qualquer coisa tem vídeo aqui no canal ensinando aqui para isso também E no caso eu acredito que a grande maioria das pessoas que estão acompanhando esse

tutorial vão acabar pegando ali o bônus do elementor pro que É um bônus gigantesco né dentro da contratação guiada então Muito provavelmente quando você chegar nesse ponto aqui você já vão ter o elemento pro ativo aí e você fez esse processo caso né você tenha feito a contratação aqui junto comigo e vai adquirir essa licença por fora aí no caso aqui você faz esse processo aqui de ativação rapidinho de acordo com a licença que você adquirir e se você não souber como fazer isso é só dar uma pesquisadinha Que aqui no canal a gente tem

vídeos a respeito de como fazer essa ativação aqui dentro do GPS Beleza eu vou ativar rapidinho aqui e eu já volto com vocês prontinho já tô aqui com a minha licença ativa e agora o próximo passo vai ser justamente de ativar um recurso muito importante dentro do elemento tá para isso a gente vai vir aqui nessa abinha de elemento que foi adicionada assim que a gente adicionou esse plugin aqui para o nosso painel eu vou vir aqui em Elemento e a gente vai vir aqui em configurações depois eu vou vir aqui em Recursos e a

gente vai ativar esse aqui ó esse conter flexível tá pode ser que quando você estiver assistindo esse vídeo isso aqui já esteja ativo como padrão nesse caso você não precisa fazer nada só manter do jeito que tá mesmo mas eu vou ativar aqui porque Como o próprio nome já diz essa aqui é uma forma muito mais flexível mais enxuta e mais agradável também e muito mais poderosa Da gente criar sites dentro do elemento do que o que ainda está ativo como padrão que é a modalidade de sessões e colunas beleza é muito importante que você

já se adapte a criar sites através desse tipo de criação aqui com contêineres através do Fla Xbox contendo Beleza eu vou ativar aqui vamos salvar essas alterações e beleza concluímos a nossa segunda etapa agora a terceira etapa que é a de preparação por terreno do nosso site a gente vai mexer em Alguns detalhes aqui de elementos globais como cores fontes e tudo mais a gente vai criar as nossas páginas e o nosso navegação do menu aqui beleza você tá a nossa página inicial e depois aqui tá com a ordem errado a gente vai criar e

publicar essas páginas criar a navegação no menu e depois testar aqui a nossa página inicial no WordPress beleza vamos aqui rapidinho só colocar isso aqui para cá pronto Essa ordem que a gente vai criar as nossas páginas vamos Ver aqui ó na abinha de páginas aqui do lado eu vou clicar a gente já tem três páginas aqui por padrão essa aqui já vem junto com WordPress essa aqui o elementor quis criar né porque quis e a gente vai tirar essas duas páginas aqui vai manter só essa política de privacidade aqui mesmo tá vamos clicar aqui

para mover para lixeira essas duas páginas vou clicar aqui para aplicar e depois né para não ficar juntando o lixo aqui a gente vai ver na abinha de lixo Vai selecionar tudo vai colocar aqui para excluir permanentemente e vai aplicar essa ação pronto já eliminamos essas duas páginas essa página de política de privacidade aqui é uma que já vem junto com WordPress também tá nesse vídeo eu não vou ensinar a como adequar o seu site lgpd justamente porque já tem um vídeo aqui no canal também explicando como que você faz esse processo eu só vou

deixar essa página separada para depois quando você quiser Fazer isso por conta própria também mas eu vou pedir para o pessoal deixar nos vídeos relacionados ali caso depois você queira fazer esse processo também de adequação do seu site a lgpd por enquanto eu vou só entrar aqui nessa página e vou clicar aqui em publicar só para a gente conseguir depois chamar ela ali no nosso rodapé quando a gente for colocar esse link eu vou clicar aqui para publicar essa página e beleza vamos manter ela aqui mas agora eu vou Adicionar as outras páginas que a

gente vai efetivamente criar aqui nesse tutorial a primeira delas né vou clicar aqui em adicionar nova e a primeira delas vai ser a página home a gente vai adicionar aqui home e vai ser a nossa página inicial Beleza vou clicar aqui para publicar ok Por enquanto ainda não vou mexer nela vou voltar aqui para essas páginas vamos clicar de novo em adicionar nova e eu vou fazer a mesma coisa com a página sobre né que seria o Sobre empresa clicar aqui para publicar voltar e vou fazer a mesma coisa aqui com a página de serviços

e contatos ou serviços publicar voltar para lista e vou adicionar nova e vou adicionar aqui a página de contato beleza clicar e voltar aqui para página pronto criamos as nossas páginas a gente ainda não mexeu no layout delas tá só publicamos aqui no WordPress mesmo e agora olha só aqui a gente vai vir aqui em configurações eu vou clicar aqui em Leitura e aí o que que acontece eu vou clicar aqui encontro eu vou abrir isso aqui em uma nova aba Por enquanto aqui tá aparecendo essa página aqui que tá tentando puxar os posts mais

recentes como se o nosso site fosse um blog não é isso que a gente quer a gente quer o quê quando a pessoa Acesse aqui a nossa URL principal apareça o quê a nossa página home né então eu vou dizer aqui para o WordPress né olha eu quero que a minha página inicial exiba uma página estática Eu vou colocar aqui com essa página inicial é a página home que eu acabei de publicar beleza só vai aparecer isso aqui para você depois que você criar e publicar a página que você quer vou salvar aqui essa alteração

e agora quando eu atualizar essa página aqui você pode ver que ele trocou para a página home beleza Prontinho agora voltando aqui para o nosso mapa mental a gente criou e publicou as nossas páginas a gente setou a nossa página inicial só Trocar essa ordem aqui agora a gente vai criar o nosso menu de navegação aqui dentro do WordPress e depois a gente vai setar aqui alguns elementos globais de cores fontes e o layout da nossa página para poder fazer essa navegação ali do menu que que a gente vai fazer a gente vai vir aqui

aparência menus eu vou criar aqui um menu principal para o nosso site Então vou colocar aqui por exemplo no principal ou criar esse menu aqui do lado e aí eu vou arrastar as Nossas páginas para cá vou clicar aqui em ver tudo e vou selecionar todas as páginas que fazem sentido para o nosso menu vou clicar aqui em home serviços e sobre ou adicionais só um menu tá normalmente políticos de privacidade a gente deixa só no rodapé mesmo ali tá Não precisa colocar no menu principal e vou reordenar aqui você pode colocar por exemplo a

página sobre aqui para cima o contato aqui para baixo tá normalmente a ordem mais comum para sais Institucionais é essa aqui você pode colocar um como submeno de outro mas eu vou deixar desse jeitinho aqui mesmo e ó um detalhe importante caso você por exemplo Queira mudar o nome da página ali dentro do menu é só você selecionar essa setinha aqui e você pode colocar um outro rótulo para essa navegação como por exemplo aqui início você achar que home não fica muito intuitivo vou deixar inclusive desse jeito aqui mesmo vamos clicar aqui para salvar esse

menu e Pronto criamos o nosso menu de navegação para colocar lá dentro do nosso Hater ou cabeçalho do nosso site por fim na ordem aqui do nosso mapa mental né agora a gente vai colocar aqui alguns elementos globais na nossa página isso aqui Vai facilitar horrores no nosso processo de criação justamente porque a gente não vai para ficar garimpando o hexadecimal das cores que a gente vai utilizar a cada elemento que a gente for utilizando na página já vai deixar as nossas Fontes Padronizadas o layout padronizado também bonitinho e enfim né é um processo fundamental

também para quando você quer melhorar a produtividade na sua criação para isso o que que a gente vai fazer a gente vai botar aqui em páginas eu já vou clicar aqui na página home ou clicar aqui para editar com elemento E aí por enquanto a gente ainda não vai criar o nosso layout dessa página home tá Eu só vim até aqui porque a gente vai clicar nesse hamburguinho aqui em cima e eu vou Clicar aqui em configurações do site e agora sim a gente tem acesso aqui a esses elementos globais Tá eu vou clicar aqui

em cores globais primeiro e por padrão você pode ver que ele vem essas cores aqui que não tem nada a ver com o nosso projeto e a gente vai trocar essas cores aqui agora aqui na descrição desse vídeo você vai ter acesso a um link onde você vai conseguir baixar os materiais dessa aula ou seja imagens logo inclusive também um documento com as Informações de identidade visual onde você vai conseguir copiar exatamente os hexa decimais que eu vou utilizar aqui hexadecimal é o código de cada cor tá E aí eu vou trocar essas cores aqui

utilizando esse material aqui da identidade visual e eu vou fazer esse processo aqui agora com você aqui ó vocês vão ter acesso a essa pastinha aqui beleza e aqui você vai ter acesso a esse documento TXT onde vai ter todas as informações aqui das cores inclusive com O link aqui também ó que você consegue acessar né E você vai ser acessar aqui o site essa ferramenta aqui onde você consegue copiar esses hexa DC mais toda essa paleta de cores aqui tá carregando mas olha só aqui você consegue clicar aqui Ó nesses quadradinhos e copiar esse

hexadecimal já tá tudo prontinho aqui para você tá mas aqui ó basicamente a gente vai utilizar essa cor aqui como a nossa cor primária vamos vir aqui vou trocar aqui essa cor primária ele já vai Aparecer aqui para você também tá nesse guia de estilo aqui eu vou pegar esse Rex é desse mal da cor secundária Vou colocar aqui também e vou fazer esse mesmo processo para o restante beleza pegar essa cor de texto aqui trocar e o legal de você fazer isso é que você consegue manter uma padronização de uma forma muito mais simples

no seu site não corre risco de ficar mudando de couro o tempo todo e quando você vai ver tem um carnaval de cores no seu site que não Foi o que você planejou inicialmente e olha só aqui a gente já colocou todas as cores iniciais né Mas a gente pode adicionar novas cores também para compor a nossa identidade visual ou seja outros tons algumas coisas assim aqui no caso eu vou colocar esse Rosa aqui vou colocar como Rosa Rover é o rosa que vai aparecer quando a pessoa passar o mouse em cima de um botão

aqui ó vou pegar esse outro aqui que é uma cor tipo menta mais clarinho É claro e por fim aqui esse último que é esse menta aqui mais escuro beleza a Bia mas tá utilizando muita cor para esse projeto na verdade então basicamente os mesmos hexadec mais mas com tons diferentes tá por isso que vai ficar bem coeso ao longo do Design escuro Beleza vou clicar aqui para atualizar temos as nossas cores cadastradas certinho e depois a gente não vai precisar ficar garimpando isso o tempo todo agora outra coisa que é legal Da gente deixar

padronizado é a parte das fontes ó vou clicar aqui na setinha vou clicar aqui em Fontes globais ouvir aqui na fonte primária que a nossa fonte de títulos e vou colocar a fonte Deixa eu só ver aqui na identidade visual de novo rapidinho só relembrar vai ser a fonte é essa aqui ó e é ceva o ano ok que é uma fonte um pouco mais trabalhada mais profusada mas que ainda traz uma boa legibilidade também e aqui na secundária e todo o restante eu vou Colocar a fonte josefim Sans e dessa forma a gente não

vai precisar ficar lembrando a fonte toda vez Ok Isso já vai puxar como padrão eu não vou padronizar nada mais além disso tá o tamanho peso tudo eu vou deixar por conta de quando a gente tiver Mexendo nos elementos mas pelo menos aqui já dá uma base de padronização para a gente pelo menos da família tipográfica que a gente foi utilizar vou clicar aqui para atualizar e Prontinho vou clicar aqui na Setinha a primeira coisa que eu vou padronizar aqui rapidão essa parte aqui dos botões beleza aqui no caso eu vou colocar uma tipografia aqui

como padrão para ele Ó que eu vou colocar aqui um peso de 600 para o botão já Ok já vamos deixar isso padronizado vou colocar aqui a cor de texto dele como branca é só você clicar aqui nessa cozinha aqui né Você pode clicar nesse mundinho aqui do lado você vai ter acesso a todas as suas cores Padrões que você já cadastrou aqui tá vendo de uma forma muito mais fácil ou então você pode clicar aqui do lado e selecionar uma outra cor da Matriz aqui eu colocar um outro código de hexa decimal eu só

puxei aqui para o canto mesmo para pegar a cor branca que é esse fff aqui E aí no caso aqui na cor de fundo eu vou colocar esse Rosa secundário aqui e no Hover eu vou colocar a cor de texto como branco também puxar aqui e vou pegar esse Rosa Rover aqui beleza não tá dando para ver ainda mas isso vai fazer mais sentido quando a gente arrastar um botão ali para o nosso site eu vou colocar um arredondamento completa aqui para o nosso botão para ele ficar com a ponta totalmente arredondada Vamos colocar um

arredo de 30 aqui e por enquanto eu não vou mexer nesse pé de vou deixar por conta mesmo quando a gente for adicionar um botão vamos clicar aqui para atualizar vou voltar aqui por fim eu vou Mexer nessa parte aqui de layout onde a gente vai mudar essa largura do conteúdo aqui de 1140 para 1.200 para ficar um pouco mais larguinho aqui o nosso conteúdo e mais fácil da gente mexer no layout vou zerar aqui esse preenchimento também para facilitar esse nosso processo e todo o restante eu vou deixar como padrão Ok vamos clicar aqui

para atualizar e Prontinho gente mais uma etapa aqui do nosso processo Concluído OK eu sei que por enquanto ainda tá Aparecendo muito técnico não chegamos na parte divertida ainda de criação mas a gente precisa disso né para conseguir realmente preparar o terreno e depois facilitar a nossa criação também agora sim é que a gente vai começar a construir algumas partes do nosso layout começando pelos modelos globais ou seja pelo nosso cabeçalho e o rodapé do nosso site Ok E aí agora a gente vai fazer o rede e o fuder e como é que a gente

faz isso dentro eu vou fechar aqui essas Configurações globais vou clicar no hamburguinho e vou clicar em sair e no caso aqui ó vou fechar essa outra aba aqui também vou deixar aqui por enquanto só esse link aqui dos materiais e essas cores aqui caso a gente precise Mas para fazer o nosso header O que que a gente vai fazer a gente vai vir aqui em modelos do elemento Já que é um modelo Global a gente vai vir aqui em construtor de temas e a gente vai selecionar aqui ou a opção de render Primeiro ou

a opção de frutas né Depende de onde você quiser começar eu vou começar aqui pelo pelo header né o nosso cabeçalho E aí a gente vai clicar aqui em mais e a gente vai fazer esse modelo aqui justamente porque é algo dinâmico é algo que vai ser puxado em todas as nossas páginas então depois de construir esse cabeçalho a gente vai setar uma condição para isso aparecer em todas as nossas páginas e por isso que vai ser uma forma muito mais eficaz a gente Construir o nosso layout Ok então vou fechar aqui ele traz algumas

opções para a gente aproveitar aqui das opções de personalização do próprio elemento né alguns tem aqui dele a gente vai construir isso aqui do zero mesmo então vou fechar essa opção aqui e a primeira coisa que a gente vai fazer para construir o nosso header é clicar aqui nesse maiszinho e adicionar um container para esse nosso cabeçalho o que que são os contêineres são basicamente caixas Dentro do elemento onde a gente vai conseguir colocar o nosso conteúdo de dentro né os nossos elementos que vão ficar dentro dessas caixas no nosso site Ok então a gente

vai adicionar uma caixa para cá nessa direção horizontal já que a gente quer que os nossos elementos fiquem um do lado do outro né aqui Fique a logo e aqui fica o menu de navegação eu vou selecionar essa aqui ó com a setinha horizontal e se não tiver aparecendo assim para você é porque você Não fez o processo lá de ativar o Xbox container tá então qualquer coisa volta um pouquinho do vídeo e ativa para aparecer desse jeitinho aqui para você eu vou selecionar essa opção aqui horizontal e aí aqui nessa parte de layout né

a gente vai mexer tanto no layout como no estilo como no avançado também sempre vai ser esse processo aqui não necessariamente nessa ordem mas sempre vai mexer nessas abinhas aqui tá na de layout O que que a gente vai fazer Aqui eu vou deixar tudo como padrão vou manter essa direção horizontal e aqui no alinhamento dos itens eu vou colocar tudo alinhado ao centro né ou seja ao centro aqui do nosso container e eu vou zerar esse espaço aqui entre os elementos porque aqui a gente vai mexer com algumas coisinhas de porcentagem tá Normalmente quando

eu mexo aqui na porcentagem de cada elemento aqui dentro do container eu Zero Isso aqui para não influenciar nesse cálculo Geral de Porcentagens ao longo do processo isso vai ficar mais claro tá Não precisa se preocupar com isso inicialmente não e aí aqui ó em estilo eu vou vir aqui em tipo de fundo vamos selecionar essa opção de clássico aqui e eu vou colocar uma cor para esse nosso cabeçalho eu vou selecionar essa cor primária aqui para ficar com esse fundo aqui verde ou com mais escuro isso é verde ou azul verde turquesa né verde

água verde menta escuro enfim essa cor aqui e aqui nessa Aba de avançado Eu não vou mexer para esse cabeçalho aqui tá mas eu poderia por exemplo eu colocar um espaçamento interior aqui que seria o padim ou então o espaçamento é exterior a esse elemento que seria uma margem tá sempre que eu falar pede é um espaçamento interior ao elemento por exemplo porque a sua colocar 50 pixels ele colocou um espaçamento interior a esse conter aqui se eu colocar uma espaçamento exterior por exemplo na margem aqui ele vai Adicionar esse espaçamento por fora desse elemento

Tá eu vou tirar isso aqui para esse container aqui eu não vou utilizar isso já já vocês vão ver o porquê beleza fizemos a nossa caixa geral aqui do cabeçalho agora eu vou vir aqui nesses quadradinhos aqui em cima e vou selecionar um elemento para puxar aqui dentro para esse cabeçalho o primeiro elemento vai ser o de imagem para a gente colocar a nossa logo do site vou arrastar esse elemento para cá E com esse blocão gigantesco aqui o que não tem problema tá quando a gente colocar a imagem vai se ajustar eu vou vir

aqui em tamanho da imagem vou pedir para puxar o tamanho completo dela vou clicar aqui para escolher uma imagem e aí aqui a gente consegue ter acesso a nossa biblioteca de no WordPress onde a gente consegue colocar as imagens que a gente vai utilizar no site para isso eu vou selecionar aqui uma imagem do meu computador então você vai pegar né Novamente aquela pastinha aqui de materiais Beleza vai baixar essas fotos aqui e vai utilizar ao longo desse tutorial a Bia mas isso já tiver fazendo um site para uma outra coisa com uma outra identidade

visual e outras imagens Qual que é a minha sugestão Você siga esse tutorial da forma que eu tô fazendo aqui tá colocando essas mesmas cores essas mesmas imagens para você entender esse processo e não se perder no meio do caminho e depois quando você tiver com Todo essa estrutura pronta aí sim você pega e adapta para outro nicho que você quiser Ok porque senão pode gerar confusão Pode ser que você se perca nesse caminho e fica muito mais fácil você seguir essa linha de aprendizado Beleza então faz esse mesmo processo com essas imagens e é

legal que depois você pode se basear até no tamanho delas para criar suas próprias imagens e adaptar para o nicho que você quiser Ok então já baixei essas imagens aqui eu vou Selecionar o arquivo do meu do meu computador vou selecionar aqui a minha parte minha pastinha vou vir aqui em logo e vou trazer essa logo para cá vou selecionar essa imagem aqui e beleza ela já ficou bonitinha aqui desse jeito também na minha própria imagem eu já deixei um pequeno espaçamentozinho aqui em cima e embaixo nela para ela não ficar grudada nas bordas então

caso né você não tenha esse mesmo essa mesma configuração aí na imagem que você tiver Utilizando é só você vir aqui no seu container e colocar um espaçamento interno na forma que eu mostrei lá na aba de avançada tá mas aqui por enquanto eu vou deixar desse jeito mesmo só que eu vou vir aqui na minha imagem e vou vir aqui na aba de avançado eu vou colocar uma largura para definida para ela vou colocar uma largura aqui de 25% Ou seja eu tô falando aqui ó eu quero que essa logo ela ocupe apenas 25%

da largura total de 1.200 pixels do Meu Container Beleza então ele tá ocupando essa porcentagem aqui além disso também eu vou voltar aqui em conteúdo e eu vou colocar um link para essa imagem vou clicar aqui um URL personalizado e selecionar aqui ó vou procurar pela minha página home ou selecionar essa página justamente para que seja uma logo clicável aqui no nosso cabeçalho Beleza vou clicar aqui para publicar porque eu tô bem agoniada com esse botão Rosa aqui do lado e toda vez que eu vejo um botão Gritando eu tenho vontade de clicar só publicar

e salvar essas alterações tá Depois a gente mexe na condição além da logo no cabeçalho eu vou vir aqui nos nossos elementos vou procurar por menu e a gente vai puxar esse aqui ó WordPress menu para cá tá vou arrastar aqui depois da logo e aí ele vai ficar aqui do ladinho dela beleza primeira coisa que eu já vou fazer é vir aqui em avançado Vamos colocar aqui uma largura personalizada e eu vou colocar o 75% Restante aqui do nosso container ele ocupar todo esse outro espaço restante aqui da nossa largura OK agora vou voltar

aqui em conteúdo e aí primeiro você consegue Tem vários tipos de configurações aqui tá eu vou meter as que a gente vai precisar para mexer nesse elemento aqui e aí nessa aba de aqui de conteúdo o que que eu vou mexer aqui no alinhamento eu vou colocar o alinhamento aqui direito Ok para ficar desse ladinho aqui aqui no break Point Que é quando ele vira aquele menuzinho responsivo né que fica bonitinho para tablet para mobile eu vou colocar como Break Point aqui para tablet ou selecionar essa opção aqui de largura Total isso aqui é muito

importante para o mobile tá ative essa opção também para ficar bonitinho ali ó o drop Dá um desse menu né quando a pessoa fala acessar e o alinhamento desse indicativo de menu aqui para mobile eu também vou colocar a direita para ficar nessa mesma direção Que tá acontecendo aqui para desktop ou seja para computador ok uma outra coisa que eu vou mexer aqui também é em relação ao Pointer que é o efeito que acontece quando a pessoa passa o mouse aqui em cada item desse menu no caso ele tem várias opções aqui ó como por

exemplo uma linha em cima né Tem várias coisas aqui tipo essa moldura aqui ó que fica em volta do botão também você pode escolher que você quiser tá aqui para esse layout eu vou Escolher essa background aqui ele faz esse estilo parecendo um botão aqui mas já já a gente vai fazer uma coisa que fazer com que isso aqui pegue do início até o fim tá E é inclusive por isso que eu não coloquei nenhum Pede nesse nosso menu aqui para conseguir fazer esse efeito direitinho mas é opcional beleza não não precisa ser necessariamente esse

aqui não vou vir aqui em estilo e aqui na parte da tipografia eu vou clicar nesse lápisinho vou trocar essa fonte Pela pela outra que é mais legível por essa aqui ó ele já trocou aqui não tá dando para ver direito por causa da cor mas a gente já vai resolver isso direitinho tá Vou colocar aqui um tamanho de 17 para essa fonte aqui vou deixar como peso 600 mesmo patrãozinho aqui dessa forma vou colocar aqui o texto como Branco ok vou puxar aqui no extremo dessa Matriz aqui no Hover o que que eu vou

fazer é aparece aqui essa opção de por internet eu vou deixar aqui O texto como branco também e aqui no Pointer eu vou colocar essa cor rosa e aí ele fica desse jeito aqui ok e aqui no ativo eu vou fazer a mesma coisa o que que é ativo é o item que tiver ativo de acordo com a página que a pessoa tiver por exemplo se ela tiver no serviço esse botão vai ficar ativo se ela tiver sobre esse botão do sobre vai ficar ativo Ok eu vou colocar aqui a cozinha branca também para esse

texto e essa mesma cor rosa aqui quando essa Página tiver ativa e aí o que que eu vou fazer para que isso se Estenda daqui né do início até o final desse cabeçalho eu vou mexer aqui nesse pé de vertical do nosso cabeçalho Então vou vir aqui ó e Vou empurrar até ele pegar a altura do nosso cabeçalho acho que é mais ou menos esse 35 aqui 35 OK aí ó acontece isso aqui beleza pode ser que essa altura que ela mude de acordo com o tamanho da sua logo e como que tá a altura

aqui do seu cabeçalho tá pode ser menor ou pode ser Maior aqui foi 35 e para não ficar esse negócio Magrinho aqui desse jeito eu vou dar uma aumentada também nesse pé de horizontal vai colocando aqui por exemplo 40 ou talvez 35 também eu vou padronizar esses espaçamentos aqui ó para ficar desse jeitinho aqui beleza fica um efeito bem legal no menu e dá uma chamada de atenção para essa parte aqui também e agora para mexer na parte responsiva desse menu já aqui também né A gente já vai mexer aqui na parte Beleza eu vou

clicar aqui nesses computadores zinhos aqui de baixo tá vendo nesse ícone em modo responsivo ele vai ativar aqui para mim tanto a opção de tablet como também para mobile Lembrando que nesse tutorial aqui eu não vou mostrar em detalhes como que a gente vai fazer toda essa parte da configuração para tablet primeiro porque senão esse vídeo aqui vai ficar muito grande Tá então para deixar um pouquinho mais objetivo eu vou meter a parte Mobile E também porque essa visualização por tablets de qualquer maneira ela é menos importante beleza vão ter muito menos pessoas acessando por

tablet do que é para mobile por exemplo o principal para você dar atenção é o desktop e o mobile principalmente mobile é celular e também a mesma lógica que eu aplicar aqui para essa visualização do mobile é o que você vai fazer para Tablet também tá então fica até como dever de casa também o que o que a gente Fizer aqui para mobile você pode tentar ajustar para Tablet também sem problema nenhum para poder deixar essa configuração certinha mas aqui ó né a gente tava aqui no desktop tá todo bonitinho aqui quando a gente vem

aqui para essa visualização de celular mobile pode ver que tá um pouquinho estranho aqui né vamos mexer em algumas coisas aqui para melhorar essa nossa visualização O primeiro é vir aqui nesse nessa logo aqui né e dá um pouco mais de Espaço aqui para ela aliás desculpa antes disso eu vou clicar aqui no nosso container vou vir aqui em avançado e uma coisa super importante de você fazer para essas visualizações mobile é colocar um espaçamento na lateral aqui para não ficar desse jeito pegando nas bordas do dispositivo tá então aqui ó eu vou zerar aqui

esse pede e eu vou colocar um pezinho aqui na lateral de 15 pixels na direita e 15 pixels na esquerda eu vou manter esse padrão Também tá vocês vão ver ao longo das páginas E aí nesse caso ele já desgruda aqui da bordinha lateral Além disso eu também vou vir aqui nessa logo que tá minúscula né vou vir aqui em avançado e vou dar uma largura para ela mas mais visível do que a que tá aqui né vou clicar aqui em personalizar Vou colocar aqui uma largura em porcentagem vou colocar por exemplo uma largura de

60% OK ela já ocupou mais espaço aqui também vamos aqui na nossa navegação vou vir Aqui em avançado e vou colocar o restante aqui para completar 100% então a personalizada Vou colocar aqui em porcentagem e vou colocar o restante aqui dos 40% beleza para ficar desse jeitinho aqui também vou voltar aqui no Meu Container principal e eu vou também colocar aqui ó 15% 15 pixels em cima e embaixo lá para dar uma pequena espaçamento aqui para ficar melhor essa visualização para o mobile quando a pessoa clica aqui do lado tá vendo Aparece o menu desse

jeito aqui isso só tá acontecendo porque aqui em conteúdo a gente ativou essa largura Total se isso aqui tiver desativado é isso aqui que vai acontecer então a gente não quer que isso aconteça beleza e agora para a gente estilizar esse tolo aqui o que que a gente vai fazer primeiro eu vou vir aqui no togozinho vou colocar uma cor aqui para ele ou uma cor de fundo aliás uma cozinha aqui de dentro dele desse essa cor de assento aqui um background Aqui Rosinha desse jeito tá vendo já ficou mais bonitinho você pode colocar ele

toda arredondado aqui também ó se quiser vou colocar por exemplo aqui 30 ele já vai ficar desse jeito aqui OK pode mexer nisso aqui também se quiser eu vou deixar como padrão aqui mesmo e aqui no Hover quando a pessoa passa aqui o mouse eu quero que continue com essa cor de assento mas que fiquem rosa mais escuro dessa forma que tá ok vamos deixar desse jeito aqui agora o drop Down que é essa parte aqui né quando a pessoa clica beleza vamos arrumar aqui um pouquinho a cor de texto eu vou colocar como esse

Verde um pouco mais escuro aqui na tipografia acho que vou deixar como padrão assim mesmo vou deixar tudo assim o background aqui eu vou deixar como Branco forma aqui beleza e aí quando a pessoa passa o mouse em cima eu quero que fique verde escuro também só que o background eu quero essa cor de assenta para dar esse efeito aqui Ó bem mais bonitinho beleza para pessoa saber ela tá se posicionando posicionando onde ela quer clicar vou clicar aqui em ativo né que é onde a pessoa clicar efetivamente e eu vou deixar esse mesmo essa

mesma configuração do Rover beleza com essas duas coisinhas aqui eu vou colocar um pé de né ou espaçamento interior vertical um pouquinho maior para os nossos elementos não vou deixar aqui mais ou menos por exemplo em 14 acho que já fica De bom tamanho aqui e aqui no tipo de borda de divisor aqui entre Um item e outro eu vou colocar só uma bordinha bem clarinha aqui ó vou colocar uma moda sólida uma cor aqui Verde bem transparentinha vou colocar aqui ó um pixel de largura nessa borda só que eu vou vir aqui na minha

cor verde e vou puxar aqui a transparência dele para baixo para ficar uma corzinha mais tranquila aqui para essa borda Ok então se a gente clicar aqui de novo Tem um Bugzinho aqui na visualização mas eu vou clicar aqui para atualizar salvar e fechar vamos clicar aqui para atualizar a nossa página Prontinho recarreguei aqui voltou a funcionar tinha dado uma quedinha aqui na minha internet Ó aqui no caso quando eu coloquei aqui o verdinho mais transparente ficou com essa borda bem clarinha aqui só para dar uma divisãozinha mesmo entre uma coisa e outra vou até

puxar um pouquinho mais para baixo aqui e vou deixar mais Tranquilinho ainda Ok e aqui ó você pode ver que ele tá pegando bem no pezinho da logo né a gente pode vir aqui em distância e mexer nessa distância do background aqui também por exemplo eu vou deixar esse 18 aqui para ele pegar embaixo aqui do nosso cabeçalho vamos clicar aqui em atualizar de novo salvar e fechar e Prontinho ó quando a gente visualiza aqui o nosso site desse jeito né e visualiza aqui no mobile tá bem bonitinha a nossa visualização e o nosso Cabeçalho

já está feito e agora o próximo ponto vai ser o nosso rodapé aqui antes disso ó agora que vem o pulo do gato tá Por que que a gente tá criando um modelo Global porque a gente vai vir aqui nas nossas condições para adicionar uma condição e vai falar olha eu quero que esse cabeçalho aqui ele seja puxado em todo o nosso site beleza e aí se a gente precisar modificar alguma coisa nesse cabeçalho a gente modifica uma vez aqui nos modelos Globais e depois ele já puxa automaticamente para todo o nosso site também vamos

salvar aqui e fechar e Prontinho quando a gente for criar as nossas páginas ele já vai aparecer lá vamos clicar agora aqui no hamburguinho sair e vamos criar o nosso rodapé É esse mesmo processo a gente vai vir aqui em modelos construtor de temas e aqui já aparece né o nosso reader que a gente criou só que agora a gente vai vir aqui em fuder e vai adicionar um novo fúten Ou um novo rodapé para o nosso site mais uma vez eu não vou utilizar nenhum desses modelos pré-prontos aqui do elementor para não fugir da

nossa identidade visual de layout e tudo mais a gente vai construir aqui do zero Tá mas é bem tranquilinho eu vou fechar essas outras opções aqui e mais uma vez a gente vai clicar nesse maiszinho aqui para construir o nosso rodapé então eu vou clicar nesse mais vou selecionar novamente essa opção aqui de container Horizontal e aí agora assim ó aqui nessa parte aqui do layout eu vou deixar esse aqui como padrão direção horizontal nessa parte aqui de justificar o conteúdo eu vou selecionar essa opção aqui de espaço entre logo isso aqui você vai ver

o porquê tá ou deixar aqui eu alinhamento padrão e eu vou zerar esse espaço aqui justamente para não mexer na nossa contagem de porcentagem igual ao que a gente fez aqui em cima né que a gente colocou por exemplo aqui 25%, aqui 75 o outro também 60% depois 40% né se a gente deixa esses pixels aqui ativo pixels ou pixels no seu plural de pixel Mas enfim se a gente deixa isso aqui ativo Isso aqui vai ser contabilizado junto desse cálculo de porcentagem então nunca vai ser exatamente o 100% direitinho ali se a gente tiver

algum espaçamento padrão Beleza então vou zerar isso aqui para poder facilitar nossa vida vamos clicar aqui para publicar Vou salvar e fechar só para a Gente ir salvando esse processo né mas aqui nessa parte de layout É nisso que a gente vai mexer aqui em estilo eu vou colocar um tipo de fundo né com a cor verdinha também igual a nossa cabeçalho e aqui é isso que a gente vai mexer e em avançado a gente vai colocar um ted né superior de 100 pixels aqui e sem pixels embaixo Ok sem pixels em cima e embaixo

para ficar com esse espaçamento aqui ao redor Ok gente essa é a configuração do nosso container principal mas o que que A gente vai fazer para colocar as informações aqui dentro a gente vai utilizar alguns outros contêineres aqui dentro desse container principal como que a gente vai fazer isso ficando aqui nos quadradinhos aqui em cima a gente vai arrastar aqui ó outros que contém nesse aqui para dentro Beleza eu vou arrastar um conta para cá ele vai sair aqui com essa dimensão beleza tentando pegar toda a largura do nosso container principal eu vou trocar aqui

para a Largura do conteúdo largura total e vou colocar aqui uma porcentagem de 30% para esse nosso container Ok E aí a mesma coisa né eu vou colocar aqui ó por exemplo a direção vertical nesse container beleza todo o restante aqui eu vou deixar como padrão E aí eu vou simplesmente clicar aqui ó com o botão direito nesse container e vou clicar em duplicar Beleza vou clicar aqui em duplicar e vou clicar aqui em duplicar também E por que que ele já se Distribuiu direitinho desse jeito que aconteceu aqui com você eu não container principal

aqui na aba de layout a gente veio aqui e pediu para justificar esse conteúdo Então todo o espaçamento aqui ó que sobrou entre um e outro até completar os 100% da largura ele distribuiu dessa forma aqui se eu colocasse por exemplo tudo ao centro isso aconteceria assim ao fim No início né dessa forma aqui você consegue ter vários tipos de Distribuição e no caso Aqui eu coloquei justamente essa de espaço entre E aí dessa forma aqui a gente consegue construir Exatamente esse layout aqui beleza com algumas informações nesse início algumas nesse e-mail e outras Nesse

final aqui também então vamos começar com essa aqui para isso a gente vai vir aqui de novo nos quadradinhos vai procurar pelo widget de imagem vou arrastar para cá E aí novamente aqui eu vou colocar como tamanho da imagem completo vou clicar Aqui para escolher uma imagem vou selecionar de novo aquela Nossa logo selecionar aqui vou colocar um link personalizado beleza e vou procurar aqui pela nossa página home dessa forma clicável aqui a nossa logo tá Além disso aqui ó em estilo Eu não vou mexer em nada vou deixar assim mesmo tá se você quiser

você pode dar uma diminuidinha aqui na logo também se você preferir eu vou deixar como padrão Porém Aqui em avançado eu vou dar uma zerada nesse Nessa margem aqui e eu vou subir um pouquinho aqui ó só para não ficar com esse espaçamento extra aqui embaixo da nossa logo ok vou colocar aqui mais ou menos um espaçamento de menos 10 é só você descer aqui nessa setinha e você consegue esse efeito aqui ok o próximo elemento vai ser um elemento de texto Então você pode dar uma olhadinha aqui beleza a gente vai arrastar esse elemento

aqui vou arrastar para cá e aí a gente vai colocar esse texto aqui ó Aqui ele esse textinho aqui eu vou copiar vou voltar aqui no elemento E aqui nessa abinha de texto eu vou colar esse nosso esse nosso conteúdo aqui e assim você começa a perceber que cada elemento que a gente puxa para cá seja de imagem container texto futuramente botão outros tipos de elementos também a gente vai ter um tipo de conteúdo específico para preencher nessa parte aqui como isso aqui é um bloco de texto A gente tem justamente o que um mini

Editor visual aqui do texto que a gente está preenchendo beleza e aqui funciona basicamente como se fosse um mini worldzinho mesmo a gente consegue pegar a parte do nosso texto e colocar Itálico consegue colocar sublinhado aqui beleza tudo bem visual quando você clica nessa Barrinha aqui você tem outras opções também ó inclusive para mudar a cor de diferentes partes aqui do texto e aí você consegue fazer bastante por aqui eu vou deixar com o padrãozinho aqui Mesmo só colocar esse conteúdo tá E aqui em estilo a gente vai vir aqui e vai trocar essa cor

de texto para uma que tenha mais visibilidade Então vou trazer aqui ó um branquinho e vou puxar um pouco a transparência desse texto para ele ficar menos chamativo Ok vou deixar desse jeito mesmo aqui em tipografia eu vou deixar aqui como 15 o tamanho desse texto para ele ficar menorzinho e eu vou mudar aqui essa altura de linha para é m e vou colocar aqui uma altura de linha Mais ou menos de um ponto três para ela ficar mais juntinho assim desse jeito mesmo ok para ocupar menos espaço aqui do nosso layout Além disso tá

vendo que esse widget de texto ele tem um espaçamento inferior padrão aqui embaixo eu não quero que isso aconteça então vou fazer o seguinte eu vou vir aqui em avançado vou zerar novamente essa margem e vou colocar aqui ó uma margem inferior negativa de menos 15 dessa forma ele vai pegar só a altura aqui do nosso texto Mesmo já vou clicar aqui para atualizar para ir salvando essas informações no final a gente coloca aquela condição e agora enfim eu vou selecionar aqui o widge de redes sociais se você não quiser sempre ficar procurando aqui você

pode vir aqui em pesquisar e procurar aqui pelo widget que você quer eu vou procurar por esse aqui eu vou colocar social e aí vai aparecer esse aqui ícones sociais Ok você vou arrastar esse vídeo para cá e agora a gente tem esse Widget aqui mais uma vez aqui apareceu diferente porque é um elemento diferente né aqui a gente consegue colocar os links das nossas redes sociais por padrão ele vem Facebook Twitter YouTube eu vou tirar esses dois aqui vou deixar só o Facebook e aí eu vou adicionar outro ícone aqui ó vou pegar aqui

um WhatsApp por exemplo e quem aqui no na ilustraçãozinha eu vou adicionar mais um aqui e vou colocar um outro do Instagram normalmente Esses são os mais utilizados Pelas empresas Ok E aí você consegue reordenar aqui por exemplo Deixar o WhatsApp primeiro o Instagram que segundo o Facebook em terceiro de acordo com a ordem de importância lembrando também que cada um desses itens aqui você consegue colocar um link específico para ele e aqui é o link onde você vai colocar por exemplo link de mensagem do WhatsApp o link aqui de acesso ao seu Instagram e

o link de acesso ao Facebook Beleza eu vou deixar aqui sem link mesmo Porque isso aqui é um projeto fictício mas aí no caso você preenche com isso aqui e a pessoa vai ser direcionada para esse link que você colocar na forma desses ícones aqui eu vou deixar como círculo assim desse jeito para ficar redondinho aqui vou deixar o número de colunas automático e vou colocar o alinhamento à esquerda aqui tá para combinar com o restante dos nossos elementos aqui em estilo em vez de cor oficial aqui dessa das próprias redes Sociais né eu vou

colocar aqui uma cor personalizada para adequar melhor a nossa identidade visual E aí aqui na cor primária eu vou colocar esse Branco aliás aqui vai ser esse rosa que é a cor de fundo Ok e aqui na cor secundária que é a cor do ícone em si eu vou deixar como branquinho mesmo Além disso nessa parte aqui do ícone ao passar o mouse eu vou colocar aqui uma cor primária desse rosa mais escuro esse Rosa Rover né que a gente adicionou e aqui na cor Secundária eu vou deixar como branquinho também vou colocar uma animação

ao passar o mouse é que é esse grow aqui ó para ele dar uma pequena crescidinha quando a gente passa o mouse assim tá vendo é um efeitinho legal e aqui você tem vários tipos de animação ó por exemplo essa aqui que ele fica fazendo esse né Você pode dar uma brincada aqui mas uma das que eu mais recomendo essa grow aqui que ela é um pouquinho mais elegante é mais tranquilinha e dá um Efeito legal ao passar o mouse eu vou dar um espaçamento um pouquinho maior entre um elemento e outro também para ele

não ficar tão grudadinho Então vamos ver aqui ó aumentar esse espaçamento e vão aumentar aqui mais ou menos para 10 deixar desse jeito aqui e ó já ficou bem bonitinho esse nosso primeiro aqui né agora bora para esse segundo aqui onde a gente vai basicamente colocar aqui um título e uma lista aqui com alguns links rápidos para pessoa conseguir acessar e Seria basicamente um segundo menu de navegação Só que nesse ponto do site para poder para ver uma melhor navegabilidade para as pessoas e aí para isso eu vou clicar novamente aqui nos quadradinhos vou pegar

aqui um itens de título vou arrastar para cá não tá dando para ver nada porque ele está Literalmente com a a cor do nosso rodapé né então para a gente conseguir ver eu já vou vir aqui em estilo vou trocar a cor desse texto vou colocar essa cor de Assento aqui ok a gente vai trocar esse conteúdo logicamente aqui na tipografia eu vou deixar aqui ó um tamanho de 25 pixels um pouco menorzinho vou deixar com essa fonte mesmo essa aí essa EVA para poder dar esse contraste entre isso e a lista de ícones aqui

embaixo porém eu vou colocar um pequeno espaçamento entre as letras aqui de um pixel para ele dar uma pequena espadinha assim e ficar um pouco mais elegante Ok E aí aqui ó vou voltar aqui em conteúdo e vou Colocar o título links rápidos agora a gente consegue visualizar bem o que a gente está escrevendo e percebe que isso não tem uma ordem específica tá eu posso começar pela avançado vir para o conteúdo depois vir para o estilo você pode modificando essas coisas Conforme você achar melhor tá não tem uma ordemzinha é certa não tem certo

e errado nesse caso Beleza então já colocamos aqui o nosso título Inclusive eu já vou copiar esse título aqui vou Colar aqui nesse outro container para poder já colocar esse outro título Vamos colocar aqui contatos entrar contato normal assim deixa eu ver se é isso mesmo é isso mesmo e agora vamos colocar a nossa lista de ícones aqui ok e novamente eu vou clicar aqui nesse quadradinho vamos procurar aqui por lista e a gente vai arrastar esse widget para cá vou pegar esse widget vou arrastar Aqui para baixo do título E aí ele já vai

aparecer aqui embaixo Bonitinho nesse elemento a gente consegue ver os itens aqui da nossa lista beleza Ele é bem parecido com esse aqui das redes sociais Mas em vez das redes sociais O que que a gente vai ter acesso a gente vai ter acesso a um texto para nossa o item da nossa lista a gente consegue colocar um ícone para ele e também a gente consegue colocar um link aqui embaixo caso a gente queira direcionar essa pessoa para uma página específica Beleza então ó por exemplo Aqui no texto eu vou colocar nesse primeiro aqui home

ok que vai ser a nossa página nisso aliás eu vou colocar aqui como página inicial para ficar mais intuitivo aqui para as pessoas aqui no ícone um detalhe você sempre consegue pegar ou ícone da própria biblioteca de ícone também troquei clicando aqui você tem acesso a todo uma biblioteca assim como a gente fez ali nas redes sociais ou então se você tiver ícones personalizados por aí em svg que É um tipo de arquivo específico principalmente para esses arquivos assim de ícones e tudo mais você pode clicar aqui em enviar arquivo svg ativar esse envio de

svgs aqui para o elemento beleza e aí você importa o seu ícone personalizado para cá nesse caso aqui eu vou utilizar da própria biblioteca do elemento é o mesmo então vou clicar aqui na imagem vou procurar pelo ícone chevron Não me pergunte o porquê que é que tem esse nome tá mas o que eu tô Buscando é essa setinha aqui lateral vou procurar vou colocar esse ícone aqui vou colocar inserir e a gente vai utilizar esse ícone aqui não tá aparecendo porque ele tá com a mesma cor do nosso fundo mas já já a gente

estiliza isso direitinho e o que que eu quero como eu quero que isso aqui seja uma navegação intuitiva também dentro do nosso rodapé aqui nessa parte do link eu vou Direcionar para cada página específica também então aqui no link eu vou Procurar pela nossa página home percebe que eu não preciso colocar o link completo tá é só eu procurar pelo nome da página que o próprio elemento aqui já identifica então eu coloquei aqui a página home já fizemos o nosso primeiro item e para não precisar fazer tudo isso para os outros o que que eu

vou fazer eu vou clicar nesse xizinho aqui para excluir esses outros e vou duplicar esse item aqui conforme a gente vai colocando as próximas páginas nessa parte aqui eu Vou colocar a página sobre ok Já puxou o ícone certo vou zerar aqui o link e vou procurar a página sobre para aparecer aqui você precisa ter criado e publicado as páginas assim como a gente fez mais ali para o início do tutorial Tá beleza vou duplicar aqui novamente vou fazer a mesma coisa para serviços serviços para aqui também e por fim fazer a mesma coisa aqui

para contato e políticas privacidade vamos procurar aqui contato beleza duplicar aqui mais uma vez e vou Colocar aqui política de privacidade Lembrando que nesse tutorial aqui eu não vou mostrar como criar uma página de política de privacidade como fazer essa adequação lgpd tem vídeos completíssimo sobre isso aqui no canal tá aqui eu tô só linkando essa página aqui no rodapé Mas se você quiser saber como criar uma página de política de privacidade fazer aquele aviso de pop-ups aqui no seu site procura por lgpd aqui no canal que você vai encontrar tutorial para você Conseguir fazer

isso tudo tá depois esse aqui você faz essa adequação lgpd conforme esses outros vídeos que a gente tem aqui brinquei Esse aqui esse aqui tá com o link errado vou colocar aqui política e aí vai aparecer desse jeitinho aqui Ok estamos aqui com os nossos links bonitinhos e agora é a hora de estilizar né agora a gente vai vir aqui em estilo primeiro eu vou colocar um espaçamento mais decente aqui entre os itens da nossa lista Então vou Colocar aqui por exemplo o espaçamento de 12 ó já ficou mais bonitinho deixa ver 13 não deixa

12 mesmo bonitinha assim eu posso colocar um divisor também mas nesse caso aqui eu vou deixar assim vou vir aqui com eles e a gente vai trocar a cor desse ícone né em vez desse verde escuro a gente vai colocar por exemplo uma cor menta aqui vou colocar esse menta escuro e aqui no Hover eu vou colocar essa corzinha Rosa aqui ó para ele fazer esse feitinho Ok não tá dando Para ver direito porque tem pouco contraste aqui na nossa lista dos ícones e é justamente isso que a gente vai mexer agora eu vou vir

aqui em texto aqui na tipografia eu vou deixar aqui a tipografia como padrãozinho mesmo do jeito que tá aqui farei aqui na cor dele Eu vou colocar essa mesma cor desse texto aqui ó eu vou voltar nesse texto aqui estilo vou pegar esse Branco um pouco mais transparente aqui que a gente colocou vou voltar aqui na minha lista De ícones vou vir aqui em texto e vou colocar esse mesmo hexadecimal beleza aqui e aqui no Hover eu vou colocar esse Branco completo aqui sem nenhuma transparência e aí olha só aparece aqui ó quando a pessoa

passa o mouse o branco acende né é um efeito bem legal de usar habilidade para gente deixar aqui na nossa página vou clicar aqui para atualizar de novo porque eu vi esse botão rosa e me chamou atenção agora eu vou clicar aqui ó com o botão direito Nesse lapizinho da nossa lista de ícones vou copiar esse elemento e vou colar aqui do lado eu vou clicar com o botão direito nesse outro container e colar aqui e a gente não é besta nada né eu no caso só um pouquinho e aí aqui a gente consegue aproveitar

essa mesma estrutura para colocar a nossa próxima lista de ícones porém com ícones e itens diferentes dessa vez e o primeiro item dessa próxima lista só pegando aqui a minha colinha vai ser o telefone o WhatsApp e endereço e depois o horário de funcionamento Ok hoje eu vou copiar aqui o texto desse telefone beleza vamos vir aqui novamente no nosso rodapé vou pegar aqui esse primeiro item Vou colocar aqui ó o título o texto aqui né Desse nosso item aqui vou tirar esse livro porque não tem nada a ver com esse item aqui tá ele

não precisa nem ser clicável vou clicar aqui na minha imagem do ícone e vou procurar aqui por fone e aí você precisa procurar por inglês Porque os ícones aqueles estão cadastrados em inglês tá ou então você pode simplesmente vir aqui e dar uma explorada na biblioteca e ver o que que se encaixa melhor para o que você tá querendo mas eu vou procurar aqui por fone vou pegar aqui esse ícone vou inserir ficou bonitinho já aqui ok E aí eu já vou tirar todos esses outros aqui dá para não ter que ficar apagando o link

toda Então vou duplicar esse aqui vamos pegar esse outro aqui eu vou pegar Essa outra informação aqui do WhatsApp tá vendo ó esse aqui tava com um link por isso que eu não consegui copiar muito bem mas ó já tá com difícil vou só escrever mesmo vou colocar aqui o WhatsApp dois pontos eu vou colocar nove cinco cinco cinco cinco um número fixo aqui né E aí você coloca o seu WhatsApp mesmo inclusive aqui no link é uma boa você colocar por exemplo o link do seu WhatsApp também mesmo que já tem aqui talvez tenha

um botão flutuante de WhatsApp também sempre que você quiser colocar algum link para redirecionar a pessoa para o local certo você pode colocar aqui também vou clicar aqui na imagem do ícone e vou procurar pelo ícone de WhatsApp vou pegar esse aqui inserir e ele já vai ficar bonitinho aqui também beleza Sem querer cliquei aqui em adicionar item ó vou duplicar aqui de novo vamos pegar agora o ícone de endereço eu vou procurar por map já vou pegar esse íconezinho aqui que fica Bonitinho para me inserir E aí aqui no texto eu vou colocar o

texto do endereço Então vou vir aqui na página real vou pegar esse endereço aqui que é o preço fictício né até tá preenchido aqui com um body Y que é um texto fictício mas só para ilustrar aqui para vocês tá E aqui eu vou duplicar e vou colocar agora o horário de funcionamento vou pegar esse textinho aqui a mesma coisa vir aqui no rodapé colocar esse horário de funcionamento aqui vir aqui ícone e Procurar por exemplo por clock né relógio eu vou pegar esse ícone aqui preenchido vou inserir e Ok já ficou bem legal dessa

forma aqui beleza gente rapidinho aqui a gente conseguiu montar esse layout para desktop né como esse aqui a gente já tinha personalizado esse aqui também ficou desse mesmo jeito bem bonitinho e agora por fim clicando aqui no modo responsivo e vindo aqui na visualização de mobile a gente pode ver que o próprio elemento já tenta adequado E a gente só precisa ajustar algumas coisinhas então eu vou clicar aqui no container principal vou vir aqui avançado vou mudar um pouco esse pé de eu vou clicar aqui do lado para desvincular esses valores vou colocar um pé

de um superior de 60 em cima embaixo e 15 nas laterais tá a gente vai usar bastante esse padrão para poder manter essa consistência de espaçamentos Ok eu vou deixar esse padrãozinho aqui você pode usar esse mesmo padrão para Tablet Também se você for adequar isso daí tá e por fim a gente vai colocar só um espaçamento Entre esses containers aqui para não ficar tudo grudado do jeito que tá aqui então vou pegar esse contexto esse primeiro container aqui vou vir avançado vou zerar essa margem e vou colocar uma margem inferior de 30 pixels vou

clicar nesse próximo container avançado zerar aqui também e colocar também o espaçamento interior aqui e aí dessa forma as coisas ficam espaçadas Assim bonitinho e a gente tem uma boa visualização para mobile também ok para desktop e daquele jeito para mobile vamos atualizar aqui agora e aí por fim a gente vai adicionar uma condição para poder aparecer isso em todo o site assim como a gente fez com cabeçalho vou clicar aqui em adicionar condição já aparece aqui a opção de aparecer em todo o site vou deixar isso aqui ativo e vou salvar e fechar essas

alterações Beleza já estamos aqui com o nosso cabeçalho no Nosso rodapé configurado que são os elementos globais do nosso site os nossos modelos globais Ok então já concluímos aqui essa quarta etapa que era o primeiro passo da nossa criação e agora sim a gente vai para a parte mais divertida que é justamente a criação das nossas páginas beleza onde a gente vai criar o layout de todas as nossas páginas aqui então bora lá para começar criando a nossa página home a gente vai clicar aqui no hamburguinho vai sair Aqui para o nosso painel novamente eu

vou clicar aqui em páginas e a gente vai vir aqui em editar com elemento na nossa página home se isso aqui não tiver aparecendo para você é só você clicar na sua página e clicar no botãozinho aqui em cima de editar com elemento como eu já fiz isso antes Aqui nessa página por isso que não tá aparecendo mais e aí ele aparece bem aqui nessa parte aqui beleza mas todas as outras você pode fazer isso mesmo processo vou clicar aqui para Editar com elemento E aí como você pode ver o nosso rodapé e o nosso

cabeçalho já apareceram aqui de forma padrão na nossa página Ok já aparece aqui e eu posso simplesmente clicar aqui para para o fuster ou header porém eles são elementos globais então eles estão meio que por fora dessa nossa página mas eles são puxados automaticamente de forma dinâmica em todas as páginas que a gente criar no site justamente porque a gente citou aquela condição isso aqui é muito Legal e é ótimo para manutenção do site porém a gente não quer que fique aparecendo home aqui né não faz muito sentido então o que que eu vou fazer

eu vou clicar aqui em configurações eu vou colocar aqui para esconder o título E aí dessa forma vai ficar aparecendo só o header e o rodapé Lembrando que aqui se eu colocar por exemplo elemento largura Total ele vai puxar os elementos globais que eu tiver aqui para essa página por isso que puxou o cabeçalho rodapé porém Se eu vir aqui no layout da página e colocar como Canvas ele vai deixar a página literalmente como um papel em branco tá vendo não vai aparecer mais o réder e o rodapé então se você fizer isso não vai

puxar os seus modelos globais por isso que a gente sempre vai vir aqui em configurações e vai deixar isso aqui como largura Total Ok então vou clicar aqui para atualizar e pro agora podemos começar a nossa primeira sessão aqui da página home é o nosso Banner Inicial com essa imagem aqui de background que já tá separado aí para vocês ou esse título grande aqui de bem-vindo à página um subtítulo e um botão aqui de agendamento da consulta Ok então vamos criar esse layout aqui que vocês vão ver que é bem tranquilinho ó para isso eu

novamente vou clicar nesse Mazinho aqui para a gente adicionar um container na nossa página vou adicionar esse container aqui na direção vertical porque eu quero que fique um elemento em Cima do outro né Então dessa vez vai ser esse aqui E aí um detalhe aqui importante tá antes de mexer nessa parte aqui eu vou vir aqui em estilo como o nosso banner Inicial ele tem prioritariamente essa esse fundo aqui desse background mas esse fundo ele tem mais essa corzinha verde eu já vou colocar aqui ó como tipo de fundo clássico vou colocar essa cor verde

menta escuro aqui porém aqui ó eu vou clicar para adicionar a minha imagem Também vou clicar aqui para enviar um arquivo e vou selecionar o meu para esse banner Inicial colocar aqui para exibir os ícones grandes vou vir aqui em BGS e vai ser esse banner Inicial psicovida aqui ok perceba aqui essa imagem ela tem 1920 por 800 pixels de altura ok Aqui tá pixels Então esse deve ser o plural de pixel né é aquela resposta da minha pergunta anterior Mas enfim aqui ele tem 1920 para poder se enquadrar num padrão full HD fica legal

em praticamente todos Os tipos de dispositivo aqui para desktop e ele tem essa alturazinha aqui de 800 pixels Ok então vou adicionar essa imagem aqui ela não tá aparecendo justamente porque a gente não tem essa altura necessária no nosso container e aqui por padrão ele vai puxar essa corzinha aqui e depois ele vai carregar essa imagem que tem prioritariamente essa cor também aqui ó rapidinho só para a gente já deixar isso aqui certinho eu vou colocar a posição dessa imagem como Centralizado eu vou colocar aqui como anexo padrão mesmo desse jeito a gente vai colocar

para não repetir essa imagem e eu vou colocar como tamanho da tela preenchimento completo dessa forma ela sempre vai ficar bonitinha aqui na nossa página e uma coisa que eu gosto de fazer para banners iniciais é já assentar uma altura de acordo com a altura da imagem de background que eu coloquei então se eu coloquei por exemplo uma imagem aqui com 750 pixels de altura 96 de altura eu já venho aqui nessa parte da altura mínima para conseguir ter toda a visualização dessa imagem certinho eu já coloco aqui ó nesse caso 800 beleza e aí

ele vai pegar o tamanho da nossa imagem aqui certinho vai ficar dessa forma aqui ok acho que eu dei um grito nesse ok né Desculpa se eu te assustei por aí Além disso também aqui nessa parte dos itens dentro do nosso container eu vou colocar aqui para justificar os elementos ao Centro verticalmente aqui para ele ficar aqui nesse ponto e alinhar os itens aqui ao início dessa forma ele vai ficar exatamente com esse alinhamento tá vendo não sempre verticalmente e no início aqui horizontalmente eu acho que eu falei certo vertical e horizontal Não tenho certeza

mas acho que deu para entender né Ok vou deixar desse jeitinho aqui e agora vamos arrastar os nossos elementos aqui para dentro vou vir aqui nesses quadradinhos vamos pegar aqui o Elemento de título e arrastar para cá ficou aqui né E aí agora eu vou pegar esse texto aqui ó Bem vindo a clínica psicovida devia ter escolhido o nome melhor vou colocar aqui uma tag HTML como esse é o nosso título principal ele vai ficar aqui como H1 que é o nosso título de maior importância a gente só pode ter um H1 na página tá

e eu vou selecionar esse aqui E aí aqui em estilo eu vou deixar essa cor de texto mesmo Porém Aqui em tipografia eu vou colocar Um tamanho bem maior aqui de 60 pixels por exemplo a Bia mas aqui ele tá pegando até a boquinha aqui dessa imagem né Eu não quero isso Beleza vamos ajustar então aqui ó eu vou vir aqui em avançado e eu vou falar eu não quero que esse título que ele pegue 100% da largura do Meu Container Então vou vir aqui em largura personalizada e vou colocar aqui ó por exemplo 50%

dessa forma ele já ficou aqui só até a metade da largura Desse nosso contêiner e se Adequou melhor aqui a esse nosso layout beleza eu voltar aqui em estilo rapidinho vou vir aqui em tipografia vou mexer um pouco nessa altura de linha aqui eu vou colocar em a m e vou colocar uma altura de linha um pouquinho melhor aqui ó tipo 1.3 só para ter um pouco mais de espaçamento entre uma linha e outra e dessa forma ficar mais fácil de ler Além disso também eu vou colocar um espaçamento na letra aqui de um pixel

E Aí melhora um pouco a legibilidade Dessa letra que é bem gordinha né essa fonte aqui Inclusive acho que eu vou vir até aqui no tamanho vou dar uma aumentada até pegar praticamente toda a porcentagem aqui beleza vou deixar aqui como 67 para ficar desse jeito aqui e agora eu vou vir aqui nos nossos vídeos novamente vou arrastar aqui um itens de texto e vou colocar aquele nosso subtítulo encontre equilíbrio e Bem Estar emocional o slogan da Clínica né Vamos ver aqui no texto vou colocar esse conteúdo aqui e para melhorar essa visibilidade eu vou

vir aqui em estilo e vou colocar aqui um tamanho de 25 pixels acho que eu vou aumentar um pouquinho mais até Vou colocar aqui 30 pixels para isso subtítulo ok ele Já puxou aqui a cor que eu quero que é justamente a cor de texto que eu cadastrei aqui inicialmente Tá mas qualquer coisa você pode escolher uma outra cor por aqui show por último aqui nesse banner eu vou Arrastar aqui ó vou procurar aqui pelo widget de botão e vou arrastar esse vídeo de botão para cá ele não pegou aquela cozinha que eu tinha cadastrado

não sei porque mas não tem problema a gente faz isso aqui de forma personalizada e aqui no botão basicamente eu consigo aqui ó nessa parte colocar o texto do meu botão eu vou colocar aqui agende a sua consulta a ideia é que aqui a chamada de ação leve a pessoa para uma consulta um Agendamento de consulta via WhatsApp então aqui Você poderia colocar por exemplo o link da sua mensagem no WhatsApp ok Você coloca lá no Google gerador de link de WhatsApp e você vai encontrar dezena de opções lá para você conseguir colocar o seu

número uma mensagem e gerar um link e colocar aqui nesse Campo beleza e aqui no ícone eu vou colocar um ícone do WhatsApp eu vou clicar nessa bolinha e vou procurar aqui por WhatsApp e vou colocar um Espaçamento aqui de 15 não pelo amor de Deus um espaçamento de 10 pixels entre o meu texto e o ícone não tá aparecendo por causa dessa cor Infame aqui mas a gente já vai arrumar ok vou vir aqui em estilo e aí aqui na tipografia eu vou colocar uma tipografia aqui de 18 para esse CTA principal CTA é

chamada de ação tá é qual o tio Action eu vou colocar um peso aqui de 600 para essa fonte aqui também vou deixar assim desse jeito e aqui na Cor do texto eu vou deixar aqui como branquinho mesmo vou colocar aquela cor que eu quero que esse Rosa um pouco mais escuro assim a gente já consegue ver essa cor aqui ok na verdade ou rosa mais claro aqui tá E aí aqui no Hover eu vou colocar a cor do texto como branca e aquele Rosa um pouco mais escuro aqui nessa parte da cor para fazer

esse efeito Além disso também eu vou colocar uma animação ao passar o mouse com esse efeito de grow assim desse jeito e eu Vou arrumar aqui esse arredondamento que tá terrível desse jeito eu vou deixar como 30 aqui padrão tanto no normal como no Hover né então vou colocar aqui 30 é dessa forma ele já fica desse jeito aqui tá eu cliquei aqui normal puxar padrão para os dois e nessa parte aqui do pad em que é o espaçamento interno eu vou zerar isso aqui ele ficou hiper Magrinho aqui né mas eu vou colocar 20

pixels em cima e 60 pixels aqui nas laterais para ele ficar bem vistoso aqui nesse nosso Banner Inicial Ok já arrumamos aqui bonitinho E aí antes da gente mexer o responsivo aqui eu vou criando os outros elementos e por fim a gente deixa tudo responsivo para uma boia para mobile aqui bonitinho bom já temos o nosso banner inicial para nossa próxima sessão a gente vai precisar criar essa estrutura aqui de um lado com uma imagem e de outro aqui com um divisor com um título um texto e um botão aqui embaixo também então bora lá

criar isso para Isso eu vou clicar aqui nesse mais e para facilitar nossa vida eu já vou pegar essa estrutura aqui de dois container por dentro aqui tá então vou clicar nesse outro aqui e aí você pode ver que ele criou um container principal com dois containers aqui dentro do lado do outro e se você já teve alguma experiência aqui né do elemento e tal e sabe bem como é que as coisas funcionam você pode se questionar tipo a Bia mas tem como você fazer isso aqui só com um Elemento e tal só com container

aqui em vez de dois e sim Tem como sim tá Se você souber fazer isso não tem problema não pode seguir por esse caminho também eu escolhi esse aqui justamente para facilitar um pouquinho aqui para o tutorial principalmente para quem nunca mexeu nisso na vida para não ficar tendo tanto cálculo de porcentagem e tudo mais tá tudo bem fazer isso aqui também tá ó vou clicar aqui nesse container principal Beleza vou vir aqui em Avançado pede e vou colocar aqui um espaçamento superior de 100 Pixel e um espaçamento inferior aqui de 100 pixels também agora

vou começar a falar no plural e eu vou deixar aqui Desse jeito ok a gente vai utilizar esse padrão de espaçamento de 100 pixels em cima e embaixo para manter essa consistência de respiros ao longo nessa página não precisa ser necessariamente esse número aqui tá você pode colocar mais pode colocar menos mas eu não indico muito Não tipo sem já é já tá bem no limitezinho mesmo mas se você quiser colocar 80 90 a seu critério tá o importante é só não deixar tudo muito apertadinho para não deixar poluir da sua página beleza vamos manter

nesse padrãozinho aqui e aqui nesse primeiro container a gente vai vir aqui nesses vídeos e eu vou arrastar aqui esse widget de imagem para cá e nesse vídeo de imagem a gente vai vir aqui colocar tamanho completo eu vou clicar aqui para Escolher uma imagem vou clicar aqui para enviar um arquivo selecionar o arquivo do meu computador vou vir aqui nas nossas pastinhas e vou selecionar esse aqui ó já acabei de perceber que eu não tinha colocado essa imagem no drivezinho dos materiais eu já vou colocar isso logo aqui agora para já ficar disponível isso

para vocês eu já volto aqui tá Prontinho acabei de te adicionar aqui então agora voltando aqui nas nossas pastinhas a gente consegue ter acesso Aqui a essa imagem do sobre home vou adicionar essa imagem aqui vou selecionar aqui embaixo também e aqui ó já apareceu bonitinha aqui desse jeito né vou vir aqui em estilo eu vou só colocar um arredondamento para essa imagem para combinar com o restante do layout da nossa página também não aqui vou colocar um arredondamento aqui de mais ou menos uns 20 pixels para dar uma leve arredondada aqui nas pontas E

aí eu vou deixar desse jeitinho aqui Mesmo nesse próximo container aqui eu vou clicar nele a primeira coisa que eu vou fazer é vir aqui em avançado vou zerar a minha margem e o meu pede e eu vou colocar um espaçamento aqui na lateral só para que o nosso título e o texto não fique grudado aqui nessa imagem lateral aqui do lado tá lateral aqui do lado é ótimo mas ó eu vou vir aqui no nosso padim e vou colocar isso aqui é direito à esquerda né E vou colocar aqui na esquerda 40 pixels Ok

Vou deixar desse jeitinho aqui e ele já não vai mais ficar grudado vamos vir aqui nos nossos elementos vou procurar pelo elemento de divisor E aí aqui a gente vai colocar um para o friozinho antes do título só para dar né um toquezinho aqui bonitinho em cima das nossas sessões desse jeito aqui e nesse divisor a gente vai vir aqui ó na largura dele vai colocar ele como 5% tá eu quero que ele fique pequenininho aqui mesmo Além disso também a gente vai vir Aqui em estilo zerar esse espaçamento aqui desse item eu vou aumentar

o peso dele eu vou colocar aqui cinco para ele ficar mais gordinho E além disso também aqui na cor eu vou colocar essa cor menta escuro tá mas como vir aqui no conteúdo Vou dobrar isso aqui vou colocar 10% acho que fica um pouquinho melhor mas visível E aí agora a gente vai voltar aqui nos elementos eu vou arrastar um elemento de título para cá para aqui para baixo Desse divisor Ok E aí aqui a gente vai colocar o título da nossa sessão que é sobre nós vamos colocar aqui ó sobre sobre nós aqui comecei

aqui é um título de segunda maior importância né a gente tem esse aqui né que é como se fosse por exemplo o título do nosso livro e aqui agora os H2 que são os capítulos do nosso livro né e a gente pode ter H3 sobre capítulos e assim por diante tá são as importâncias dos nossos títulos Aqui eu vou deixar como H2 isso aqui tivesse um subtítulo eu colocaria H3 e assim por diante OK agora vou vir aqui em estilo vou vir aqui tipografia e vou colocar um tamanho maior para esse título aqui eu vou

40 ou talvez 45 só para chamar um pouquinho mais de atenção a 45 aqui e beleza já temos aqui o nosso título agora novamente vou vir aqui nos nossos vídeos e vou arrastar o elemento de texto para cá Ok arrastei para cá vou pegar aqui o texto eu vou tentar deixar Essa colinha aqui para vocês também tá lá no nos materiais para vocês só precisarem copiar e colar aí também se vocês quiserem tá não precisar digitar tudo isso mas aqui ó eu vou colar esse textinho aqui beleza e ele já pegou esse aqui da página

real né mas no caso se você quiser deixar alguma coisa em é só você selecionar o que você quer colocar aqui o certinho e se você quiser colocar uma outra cor específica para esse texto Aqui né essa expressão você pode vir aqui ó em clicar em alternar a barra de ferramentas vir aqui nessa cor do texto e selecionar por exemplo uma outra cor que você queira Tá eu vou dar um Ctrl Z aqui só para deixar como mesmo mas fica aí opcional para você também eu vou vir aqui em estilo vou dar uma aumentada nessa

tipografia Vamos colocar aqui 18 fica um pouquinho melhor aqui mas sentido e agora por fim eu vou colocar um botão aqui embaixo também Como a gente já tem e-mail que isso aqui quase pronto né para gente eu vou clicar aqui com o botão direito nesse botão aqui em cima vou copiar e vou colar aqui embaixo desse container Ok ó eu coloquei aqui embaixo do nosso texto botão direito e colar aqui embaixo vamos nesse botão aqui a intenção não é levar para o WhatsApp Eu vou tirar esse ícone aqui tá vou clicar nesse nenhum vou colocar

aqui um outro texto tipo Leia mas sobre a clínica e opcional tá o que você queira Colocar pode ser só um sabe a Mais também não tem problema e nessa parte do link aqui eu vou colocar o direcionamento para nossa página sobre que a gente já criou Então vou colocar aqui um sobre E aí a pessoa clica nessa página e saiba e sabe mais sobre a clínica a partir desse outro conteúdo Ok e aqui ó para não ficar desse jeito aqui tipo com esse espaçamento em branco aqui o que que eu vou fazer eu vou

clicar aqui nesse container principal vamos vir Aqui em layout e eu vou colocar todo esse conteúdo aqui ao centro Ok E aí dessa forma Tudo fica Centralizado Aqui de acordo com a dessa imagem o outro detalhe também é que para esse espaçamento não ficar incerto assim desse jeito tá vendo com espaçamento maior entre o texto e o botão eu vou zerar esse espaçamento padrão aqui desse elemento de texto Então vou vir aqui em avançado vou zerar essa margem e vou colocar uma margem inferior negativa Aqui de menos 15 não menos 55 Ok menos 15 e

aí pronto vai ficar só com a altura do texto mesmo vamos clicar aqui para atualizar é bom sempre salvando também para não ter risco de perder nenhum andamento aqui do seu layout Tá e agora vamos aqui para parte do serviços ok é essa estrutura aqui a primeira coisa que a gente vai fazer é clicar nesse mais para poder criar mais um container eu vou selecionar essa opção aqui de container horizontal você já vão Entender o porquê tá porque aliás eu já vou até dar uma prévia aqui é porque aqui a gente tem elementos um em

cima do outro mas a gente também tem elementos um do lado do outro Lembra que você tiver elementos um do lado do outro você vai pegar essa opção de container horizontal e vai mexer aqui nas porcentagens para que a gente consiga por exemplo fazer esse diagrama do jeito que tá aqui vocês vão ver na prática como que a gente vai montar essa Estrutura eu vou selecionar esse container aqui e aí no caso aqui ó o primeiro eu vou deixar a direção como horizontal vamos deixar tudo isso aqui como padrão Ok eu vou zerar esse espaçamento

entre os elementos porque eu vou precisar fazer cálculo de porcentagens aqui eu vou zerar isso aqui e vou selecionar uma opção bem importante que essa aqui ó essa envolver o que que isso aqui vai fazer vai fazer com que sempre que um elemento ocupar 100% aqui de uma linha ele vai empurrar o próximo elemento para baixo Ok então por exemplo esse divisor aqui ele tá pegando 100% dessa linha E esse título também ele vai empurrar os próximos elementos para baixo Além disso também aqui na verdade eu não vou deixar como padrão eu vou colocar esse

espaço entre aqui e quando a gente for colocar aqueles cards vai dar aquele efeito separadinho do jeito que a gente viu no exemplo real vou colocar isso aqui desse Jeito e beleza próximo vamos deixar tudo do jeitinho que tá aqui vamos ver aqui em avançado rapidão eu vou zerar esse padim e vou colocar um pezinho superior de 100 pixels pixels e uns inferior aqui de 100 pixels também pixeis é feio né vou falar pixels mesmo não sei Enfim vou deixar desse jeito aqui e aqui em estilo eu vou vir aqui em tipo de fundo vou

colocar clássico Vamos colocar essa corzinha aqui de assento para dar esse frufruzinho aqui de diferença de cor Entre uma sessão e outra E além disso também para dar essa pequena textura do jeito que tá aqui com essas folhinhas aqui ó Presas no fundo O que que a gente vai fazer eu vou vir aqui nessa parte de sobreposição de fundo vou clicar aqui em tipo de fundo clássico vamos clicar em imagem vou enviar um arquivo selecionar esse arquivo e a gente vai lá naquela pasta de backgrounds e vai pegar essa esse banner aqui ó esse BG

Ok E aí são essas folhinhas aqui vamos selecionar as Folhinhas E aí aqui o que que eu vou fazer eu vou deixar como tamanho da imagem completa posição Centralizado nesse Anexo aqui a gente vai colocar essa opção de fixo para poder fazer esse efeito de fixo na página beleza esse efeito de paralaxe a gente vai clicar aqui para não repetir e o tamanho da tela vai ser preenchimento completo dessa forma Ele sempre vai ficar bonitinho assim mas como eu quero que isso aqui seja basicamente uma textura Na nossa página primeiro eu vou mesclar essa imagem

aqui ó vou colocar esse essa mesclagem de multiplicar para ele pegar melhor essa cor de fundo e também eu vou vir aqui ó Nessa opacidade e vou deixar isso aqui quase transparente só com uma texturinha mesmo colocando aqui em 10% beleza Dessa forma não vai prejudicar a legibilidade aqui por cima Prontinho agora eu vou vir aqui nesse nosso container anterior vou aproveitar esse divisor aqui que já tá pronto ó vou Copiar ou colar ele aqui OK vou ler aqui ele já tá pegando 100% aqui da nossa linha né eu vou vir aqui em alinhamento e

colocar ele Centralizado Desse jeito ok vai ficar bonitinho assim e esse sobre nós também esse título vou clicar com o botão direito copiar e vou colar aqui o bom é que cada vez mais a gente consegue reaproveitando elementos nas páginas e a gente vai ter no menos trabalho é bom para manter a consistência e é bom também para a gente Ter menos trabalho na nossa vida né então eu vou clicar aqui em avançado Vamos colocar uma largura de 100% para esse nosso título Ok para ele pegar 100% da nossa linha aqui do container eu vou

voltar aqui em conteúdo vou colocar um alinhamento aqui em cima de centralizada aqui para ele ficar nessa direção aqui do divisor aqui em cima OK e vou vir aqui em avançado e vamos colocar aqui ó um pé de superior nele de 15 pixels Vamos colocar um pouquinho mais aqui Colocar 20 e aqui embaixo eu vou colocar aqui uns 40 na verdade a gente com 50 Qualquer coisa a gente muda depois ok agora é a hora da gente fazer aqueles cards de serviço para fazer esses cards O que que a gente vai fazer a gente vai

vir aqui nos elementos e eu vou procurar pelo Widget de caixa de imagem esse aqui ó Ok vou arrastar esse filme gente para cá logo depois aqui do título você pode ver que ele é bem diferente daquele Exemplo né Mas pode ficar tranquilo que A gente vai deixar isso bem bonitinho Primeiro vamos preencher com o conteúdo dessa nossa caixas de imagem né então vamos vir aqui no nosso exemplo real Vou colocar aqui o título terapia de grupo Vou colocar aqui nessa parte do título vou pegar aqui o texto desse serviço aqui embaixo Lembrando que a

ideia que ia ser só uma breve descrição né e depois na página de serviços explorar melhor essas informações Ok ficou desse jeitinho aqui eu vou deixar esse título Com a importância de H3 mesmo né ou seja uma importância depois desse aqui e aí no caso aqui ó dessa aba de avançado eu vou fazer o seguinte aqui em largura eu vou colocar como personalizado Vamos colocar essa caixa de imagem aqui para preencher só 30% da largura aqui do nosso container principal já começou a dar uma melhorada né vou vir aqui no padim vou colocar um espaçamento

interno de 30 pixels para já começar a ficar com mais cara de card vamos vir aqui nessa Parte de fundo aqui desse nosso Box ó aqui embaixo ainda na parte de avançado vou vir aqui em fundo vou colocar um tipo de fundo branco aqui desse jeito beleza E aqui nessa borda eu vou colocar um arredondamento 20 pixels para ficar igual essa nossa imagem aqui e aqui na sombra de bloco ó vou clicar aqui nessa sombrinha na verdade eu não vou clicar aqui desculpa vou voltar aqui para o início vou clicar aqui nessa opção de Hover

que é quando a pessoa passa o Mouse em cima vou clicar agora aqui na sombra de bloco e aqui na horizontal dessa sombra eu vou colocar uma sombra de menos 20 na horizontal 20 na vertical ou colocar aqui para borrar 40 desse jeito aqui tá ó tá vendo aqui já tá ficando com o efeitinho Porém para não ficar grosseiro desse jeito eu vou vir aqui na cor e eu vou puxar esse preto aqui para uma transparência bem pequena tá vendo para ficar um efeito bem de leve aumentar aqui só um pouquinho Deixar uns 14 e

aí ó tá vendo já dá esse refeitinho aqui e vou deixar com esse efeito desse jeito Beleza já fizemos aqui o nosso Card agora basicamente falta a gente também vir aqui no conteúdo escolher uma imagem né eu acabei não fazendo isso antes vou clicar aqui para enviar o arquivo selecionar a gente vai vir aqui nos nossos materiais eu vou pegar aqui ó as imagens das especialidades eu o parque todas para cá pode fazer isso com várias imagens de Uma vez tá E aqui no caso eu vou selecionar a imagem de terapia em grupo que seria

essa aqui e vou selecionar e ela ficou bem pequenininha aqui né mas a gente ainda vai estilizar isso aqui bonitinho vamos ver agora aqui em estilo nessa parte da Box a gente não vai mexer em nada aqui em imagem eu vou colocar ela para preencher 100% aqui do nosso Card aqui para ela pegar totalmente aqui o tamanho do nosso Card Vamos colocar um arredondamento aqui de 20 para essa Imagem também dessa forma aqui beleza E aqui nessa parte do conteúdo a gente vai ver aqui na cor do título e eu vou colocar aquela cozinha Rosa

dessa forma aqui acho que eu vou colocar o rosa um pouquinho mais escuro e também aqui na tipografia eu vou dar uma diminuída nesse tamanho aqui vou colocar 25 e beleza deixar desse jeito aqui na descrição eu vou deixar essa mesma cor e aqui na tipografia eu vou colocar um tamanho aqui de 15 para ele preencher Melhor aqui bonitinho de acordo com essa quantidade de conteúdo beleza prontinho já temos o nosso primeiro Card aqui criado e agora né para facilitar nossa vida eu vou clicar aqui com o botão direito e vou duplicar esse item aqui

vou duplicar mais uma vez e a gente já tem três cards aqui esses próximos dois eu vou basicamente clicar nele aqui vou trocar a imagem vou pegar aqui o próximo serviço é o quê orientação vocacional Então vou pegar aqui a imagem da Orientação vocacional selecionar vou trocar aqui esse título orientação vocacional vou pegar aquele outro texto inclusive todo esse texto aqui quem gerou foi o chat GPT tá então já fica a dica aí Isso aqui é uma ótima ferramenta para auxiliar na produção de conteúdo para o seu site onde você colocar GPT aqui no canal

você vai ver também vídeo sobre isso tá se você quiser uma dica de como fazer isso aí no seu processo de construção e agora nesse próximo eu Também vou colocar aqui terapia infanto-juvenil infanto-juvenil e pegar esse outro texto aqui também aqui ó tá vendo já tá ficando bonitinho aqui só que falta trocar essa imagem né vamos ver aqui escolher a imagem da feliz e massa beleza E é porque que o seu tá distribuído desse jeito e que não container principal a gente colocou esse essa parte aqui de justificar conteúdo Ok se você colocar qualquer outro

layout Ele vai ficar diferente então deixa esse espaço entre aqui para fazer esse mesmo efeito agora vamos clicar aqui nesse próximo eu vou clicar aqui para duplicar Porém você pode ver que ele ficou grudado aqui com o de cima né E aí eu não tinha duplicado para todos ainda por conta disso porque aqui nesse próximo eu quero vir aqui em avançado margem e eu vou colocar aqui uma margem superior por exemplo de 40 Acho que ele já dá um bom espaçamento eu vou ficar um pouquinho Mais só para padronizar ficar aqui 50 E aí beleza

já ficou com espaçamento melhor aqui e aqui eu vou clicar para duplicar e para duplicar aqui também ok inclusive aqui deixa eu só vir aqui no Meu Container principal avançado aí ele tá com senha aqui certinho nesses próximos aqui pode ser que role esse bugzinho tá vendo dele extrapolar a quantidade aqui mas como é que a gente resolve isso a gente vem nesse Card aqui e coloca aqui na aba de avançado e Coloca se alinhar ao centro dessa forma ele volta ao normal ok a gente vem aqui nesse próximo faz isso também e aqui nesse

próximo e a linha ao centro aqui também e aí vai ficar tudo bonitinho aqui desse jeito agora vai ser só o processo da gente vir nesse Card aqui trocar a imagem o título e a descrição de acordo com essas próximas aqui OK Eu vou fazer esse processo aqui rapidinho porque ele é bem mecânico E aí eu já volto com vocês prontinho já fiz esse Processo aqui mecânico A única diferença só é que dessa terapia de relaxamento aqui como título era um pouquinho maior ele acabou quebrando com o tamanho 25 e aí eu fiz a pequena

gambiarra aqui na tipografia colocar um pixel a menos tá eu não aconselho que você coloque títulos muito menores ou maiores só para compensar essa questão aqui da quebra de linha mas no caso aqui como era um pixel só eu diminui aqui e ele Coube uma linha só assim como os outros OK dessa forma Fica mais harmonioso aqui o nosso layout massa já temos isso aqui bonitinho agora para dar desktop por último aqui nessa nossa página a gente vai criar essa a última sessão aqui de CTA com mais um botão aqui de agendar consulta só que

antes disso rapidinho uma coisa que eu aconselho é que você venha em cada um desses cards aqui e na parte de conteúdo você coloque o link da página de serviços também porque às vezes as pessoas têm essa ideia de clicar na Imagem para ir para uma página específica então vou procurar aqui o serviços ok também não clicando serviços E aí agora essa página que ela vai ficar clicável e dessa forma melhor a navegabilidade também eu vou fazer a mesma coisa aqui com esses outros cards dessa forma aqui OK aí a gente facilita das pessoas ficarem

navegando entre um ponto e outro no nosso site vamos clicar aqui para atualizar e Beleza bora clicar Bora criar agora esse próximo layout e Pode ficar tranquilo tá agora a gente está criando tudo isso aqui do zero Mas você vai ver que para as próximas páginas a gente vai reaproveitar muita coisa e vai ser um processo bem mais rápido então esse processo aqui Inicial ele é mais trabalhozinho mas para as próximas páginas vai ser bem mais uma mão com do que isso para fazer esse estilo de card aqui bem estilosinho a gente vai fazer o

seguinte primeiro eu vou clicar nesse mais aqui eu vou selar Eu vou selecionar esse primeiro container aqui tá tanto faz selecionar esse ou esse nesse caso vou pegar esse primeiro aqui vou vir aqui na aba de avançado Vou colocar aqui aquele nosso pé de empadão de 100 pixels em cima sem pixels embaixo e ok aqui eu vou mexer basicamente nisso tá vou zerar também esses elementos aqui esse espaço entre os elementos por via das dúvidas eu também vou vir aqui ó nos nossos vídeos e eu vou arrastar um container para cá Tá esse aqui vai

ser o nosso container principal onde a gente vai colocar aquele cardzinho bonitinho do jeito que tá aqui mas perceba que ele não pega toda essa largura aqui ele tem uma largura menor específica e para ele ficar contido dentro dessa largura eu vou voltar aqui no Meu Container principal e eu vou colocar como largura máxima desse contêiner principal 900 pixels Ok não é legal você ficar mexendo nessa largura aqui o tempo todo mas aqui Por uma licença poética só Nossa chamada de ação aqui no final a gente deixou deixando esse espaço aqui essa largura de 900

pixels ainda é bem tranquilo para a gente conseguir fazer esse mesmo layout aqui ok então vamos deixar esse layout aqui bonitinho desse jeito esse container aqui de dentro eu vou deixar com uma direção é horizontal dessa forma aqui e eu vou zerar os espaços entre os elementos dele vamos vir aqui em estilo em tipo de fundo eu vou colocar aquela Cozinha de menta Claro esse bem aqui ó para dar esse outro é feitinho aqui ok Além disso também nessa parte aqui de borda a gente vai colocar um arredondamento nas laterais de 20 pixels para seguir

aquele mesmo padrão e aqui na sombra desse bloco A gente vai clicar aqui nesse lápisinho eu vou colocar aqui uma sombra horizontal de menos 20 igual a gente já tinha feito antes aqui na vertical de 20 pixels 20 aqui né aliás aqui eu vou colocar como 40 para dar uma Borrada e por último aqui ó vou vir na cor e vou deixar essa sombra bem transparentinha aqui tá mais ou menos aqui naquele padrão de 14 que a gente tava mexendo para rápido dessa forma aqui bem elegantezinha desse jeito ok vou clicar já aqui para atualizar

rapidão aqui dentro desse container eu vou arrastar ainda dois outros containers o primeiro para poder colocar a nossa imagem e o outro o restante dos conteúdos aqui tá primeiro eu vou vir Aqui nos elementos eu vou pegar um container e vou arrastar aqui para dentro e ele não tá aparecendo aqui né mas ó clicando com o botão direito e selecionando essa opção aqui de navegador eu consigo ver direitinho todas as camadas aqui do meu site OK e eu sei que esse último container que eu adicionei ele tá aqui embaixo OK agora eu vou vir aqui

em largura de conteúdo largura total e eu vou colocar aqui uma largura de 40% para esse container ele Tá pegando 40% desse contêiner verdinho aqui o contêiner pai dele beleza aqui na altura mínima eu também vou colocar uma altura de 350 pixels para poder se adequar direitinho a imagem que eu já separei para colocar nesse container aqui aqui no caso eu vou vir aqui em estilo Vou colocar aqui um tipo de fundo clássico e aqui a imagem desse contêiner eu vou colocar a imagem que eu já separei vou selecionar aqui um arquivo vamos ver aqui

nesses materiais de apoio E eu vou pegar essa imagemzinha aqui que combina com a identidade visual aqui do site vou selecionar essa imagem aqui e Prontinho ó ela já ficou bonitinho aqui mas perceba aqui ó quando eu clico aqui fora essa imagem ela tá pontuda aqui né ela meio que tá extrapolando o contêiner pai dela e vou selecionar esse container pai o verdinho vou vir aqui em layout mais opções e eu vou colocar aqui para transbordar como oculto dessa forma ele vai esconder essas bordinhas do jeito Que aconteceu aqui eu vou voltar para esse container

filho aqui onde tá a imagem e vou colocar aqui ó como posição Centralizado Vou colocar aqui anexo padrão não repetir eu vou colocar aqui como tamanho da tela preenchimento completo para sempre ficar desse jeitinho do jeito que tá aqui e pronto já colocamos aqui a imagem como a primeira parte desse container e agora para colocar um outro container aqui dentro desse contêiner verdinho o que Que eu vou fazer eu vou clicar com o botão direito nesse container de dentro onde está a imagem vou clicar aqui para duplicar só para ficar mais fácil da gente ter

um container logo aqui do lado desse tá porém nesse próximo aqui ó eu vou colocar uma largura de 60% ele vai pegar aqui o restante Desse nosso container principal Beleza vou tirar aqui essa altura mínima dele ok e eu também vou vir aqui em estilo e eu vou tirar essa imagem aqui tá eu quero que Esse contêiner aqui ele tenha conteúdos dentro e não uma outra imagem dessa forma aqui nesse próximo container aqui eu vou clicar em avançado vamos vir aqui impede e eu vou colocar um pedem aqui de 40 pixels a direita não desculpa

à esquerda só para ele desgrudar aqui da imagem desse jeito Além disso também aqui em layout eu vou colocar a direção dele como vertical Vou colocar aqui justificar conteúdo ao centro E aqui no início beleza esse aqui é a estrutura Mais complicadinha que a gente tá fazendo até agora eu sugiro que você vá fazendo isso com calma seguindo Exatamente esse passo a passo que eu tô fazendo aqui para você não se perder nesse caminho não não precisa se preocupar exatamente com tudo que eu tiver fazendo tá só replica para você conseguir ter essa mesma estrutura

que eu tô te mostrando aqui agora e agora que a gente já tem esse outro container configurado aqui e a hora da gente Colocar os conteúdos aqui dentro então eu vou vir aqui nesse título do sobre nós vou copiar vou arrastar esse título para cá Ok vou vir aqui em estilo e vou dar uma boa diminuída nesse título então vou clicar aqui em tipografia vou diminuir o tamanho aqui para 30 vou vir aqui no site real e vou pegar aqui esse nosso conteúdo vou voltar aqui para edição vou vir aqui em conteúdo e vou colocar

esse título aqui Desse jeito vou voltar aqui em estilo Vamos colocar aqui Uma altura de linha melhor para ele vou colocar aqui m e Vamos aumentar aqui um pouquinho para 1.3 mais ou menos só para ter uma altura um pouquinho melhor também vou vir aqui em cima vou pegar esse conteúdo aqui copiar colar aqui nesse container Ok E aí eu vou pegar esse subtítulo aqui para essa nossa chamada de ação e já temos aqui bonitinho vou voltar aqui nesse Meu Container principal avançado e eu vou colocar uma um pé de lateral aqui à Direita também

para não ter risco desse texto ele vira até aqui nessa borda Ok vou deixar desse jeitinho aqui e agora eu vou vir aqui em cima copiar e vou colar aqui embaixo também ó esse aqui a gente conseguir ter a nossa chamada de ação Então vou colocar aqui Agende sua consulta novamente aqui eu vou deixar só com um hashtag que no caso seria Onde você colocaria o link do seu WhatsApp né E aqui no ícone eu vou vir aqui em biblioteca de ícones e vou procurar pelo WhatsApp tá desse jeitinho aqui ok e aqui já temos

a nossa chamada de ação bonitinha aqui na nossa página se a gente for olhar já temos toda a nossa página home aqui criada do zero até clicar aqui para atualizar e fechar esse navegador aqui do lado também e agora por último a gente vai só dar uma ajustada aqui para mobile Antes de Partir para as próximas páginas Beleza então de forma bem rapidinho aqui eu vou clicar no modo responsivo vou clicar Aqui na visual mobile vou subir aqui você pode ver que tem bastante coisa aqui para a gente dar uma ajeitada né mas vai ser

mais rápido que se espera para esse tipo de coisa e aqui já nesse banner Inicial O que que eu vou fazer vou clicar no nosso container principal aqui dele vamos vir aqui em avançado eu vou zerar esse pé aqui e eu vou colocar um pé de superior de 60 pixels nas laterais 15 pixels e já vai se acostumando que a gente vai usar Bastante esse padrão aqui tá é sempre em cima e embaixo e 15 nas laterais desse jeito aqui vamos vir aqui no nosso título né que é o que mais tá quebrando nesse caso

aqui a gente vai vir aqui em avançado vai colocar ele para ocupar 100% da largura aqui do nosso container Ok já deu uma melhorada aqui vamos vir também aqui em estilo e aqui tipografia eu vou dar uma boa diminuída nesse título aqui ó ele caber aqui em duas linhas OK vou colocar aqui 34 desse Jeito aqui também vou vir nesse subtítulo aqui e vamos dar uma boa diminuída nele aqui OK vou colocar aqui por exemplo 18 deixa eu ver aqui 16 Eu acho que eu vou colocar um pouquinho maior 20 mais ou menos eu vou

dar uma diminuída Nessa altura de linha Vamos colocar aqui uma altura de linha um pouco mais próxima tipo 1.2 ó já deu uma melhorada aqui né E aqui nesse botão também ó vou clicar aqui nesse Botãozinho aqui vamos vir aqui no pajem eu vou zerar esse pé aqui vou colocar 15 pixels em cima 15 pixels embaixo e vou colocar aqui ó 20 nas laterais e eu também vou vir aqui em avançado Vamos colocar esse botão aqui com uma largura de 100% Desse nosso container vou voltar aqui em conteúdo e vou colocar o alinhamento dele como

justificado dessa forma ele vai ficar desse jeitinho aqui tá vendo ele vai pegar exatamente a largura desse container só vou voltar Rapidinho aqui em estilo eu vou dar uma aumentada nesse espaçamento aqui inferior e superior e aqui também eu vou colocar por exemplo 40 na direita e 40 na esquerda porque dessa forma o WhatsApp ele fica mais ajustado aqui na lateral Ok já deu uma melhorada aqui porém essa altura não tá funcionando para mobile né então a gente vai clicar aqui no nosso container principal layout e eu vou zerar essa altura mínima tá vendo ele

já ficou desse jeito aqui como Para mobile não fica muito legal essa imagem pegando aqui na lateral o que que eu vou fazer aqui no container principal eu também vou vir aqui em estilo e na posição dessa nossa imagem em vez de Centralizado eu vou colocar aqui como centro esquerdo ele vai pegar essa parte verde aqui dessa imagem você pode colocar uma imagem específica para mobile também se você quiser tá inclusive é até mais indicado para o desempenho mais nesse caso aqui eu vou Deixar desse jeito mesmo uma coisa que eu tô um pouco agoniada

com esse espaçamento desproporcional aqui então vou vir nessa parte aqui do texto avançado ou zerar aqui essa imagem essa margem né E vou colocar uma margem inferior negativa aqui de menos 15 e ele vai ficar certinho aqui o espaçamento entre um elemento e outro ok já temos aqui o nosso banner Inicial responsivo agora bora arrumar essa segunda aqui vou clicar nesse container principal Avançado vou zerar aqui o pede colocar aquele mesmo padrão de 60 em cima embaixo e 15 nas laterais Ok desse jeito aqui ó já deu uma melhorada e aqui esse container a imagem

Nós já se adecou aqui bem bonitinho só que nesse container aqui eu vou clicar nesse container né nesse do conteúdo aqui em si vamos vir aqui em avançado eu vou zerar esse padim dele ok em vez de ficar com o pé de na esquerda eu vou colocar aqui um pezinho superior de 30 para ele desgrudar um Pouco dessa imagem aqui em cima vamos vir aqui no sobre nós e eu vou dar uma diminuída nesse aqui eu vou colocar deixa eu ver uns 35 aqui ok já ficou um pouquinho melhor dessa forma aqui também vou vir

nesse divisor e eu vou colocar aqui uns 15% só para ele não ficar tão pequenininho vamos vir aqui nesse texto eu vou dar uma pequena diminuída nele aqui ó vou colocar 17 já fica um pouquinho melhor e aqui nesse botão vou vir aqui em estilo eding e eu vou Colocar aqui ó 20 para todos os lados vamos vincular esses valores aqui beleza e aqui no conteúdo eu vou fazer aquele mesmo processo ó de colocar ele como justificado aqui para pegar exatamente a largura do dispositivo Beleza já ficou bem mais bonitinho aqui para mobile né pelo

menos então rapidão aqui para próxima novamente vou vir aqui no container principal avançado vos zerar esse pede Vou colocar aqui 60 15 60 e 15 ok aquele mesmo padrãozinho vamos ver Aqui no nosso divisor aumentar aqui para 15% não aumentar ele só um pouquinho vir aqui no sobre nós estilo colocar aquele mesmo padrão que a gente colocou ali em cima 35 pixels tá só para não ficar muito grande no mobile e aqui claramente não tá legal os cards desse jeito né E a gente vai dar o espaço de um card por vez aqui para mobile

Então vou vir aqui nesse primeiro Card avançado Vamos colocar aqui uma largura total de 100% para ele viu agora já deu bom espaço Aqui para ele também né e eu vou diminuir um pouquinho esse pé de aqui também vou colocar aqui 20 agora ele já ficou desse jeitinho aqui mais bonitinho para mobile Além disso também eu vou ver aqui imagem eu vou colocar aqui uma margem inferior de 30 pixels e dessa forma ele não gruda aqui no próximo para não dar acontecer esse probleminha aqui ó dele não pegar muito bem essa parte margem a gente

vai clicar aqui para alinhar esse item ao centro OK e ele vai Puxar direitinho essa margem vou fazer agora esse mesmo processo com os próximos também vamos clicar aqui nesse próximo avançado colocar aqui 100%, ok já vou clicar aqui para alinhar o centro vou clicar aqui na margem zerar esses valores e colocar uma margem inferior de 30 pixels mesma coisa pressu avançado 100% alinhar ao centro zerar a margem 30 pixels embaixo Aqui também Ó nesses próximos aqui né que seria a segunda linha do serviços a gente vai clicar Nesse aqui vai vir aqui em avançado

vai colocar aqui 100% também aquele mesmo processo ele já tá Centralizado né porém na margem aqui a gente vai zerar esses valores vai tirar aquele valor superior e vai colocar 30% em baixo 30 pixels aliás mesma coisa nesse próximo será que tem agora totalizada aqui e por último agora esse também né esse aqui a gente vai só zerar Já que é o último né ele não precisa ter espaços inferior Vou colocar aqui uma largura de 100% e Centralizado aqui OK aí ó ele já fica bem bonitinho aqui também para mobile dessa forma aqui OK vou

subir nesse título aqui rapidinho avançado eu vou zerar aqui esse padim Vou colocar aqui 20 vou colocar 15 na verdade aqui em cima eu vou colocar um inferior um pouquinho menor aqui vou colocar 40 acho que fica um pouco melhor para mobile dessa forma aqui talvez 30 deixa eu ver colocar 30 aqui ok desse jeito aqui beleza dando uma olhadinha bom esse Último aqui que deu um certo trabalhinho para desktop você vai ver que é mamão com açúcar aqui para mobile também vou clicar aqui no container principal avançado aquele mesmo processo vou zerar aqui é

sempre em cima 60 embaixo e 15 nas laterais desse jeito aqui ó para desgrudar esse nosso Card né Vamos clicar aqui no container da imagem vamos vir aqui em layout deixa eu testar aqui diminuir um pouquinho essa altura dessa imagem eu vou colocar mais ou menos aqui Uns 15 para ela para mobile Ok e aqui nesse container daqui de baixo eu vou zerar esses padrinhos aqui vou colocar um pé de superior de 30 inferior de 35 vou colocar só um pouquinho mais embaixo e vamos colocar aqui uma lateral de uns 20 e 20 desse lado

aqui também para ele ficar com mais cara de card vamos vir aqui nesse título dá uma diminuída nesse tamanho aqui ó delicadete põe umas três linhas Vou colocar aqui deixa eu ver 24 já tá de bom tamanho vamos ver aqui Nesse texto diminuir também o tamanho dele colocar aqui 16 Ok e aqui nesse botão também dá uma ajustada né vamos ver aqui em estilo vou zerar aqui esse pédinho Vou colocar aqui um pé de superior de 20 ou vincular esses valores para todos os lados vamos vir aqui em conteúdo e justificar isso aqui também e

ele vai ficar dessa forma aqui acho que eu vou só voltar aqui em estilo e para essa esse WhatsApp aqui não ficar muito na ponta Vou colocar aqui colocar aqui 20 desvincular esses valores e vou colocar aqui 30 à direita e 30 à esquerda aí já fica mais juntinho aqui ok eu vi aqui na tipografia e vou dar uma diminuída nesse botão aqui também deixar desse jeito massa é só temos toda a nossa home aqui bonitiva bonitinha responsiva também com o nosso header e tal e já temos a nossa página inicial a gente vai ter

esse mesmo trabalho para todas as outras não muita coisa aqui vai ser reaproveitada tá Então bora lá para as próximas páginas agora para isso eu vou clicar aqui em atualizar ok a gente já tá com essa página aqui pronta vou até fechar isso aqui ó já temos todo o nosso desktop aqui também ok e agora bora lá para nossa próxima página que é a nossa página de sobre eu vou clicar aqui nesse botãozinho vou clicar aqui em sair e aí a gente vai vir aqui em páginas e vai clicar agora aqui nessa página de sobre

vou clicar aqui na página e vou clicar Aqui para editar com o elemento nessa página aqui bora lá então primeiro vou vir aqui na minha página home Então e vou copiar Justamente esse cardzinho aqui tá vou clicar vou copiar aqui esse container copiar vamos trazer aqui para nossa página de contato vou clicar aqui com o botão direito ou colar essa estrutura aqui já vou clicar aqui para atualizar o primeiro vamos ver aqui e trocar essa imagem aqui vou clicar aqui nesse container nesse primeiro container Aqui de dentro vamos vir aqui em estilo vou vir aqui

no na parte da imagem vou trocar essa aqui OK vou selecionar aqui um novo arquivo e vou selecionar essa imagemzinha aqui da psicóloga anotando sobre a nossa vida pegar essa imagem aqui já ficou até legal desse jeito mas como essa essa sessão aqui ela é um pouco mais extensa eu vou dar uma aumentada na altura desse contêiner aqui para pegar essa imagem inteira então aqui ó Inclusive a gente pode até ver Que essa imagem ela tem 650 pixels ainda não acostumei de falar isso plural E aí para isso eu vou vir aqui em layout e

vou colocar aqui 650 já vai ficar desse jeito aqui OK agora vai ser a hora que a gente vai pegar aqui esse outro lado e botar aquele formulário eu vou tirar esse botão aqui porque a gente não vai ter agendamento de WhatsApp nessa parte vamos trocar esse conteúdo aqui primeiro deixa eu pegar aqui esse título estamos aqui para ouvir você vamos colocar aqui Esse títulozinho beleza e agora esse substituto aqui também preencho o folclore abaixo colocar aqui nesse texto lembrando ó que aqui ele já pegou o que eu copiei tá mas você pode simplesmente selecionar

a expressão aqui e clicar em e para fazer esse feitinho aqui de colocar uma cor rosa nessa parte específica do texto eu vou fazer o seguinte eu vou copiar esse Rosinha aqui daquela paleta de cores tá você pode pegar esse hexadecimal de Algum outro elemento aí também e a gente vai trocar essa corzinha aqui ó vou pegar essa cor aqui e vou vir aqui se você não tiver com isso aqui ativo você vai alternar essa barra de ferramentas vai clicar aqui em cor do texto vai clicar em personalizada e vai colocar esse hexadecimal aqui infelizmente

esse ponto não te deixa pegar as cores globais Então você tem que fazer isso manualmente mesmo já estamos aqui com o nosso peixinho já vou clicar aqui para Atualizar e agora a gente vai arrastar um widget de formulário para cá que é bem comum de se ter em sites institucionais então vou clicar aqui nos nossos vídeos vamos procurar aqui por forme Ok eu vou arrastar esse elemento Aqui para baixo e a gente já vai ter um formulário de contato aqui e para configurar formulários aqui no elemento era bem simples Tá primeiro a gente vai colocar

o nome aqui para esse formulário só por uma questão de manutenção mesmo Então vou colocar aqui formulário de agendamento e não gosto de colocar caracteres especial mas você pode colocar isso se você quiser aqui a gente tem os itens do nosso formulário a gente pode adicionar mais itens também por enquanto eu vou deixar esse aqui e a gente vai mexendo tá o primeiro vai ser justamente o do nome então aqui eu vou colocar no rótulo vou colocar nome e sobrenome ele já vai modificando aqui do lado para gente né o Place holder que é Essa

parte aqui de dentro né eu vou colocar Digite o seu nome é esse pontinhos e se você tiver colocando um campo que é obrigatório e nome recheio eu sempre recomendo que sejam obrigatórios tá justamente por conta de uma parte aqui de baixo que eu ainda vou explicar você vai selecionar essa opção aqui de required que é obrigatório beleza e aí aqui eu vou fazer a mesma coisa com e-mail aqui na no rótulo vou colocar e-mail com o tracinho para ficar Mais abracerado e aqui no place holder eu vou colocar Digite o seu e-mail três pontinhos

pode colocar outra coisa também se você quiser tá e detalhe sempre que você tem aqui Um input aqui dentro do seu formulário você pode colocar para tipos diferentes beleza aquilo a gente tem de texto e-mail Érica essa parte aqui de mensagem tem aqui para telefone links enfim Tem vários tipos aqui você pode dar uma brincada se você quiser tá Tem esses tipos assim ó que é um tipo teste teste aqui ó tá vendo só esses rádiozinhos assim enfim tem muita coisa aqui para você testar depois se você quiser tá E aí aqui no caso eu

vou dar uma duplicada esse item aqui vou colocar também um de telefone ou de telefone eu não vou deixar obrigatório os que eu vou deixar obrigatório aqui são nome e e-mail Mas aí você pode mudar isso aqui de acordo com a sua estratégia Sem problema nenhum Tá eu vou colocar aqui Digite o seu contato eu vou colocar aqui telefone e aqui no tipo eu vou trocar para esse aqui ó que é de telefone aqui OK não vou deixar obrigatório mensagem aqui também eu vou deixar praticamente desse jeito eu vou colocar Digite sua mensagem Então não

sei Explique sobre o seu agendamento alguma coisa assim fale sobre o seu agendamento aliás vou colocar aqui agendamento explique-os sobre o seu agendamento Assim mas isso aqui é tudo opcional né Você pode colocar da forma que você quiser eu não vou deixar aqui como obrigatório se você preferir pode deixar como obrigatório tá aqui no input size eu vou trocar esse tamanho desse botão aqui por um pouquinho maior eu vou colocar que na verdade input é o tamanho do dos formulários aqui né então eu vou colocar aqui como esmall mesmo pequenininho eu vou pedir para mostrar

a o asterisco de Obrigatório para que a pessoa já saiba que ela precisa preencher isso aqui se você não quiser que mostra os rótulos você pode desabilitar isso aqui também tá tem muita gente que usa mas nesse caso aqui eu vou deixar aqui na parte do botão aqui sim eu vou aumentar o tamanho do botão para esse médio só para ele ficar um pouco mais gordinho aqui não tá dando para ver direito mas a gente ainda vai utilizar esse formulário melhor tá eu vou deixar alinhado dessa forma aqui Mesmo você pode mudar aqui o alinhamento

do botão Se você quiser eu vou deixar assim aqui no elemento a gente consegue fazer formulário de passos diferentes tá vendo É por isso que tem esse prévia e o anterior e o próximo aqui mas como esse aqui é um agendamento de um passo só bem simples A gente não vai mexer nessa parte aqui porém eu vou trocar aqui a mensagem desse botão de submete Vou colocar aqui solicitar agendamento [Música] Assim que a gente trocar a cor desse botão vai ficar mais visível mas por enquanto vamos deixar assim mesmo agora nas ações após a submissão

essa parte aqui é bem importante tá por padrão ele já vem esses dois aqui que são os que a gente vai utilizar esse primeiro significa o quê colecto subnicion significa que o elemento sempre que alguém preencher e mandar as informações desse formulário o próprio elemento vai fazer esse favor para gente de já ir Guardando essas informações dentro dele mesmo tá eu vou clicar aqui rapidinho eu vou clicar aqui para atualizar para não ter nenhum problema mas eu vou abrir numa outra aba aqui só para mostrar para vocês sempre que alguém fizer um submite lá no

nosso formulário aqui ó em elemento e envios ou submissions aqui né a gente vai ter acesso às informações dessa pessoa nessa lista aqui ok então o próprio elemento Já guarda essas informações para você ter esse histórico Mas de qualquer maneira a gente consegue também fazer um envio de um e-mail com essa notificação isso aqui essa parte aqui é a importante para grande maioria dos Sites institucionais justamente porque porque você quer que a pessoa mande uma mensagem aqui e o atendente ou a pessoa responsável por estar gerenciando essas mensagens vai receber um e-mail com essa notificação

e vai conseguir entrar em contato novamente de retorno com essa pessoa Beleza então a Gente vai deixar essas duas ações aqui mas só para mostrar para vocês se a gente clicar nesse maiszinho a gente tem várias outras integrações que também podem ser feitas aqui no elemento Você pode mandar uma notificação para um segundo e-mail também ou seja em vez de enviar só para um atendente você pode mandar para dois você pode fazer um redirect após a submissão nesse formulário aqui se você quiser por exemplo redirecionar a pessoa para uma Página de Obrigado alguma coisa assim

você pode fazer integração com ferramentas de e-mail marketing caso você esteja trabalhando com uma submissão que vai ter uma grande demanda ali de mensagens Onde você quer trabalhar um marketing em cima dessa campanha de e-mails para ela tá enfim você pode dar uma olhadinha Aqui tem bastante coisa que pode ser feita Tá eu vou deixar esse padrão mesmo que é o que vai ser utilizado para grande maioria Dos casos de sites institutos institucionais e aqui nessa parte aqui de coleção da submissões dentro do elemento a gente não precisa fazer nada ele já faz isso automático

Porém Aqui na parte do e-mail a gente precisa mexer em algumas coisas nesse tio aqui vai ser para onde esse e-mail vai ser notificado então no caso aqui Onde você colocaria o e-mail da sua loja do seu negócio do da sua atendente né que vai estar recebendo essas mensagens aqui e entrando em Contato novamente com as pessoas aqui vai ser o assunto que vai chegar lá no seu e-mail então por exemplo você pode colocar nova solicitação de agendamento E aí você pode colocar aqui Website também para saber que tá vindo daqui né Isso aqui vai

ser opcional vai ser de acordo com a sua estratégia nas mensagens é bom que você deixa esse aqui ó ou Field que são todos os campos aqui do formulário significa que quem receber essa notificação vai receber o nome e Sobrenome que a pessoa preencheu o e-mail o telefone se preencheu isso aqui já já que não é obrigatório e as informações de agendamento também tá então deixa aqui todos os campos mesmo que é mais tranquilo de você ter essas informações aqui embaixo já são as informações de quem está enviando a mensagem ele coloca um e-mailzinho aqui

relacionado ao seu domínio como padrão mas o que que eu recomendo e você preenche isso aqui com as informações Dinâmicas das pessoas que preencherem esse formulário então aqui ó no from e-mail né que é o e-mail da pessoa que está enviando essa mensagem você vai fazer o seguinte ó você vai vir aqui nos seus Campos do formulário vai vir aqui no campo de e-mail que tem que estar obrigatório para isso aqui funcionar direitinho tá vai vir aqui na aba de avançado e você vai pegar esse short code aqui ó vai copiar Isso aqui vai trazer

aqui para Sua aba de e-mails e vai trocar esse fome meio aqui para esse short code ok ele já vai mudar aqui embaixo também E aí aqui no nome você vai fazer a mesma coisa você vai vir aqui nos seus itens no nome aqui avançado e vai colocar esse mesmo short code aqui do nome para esse campo do nome da pessoa que está enviando a mensagem essa forma vai aparecer para você que essa mensagem foi enviada do e-mail dela e do nome dela para esse e-mail que você preencheu aqui Em cima ok e por isso

que eu falei que é tão importante você deixar isso aqui como obrigatório porque se você não preencher se a pessoa não preencher Isso aqui vai dar erro na submissão tá porque não vai ter como puxar essas informações dinamicamente aqui são alguns metadados que ficam aparecendo ali no rodapé desse meio para não ficar muito informação eu tiro algumas coisas aqui que não tem muita necessidade tipo esse crédito aqui o IP remoto também não precisa o agente De usuário Normalmente eu deixo só a data a hora e o page URL aqui né que é URL do site

e se você quiser aqui você pode selecionar alguma outra clicando nesse paizinho Tá mas normalmente deixa esses três meses já tá de bom tamanho essas configurações aqui de Passos a gente não vai mexer porque esse aqui é um formulário simples não tem passo um dois três quatro né aqui nessas opções adicionais é importante que a gente selecione essa parte aqui de mensagens Customizadas e traduza essas mensagens aqui tipo o seu formulário foi submetido com Sucesso teve erro teve isso aquilo tal se você não fizer isso aqui vai aparecer tudo em inglês não vai ficar muito

intuitivo para as pessoas né então a gente vai pegar cada uma dessas mensagens aqui eu vou colocar aqui no Google tradutor para ele fazer esse trabalho para gente vamos colocar aqui ó tradutor e aí eu vou pegar aqui a mensagem vou copiar mensagem traduzida Vou trazer aqui para página de contato e trocar aqui fazer isso com todas as mensagens tá E aí o Google tradutor já faz esse processo bem bonitinho para gente Ok então aqui beleza e essa última aqui do mesmo jeito cara aqui você pode parar para ler direitinho cada uma dessas mensagens tá

Mas no geral é só isso mesmo que você precisa fazer está com tudo isso aqui configurado agora é a hora de impunerar aqui o nosso formulário vamos ver aqui em estilo Nessa parte aqui do GAP ou falo entre colunas não precisa mexer porque a gente só tem linhas né uma do lado da outra mas aqui nas linhas eu vou dar um espaçamento um pouquinho maior vou aumentar aqui para 14 foi feito diminuir um pouquinho né mas eu vou deixar aqui 14 mesmo o espaçamento do rótulo eu vou também vá aumentar um pouquinho aqui eu vou

colocar 7 para poder desgrudar um pouquinho do submite a cor de texto dele aqui ó vou trocar para esse primário só Para ficar mais verdinho e aqui nesse asterisco aqui de obrigatoriedade eu vou colocar aquele Rosa Rover aqui só para trocar de acordo com a identidade também vamos trocar aqui esse HTML Na verdade acho que no geral Vou deixar tudo isso aqui padrãozinho mesmo tô aqui em Field que eu vou trocar essa cor aqui de dentro vou colocar esse primário também só para deixar mais verdinho mesmo background eu vou deixar branquinho dessa forma a borda

eu vou colocar esse Verde aqui mais escuro porém eu vou dar colocar uma transparência para ele aqui só para deixar um pouco mais delicado assim ó deixar mais ou menos aqui na metade e vai aumentar um pouquinho esse vídeos aqui né esse arredondamento Vamos colocar aqui uns 10 para ver como é que fica acho que já fica legal e agora aqui no botão vamos dar uma melhorada nele aqui né primeiro eu vou trocar essa cor aqui vou colocar o rosa aqui e o rosa aqui embaixo também beleza para ele Ficar sempre assim e aqui no

Hover eu vou colocar aquele Rosa um pouco mais escuro OK aí Aqui vamos trocar aqui esse arredondamento também eu vou voltar aqui para o normal colocar o arredondamento de 30 para esse botão vai ficar desse jeito vou tirar aqui esse pede e vamos colocar aqui um pede no superior de 20 pede inferior de 20 também vou ficar 20 logo para todos os lados vincular para ele já ficar certinho e por fim vou vir aqui na tipografia vou aumentar um pouco O tamanho desse botão aqui vou colocar ele com esse peso 600 E aí dessa forma

ele já vai ficar do jeitinho que a gente quer aqui no formulário a cor das mensagens eu vou deixar tudo como padrão aqui tá com as próprias cores que os elementos que os elementos atrás mas se você quiser depois você pode vir aqui e colocar uma cor diferente tanto mensagens de sucesso e de erro e se aparecer também alguma mensagem dentro aqui do formulário tá vou clicar aqui Para atualizar Ok e agora só falta aqui essa última sessão que é bem simples A mais uma mão com açúcar de todas que é onde a gente vai

colocar esse mapa aqui ó Cadê esse mapinha aqui bora lá é isso a gente vai clicar aqui novamente nesse mais pode selecionar qualquer um desses dois containers tá vou selecionar esse primeiro aqui e aqui no caso como eu não quero que esse meu mapa ele pegue só nessa parte aqui dessa largura eu quero que ele pegue a sessão inteira né Toda Largura aqui do dispositivo eu vou colocar essa largura de conteúdo como largura total e ele vai pegar tudo aqui tá eu só sugiro que você utilize esse tipo de coisa para esses elementos assim tá

aqui pé que fiquem legais pegando tudo no geral se você não tiver mexendo com isso eu sugiro que você siga ele direitinho o Grid da página esse aqui ele é um pouquinho menor mas de qualquer maneira no geral todos estão praticamente todas estão seguindo Aquela Aquele padrãozinho de 1.200 mas aqui a gente vai deixar essa sessão toda como padrão assim mesmo e aí eu vou vir aqui nos nossos elementos vou procurar pelo Maps esse Google Maps aqui vou arrastar para cá ele já pegou tudo aqui de uma vez tá por padrão ele traz essa localização

de Londres aqui mas no caso você vai colocar a localização do negócio onde você tiver colocando esse mapa a Bia mas eu tô fazendo um site institucional para um negócio que não Tem localização é virtual Beleza não precisa fazer esse passo Então tá só o contato aqui já tá de ótimo tamanho Mas se você tiver um espaço físico é legal colocar uma Pinha de localização porque as pessoas já estão acostumadas com isso aqui no caso você pode procurar qualquer local que esteja cadastrado no Google Maps E aí no caso aqui ó por exemplo eu vou

colocar Brasília é onde eu estou aqui mas você pode colocar algum local mais específico também né tipo Onde está Cadastrado ali no Google Maps eu vou colocar um zoom um pouco maior para dar uma aproximação nesse mapa então eu costumo colocar aqui uma média de 15 16 já fica com uma boa aproximação e aqui na altura eu vou colocar altura de 300 pixels para esse mapinha aqui e já tá de ótimo tamanho para ele se adequar um pouquinho melhor a essa identidade aqui o que que eu vou fazer aqui em estilo a gente não consegue

fazer muita coisa tá mas aqui em filtro CSS eu vou clicar Nesse lápisinho aqui eu vou diminuir um pouco a saturação você pode fazer o contrário também ó deixar ele mais vivo ou deixar ele um pouco mais opaco assim tipo não opaco mas menos intenso aqui tá vendo e aí dessa forma já combina melhor com a saturação das cores aqui da página também ok então vamos deixar desse jeito assim já vou clicar aqui para atualizar e agora vamos vir aqui no modo responsivo e dá uma modificada rapidona aqui para mobile beleza contato já ficou Certinho

aqui também o formulário aqui também já tá bem legal para mobile inclusive deixou só dar uma olhadinha nesses espaçamentos acho que eu vou só aumentar um pouquinho esse título aqui Vamos aumentar um pouquinho até ficar legal aqui na linha toda ó vou deixar 28 ok aqui eu vou dar uma pequena nesse texto aqui aqui eu vou colocar 15 só para caber em quatro linhas aqui o formulário já ficou bem legal dessa forma aqui também não tem que ficar Mexendo em muita coisa e aqui nesse mapa eu vou clicar no mapinha aqui e vou dar uma

diminuída Nessa altura em vez de 300 eu vou colocar 200 só para ele não pegar o scroll muito grande da página 200 já tá de ótimo tamanho Ok e olha só vamos clicar aqui para atualizar e agora eu vou clicar aqui para ver as alterações vamos voltar aqui para nossa página inicial e começar a nossa sexta etapa aqui que é a parte mais bonitinha né e mais legal de se fazer e a de testar o Nosso site e estamos tudo certo a gente comemorar fazer na nossa dancinha da vitória Ok então ó vamos pegar aqui

a nossa página onde é que eu tava já me perdi com tanta água aberta aqui cantava aqui que eu tava tá ó vamos lá para página home vamos dar uma olhadinha Olha só o site que vocês construíram gente site profissionalzão tá com muitos tipos de sessões que são muito tranquilo de você adaptar depois ó trocando a cor trocando esse fundinho o título conteúdo Aqui as imagens você consegue ter todo um esqueleto aqui montado completinho para adaptar para o site que você precisar no negócio que você precisar aí também tá olha só só dando um review

aqui geral essa página de serviço super chique também beleza e a página de contato aqui com esse mapinha de localização também para pessoa conseguir clicar aqui e ser localizada para onde ela quiser beleza Meus parabéns inclusive por você ter chegado até aqui Isso significa que você tem um site institucional Completão aí na sua mão seja para o seu próprio negócio para um cliente seu para o seu próprio portfólio para aprendizado próprio né eu espero de verdade que você tenha gostado desse conteúdo e conseguir chegar nesse resultado e se você chegou nesse resultado inclusive já Tira

uma fotinha aí compartilha com a gente lá no nosso perfil também na escola de sites e a gente vai te dar os parabéns lá na hora E comemorar isso juntos Beleza a gente adora fez esse tipo de resultado de vocês é uma motivação muito grande para continuar trazendo esse conteúdo aqui para vocês também eu vou adorar receber esse print lá beleza ó e se você curtiu esse conteúdo não deixa ajudar aquele likezinho Para apoiar aqui o canal né e comentar também o que que você achou deixar sua sugestões do que que você quiser aí para

os próximos vídeos aqui nos comentários beleza nem que seja Também um hashtag tamo junto também para aumentar o engajamento e fazer com que esse conteúdo chegue para mais pessoas beleza eu digo isso porque infelizmente de um tempinho para cá desde as últimas mudanças no algoritmo aqui da plataforma o titio e o YouTube tem dado uma diminuída no alcance aqui do canal e você fazendo isso vai ajudar muito para que a gente consiga continuar trazendo esse tipo de conteúdo gratuito e de qualidade aqui no canal para vocês e vai Fazer com que esse tutorial e todos

os outros que a gente tem aqui ajudem ainda a mais pessoas trazendo esse alcance aí para pessoas que precisam desse conteúdo também assim como você precisou e eu sei que vocês são tops e vão fazer isso pela gente né e por isso que desde já eu agradeço bastante esse apoio de vocês porém antes de terminar esse tutorial eu quero só dar um toque para a galera que é mais interessada em evoluir E quer se tornar um profissional Completo nesse universo de web design eu tenho certeza que seguir esse tutorial aqui já foi um grande marca

para você mas se você quiser aprender ainda mais né e dar um próximo passo e verdadeiramente aprender a criar sites impressionantes de uma maneira 10 vezes mais rápido do que a forma tradicional e de uma forma independente também sem precisar ficar dependendo de tutoriais aqui da internet então eu te convido a Clicar no primeiro link que está aqui na Descrição desse vídeo e conhecer o nosso treinamento Completão aqui da escola de sites sobre esse assunto o treinamento Z pro esse é o nosso treinamento Completão que com certeza poderá finalmente te levar ao patamar de se

tornar um desenvolvedor de sites profissional Inclusive é o mesmo treinamento utilizado pela própria equipe interna aqui de web designer da escola de sites então se você quer evoluir nessa habilidade não perde tempo Ok já clica Aí no primeiro link da descrição desse vídeo e aproveita essa chance por hoje eu vou ficando por aqui e até o próximo tutorial