CRIE um Site Profissional Completo em 1h Totalmente do ZERO 💥

Fala pessoal eu sou a Bia da escola de sites e nessa aula nós vamos criar juntos um site profissional completo Totalmente personalizável do absoluto zero e ainda por cima em até uma hora esse tutorial é perfeito para você que tem interesse em se tornar um Web Designer e trabalhar com criação de sites profissionais ou ainda para você também que tem uma empresa e quer um site para conseguir divulgar os seus Produtos e os seus serviços né e aparecer no o Google de uma forma profissional paraos seus clientes eu te garanto que ao fim dessa aula

você vai ter uma ling page bonitona e 100% responsiva assim como essa que tá passando para você aí agora saca só massa né E O legal é que você consegue inclusive adaptar esse projeto pro que você quiser apenas mudando por exemplo os textos as cores e as imagens de uma forma super rápida e fácil igual vocês Vão ver aqui nessa aula e é bom já avisar que aqui nós vamos Vamos criar o site utilizando o WordPress e o elementor justamente porque essas são as melhores ferramentas para conseguir criar praticamente qualquer tipo de site de uma

forma muito simples visual totalmente personalizável E ainda por cima sem precisar de nadinha de código ou programação ó aqui beleza mesmo você que nunca sequer tenha pensado em criar um site antes na sua vida hoje você vai Sair dessa aula com essa página bonitona prontinha e no ar disponível para todo mundo e só para contextualizar todo mundo esse tutorial vai ser dividido em três etapas para ficar bem prático e didático para você acompanhada aí a primeira etapa será a de domínio e hospedagem a segunda é a das configurações iniciais onde nós vamos preparar o terreno

pro nosso site e a terceira é a de criação do layout da nossa página dentro do elemento Então Vamos logo pra primeira etapa Sem enrolação nessa etapa nós vamos falar sobre dois conceitos que são indispensáveis para quem pensa em criar um site profissional que é o de domínio e hospedagem Bia que que é esse de arte de domínio e hospedagem não tenho ideia do que você tá falando Tô boiando aqui calma que eu vou dar uma explicada para quem não conhece esses termos Beleza o domínio é basicamente o nome do seu site Por exemplo quando

a gente fala lá Www.escoladesaude.pr.gov.br é bem famoso www.google.com ou www.google.com.br Esses são os domínios do Google beleza Ou seja em resumo o domínio funciona como o endereço no qual as pessoas vão conseguir acessar e encontrar o seu site na internet já a hospedagem vai ser o servidor do seu site Como assim servidor Bia que que isso significa significa que a hospedagem é o serviço que vai pegar e Vai armazenar todos os arquivos do seu site e disponibilizar todos esses arquivos pro navegador das pessoas que forem acessar o seu site é a hospedagem que deixa o

seu site funcionando no ar disponível para todo mundo e ela atua como se fosse por exemplo uma operadora de telefone Vamos pensar por exemplo aqui no caso do nosso celular não tem como nós termos por exemplo um número fazer e receber chamadas e tudo mais né que dá para fazer dentro desse universo Ali sem aderir a uma operadora antes certo pois então com a hospedagem funciona do mesmo jeito e ainda por cima assim como existem operadoras ruins que só vão te dar dor de cabeça lá com a Bendita da Judite com as hospedagens pode ser

do mesmo jeito então sim além de precisar de uma hospedagem é de suma importância que você verifique se essa empresa que presta esse serviço é de referência no mercado e que você também escolha um plano dentro dela com todos Os recursos que o que você vai precisar para conseguir deixar o seu site funcionando com qualidade pras pessoas aqui na escola de sites a hospedagem que nós mais utilizamos nos nossos próprios projetos nos de clientes e também recomendamos aos nossos alunos é a hospedagem da hosing eu digo isso porque de todas as hospedagens que nós já

testamos E olha que foram várias hospedagens viu os planos da hosing são os que demonstraram ter o melhor custo Benefício menor índice de reclamação lá no Reclame aqui também um suporte que é através de um chat ao vivo que ajuda muito sempre que a gente precisa e muita facilidade dentro das configurações também tem um painel bem simples de mexer e inclusive Nós ainda vamos ver isso aqui nessa aula na prática também e para garantir o domínio e hospedagem pro site que você vai construir aqui hoje você terá duas alternativas e eu já adianto que a

segunda alternativa é a Melhor hein mas você fica fica seu critério aí para escolher a que fizer mais sentido para você vamos lá lá a primeira alternativa é a de seguir aqui comigo onde eu vou fazer todo esse processo de contratação e configuração do domínio hospedagem junto com você dentro desse tutorial já a segunda opção que inclusive eu avisei que seria melhor é a de clicar no link que estará aqui na descrição desse vídeo e fazer uma contratação guiada com um especialista Aqui da nossa equipe nessa contratação guiada você vai ter alguém aqui da escola

de sites fazendo tudo isso junto com você para garantir que tudo fique 100% ou seja você vai basicamente ganhar uma consultoria de graça para fazer todo esse processo só que não acaba por aí não viu ainda tem mais no final dessa contratação ainda vem um presentão você vai ganhar de bônus por nossa conta uma licença original do elemento pro só para você ter uma ideia essa licença tá Custando por volta de $9 para comprar de forma avulsa o que vamos combinar né gente é uma baita de uma facadinha 9 mas mas se você fizer essa

contratação guiada aqui com a gente você vai ganhar essa licença sem pagar um centavo a mais por isso mas ó reforçando para não ter nenhum mal entendido tá esse super bônus só vale para quem fizer a contratação ao vivo ali com a nossa equipe Beleza se você decidir não optar por essa contratação guiada essa licença vai ter Que ficar por sua conta OK então se eu fosse você eu já clicava agora no link de resgate aqui embaixo para fazer essa contratação guiada e ganhar de bônus esse presentão que com certeza vai valer muito a pena

mas de qualquer maneira como eu avisei eu vou mostrar aqui todo esse passo a passo da contratação também se por algum motivo você preferir esse caminho Bora lá bom então como eu já havia dito a hospedagem que nós vamos utilizar aqui nesse tutorial é a Hospedagem da rosinger justamente por todos os benefícios que eu já disse antes como por exemplo de suporte simplicidade de configuração por ser também uma empresa que é referência de qualidade não não só no Brasil como também em vários outros países desempenho custo benefício e justamente por ser a hospedagem que nós

mesmos mais utilizamos os nossos próprios projetos e nos de clientes também para você conseguir acessar essa mesma página que Eu tô aqui é só você clicar no link que estará aqui na descrição desse vídeo Pode ser que dependendo da época que você estiver acessando esse tutorial essa página aqui apareça um pouco diferente para você até porque por exemplo aqui no momento Tá aparecendo até essa versão S de black friday né pode ser que não esteja aparecendo para você mas de qualquer maneira pode ficar tranquilo que a ideia geral desse passo a passo é sempre a

mesma Ok sempre Continuará a mesma coisa então pode seguir tranquilo por aí e olha só ao descer aqui essa página vai aparecer alguns planos de hospedagem pra gente escolher e a que eu vou contratar aqui junto com vocês é justamente essa opção mais popular aqui a do plano Business já que esse plano oferece um excelente custo benefício pela quantidade de recursos que Ele oferece Olha só com esse plano aqui você vai conseguir deixar o seu site no ar de uma forma Totalmente tranquila com bastante armazenamento olha só essa quantidade aqui com desempenho aprimorado para conseguir

deixar o seu site mais rápido inclusive também ó com SSL ilimitado grátis Bia que que é esse negócio de SSL é justamente esse cadeadinho que fica aparecendo aqui do lado do seu navegador que diz que o seu site é seguro se o seu site não te tiver isso ele nem vai ser recomendado pelo titio Google viu e e-mails profissionais e vários outros Recursos também tá é só você dar uma olhadinha geral aqui e um dos principais benefícios É bem esse aqui ó o de domínio grátis contratando a partir de um ano você ainda ganha o

domínio grátis que normalmente você teria que comprar por fora e ter um custo extra com isso então só de ter esse benefício aqui você já vai conseguir dar uma boa economizada nesse investimento também inclusive se você quiser você pode até dar uma olhada geral nos recursos aqui dessas outras Opções fazer um comparativo se você tiver alguma dúvida você pode passar o mouse nessa interrogação e ver mais explicações sobre o que você tá com dúvida ali ou então inclusive né mais uma vez reforçando aquela segunda alternativa você pode optar pela contratação guiada onde um especialista vai

sentar ali junto com você e tirar todas essas dúvidas direitinho para você ter total tranquilidade nesse processo mas no caso aqui eu vou optar por essa Opção justamente porque eu sei que esse plano aqui vai garantir tranquilidade pra grande maioria dos projetos que podem aparecer para vocês então dito isso nós vamos clicar aqui para adicionar ao carrinho e aí então nessa tela aqui de conclusão do nosso pedido primeiro nós vamos escolher um período aqui para esse o nosso plano dessas opções o período que eu mais recomendo geralmente é esse aqui de 12 meses né um

ano justamente porque a partir desse Plano aqui nós conseguimos garantir a economia de resgatar um domínio grátis Além de que também proporcionalmente as parcelas aqui ficam bem menores do que por exemplo se você optar por essa opção recorrente aqui né de R 24,99 sobe para R 64,99 esse valor aqui ele é cobrado de uma vez Porém você tem a opção de dividir isso aqui em até 12 vezes colocando isso dentro de um cartão de crédito por exemplo então mesmo se Adicionar alguns juros ali do cartão ainda assim proporcionalmente de forma mensal vai ficar um valor

muito menor do que esse aqui de R 65 por mês e aí é claro né quanto maior o período que você escolher por exemplo 24 48 meses menor será o proporcional mensal que você vai ter que investir aqui dentro inclusive nesse de 48 meses você ainda ganha dois meses grátis também então se você quiser investir por um período ainda maior essas opções aqui também valem bastante A pena no entanto né como ali Às vezes a pessoa tá com o investimento inicial um pouco mais apertado Eu sugiro que você opte pelo menos por essa opção aqui

de 12 meses ok depois de escolher o período a gente vai passar aqui pela etapa dois que é a de criação da nossa conta e essa parte você consegue fazer tanto colocando um endereço e uma senha aqui dentro da própria hostinger ou então fazendo um login social através de uma conta que você tem no Google ou então no Facebook Inclusive eu vou fazer clicando nessa opção aqui de Google já volto prontinho já selecionei lá o meu e-mail do Google já apareceu aqui que eu estou logada aquela opção sumiu e agora por último é só a

gente selecionar a forma de pagamento que a gente prefere dá para ver que a hosting oferece várias opções para poder facilitar a nossa vida no entanto dessas formas de pagamento aqui as que eu mais recomendo são essas aqui de cartão de crédito ou pix justamente Porque essas aqui o pagamento é feito praticamente instantâneo cartão de crédito é instantâneo pix pode levar ali mais ou menos de 5 a 20 minutos para cair mas de qualquer maneira é bem rapidinho também porém essas outras outras opções podem levar um período de 24 a 72 horas em média para

ter essa compensação de pagamento e aí dessa forma você vai ter que dar uma pausa nesse tutorial esperar essa compensação e quando tiver ativo Ali você vai Conseguir seguir aqui com essa aula no meu caso eu vou selecionar essa opção aqui de pxs Mas você seleciona a que você preferir e depois os próximos passos vão ser de acordo com a forma de pagamento que você escolheu bem Básico como qualquer compra na internet tá Você coloca ali os seus dados e faz o seu pagamento no caso aqui do pix é bem simples eu vou inclusive clicar

aqui tem um cupom de desconto isso porque eu tenho um benefício Zinho extra para Vocês se vocês clicarem aqui e digitarem a escola de sites vocês vão conseguir garantir um desconto ainda maior aqui na sua hospedagem Vamos ver quanto que vai cair aqui ó ó tava 299 e caiu para 269 Então já deu um bom descontinho e descontinho é sempre bom né gente então eu vou clicar aqui para enviar o meu pagamento seguro depois ele vai pedir para preencher o CPF ou CNPJ eu vou preencher aqui e vou clicar em continuar com pix via qrcode

Beleza agora é jogo Rápido eu consigo só copiar esse código aqui ou então escanear pelo QR Code fazer o pagamento no meu aplicativo aqui do banco e assim que cair o esse pagamento né Assim que ele for compensado eu vou receber um e-mail dizendo que esse processo foi concluído e após o recebimento desse e-mail eu vou clicar aqui em continuar então eu vou fazer esse Pag rapidinho e já volto aqui na próxima tela com vocês Prontinho Olha só não levou nem 3 minutos e a roser já Compensou aqui o meu pagamento Então agora eu vou

clicar aqui para continuar e agora eu já caí direto aqui no passo a passo pra gente continuar agora a nossa configuração do hospedagem primeiro ele mostra só essa tela de boas-vindas né eu vou clicar aqui para começar agora depois ele me pergunta se eu quero criar um novo site ou migrar o meu site Inclusive essa parte aqui ó crie um site WordPress Ou use outro sistema de gerenciamento de conteú conteúdo como a Gente vai criar um site WordPress eu vou selecionar essa opção vou clicar aqui depois ele pergunta qual que é a plataforma que a

gente vai utilizar se é a de WordPress ou então se é o próprio criador de sites da hostinger aqui a gente vai criar o site utilizando o WordPress então vou clicar aqui para selecionar depois ele pede pra gente criar as nossas credenciais de login dentro do painel do WordPress isso aqui é bem importante que você salve Direitinho essas informações porque você vai precisar disso depois para conseguir acessar o painel para editar o seu site Então pega aqui direitinho o e-mail administrador do seu site e a senha que você cadastrar salve isso direitinho para você não

perder depois eu vou cadastrar aqui rapidinho e vou clicar em continuar depois ele já dá algumas sugestões de adição de plugin pra gente já entrar no painel com esses plugins ativos mas no meu caso aqui eu não vou Utilizar nenhum desses plugins então eu vou desmarcar essas opções e vou clicar em continuar por fim ele ainda dá algumas opções aqui de temas pra gente instalar para conseguir configurar o visual do nosso site nós não vamos utilizar nenhuma dessas opções aqui então eu vou clicar aqui para pular eu não preciso de um template beleza nessa etapa

ele dá uma sugestão de usar a inteligência artificial aqui da hostinger para criar os textos do seu Site mas no caso aqui eu vou pular essa etapa porque nós vamos fazer esse processo de uma forma mais tranquila vou clicar aqui e agora vem o primeiro passo da gente Conseguir configurar o domínio que a gente vai resgatar lá no plano que a gente selecionou lembra que o site precisa da hospedagem e do o domínio também e a gente ganhou um de presente então Ó já vou falar aqui que eu quero o meu domínio grátis Você também

tem a opção de comprar um novo domínio aqui Pela própria Hoster ou então usar um domínio existente que você já tenha comprado em outro lugar como por exemplo no registro br e apontar aqui para esse seu plano no caso eu vou selecionar essa primeira opção e aqui eu vou digitar o nome de domínio desejado pro meu site nesse projeto fictício eu vou montar o layout aqui para mostrar para para vocês como que isso é personalizado sobre um escritório de contabilidade que se eu não me engano o nome é agilize e Finanças totalmente fictício mas eu

vou tentar colocar aqui um domínio nesse titio Então vou colocar aqui agilise vou colocar financas porque não pode ter nenhum caractere especial Inclusive eu indico que você coloque um nome pertinente ao seu negócio ou então ao projeto que você tá criando evite por exemplo utilizar muitas palavras em inglês que vê a confundir as pessoas não use caracteres especiais Não deixe o nome muito longo também justamente para Ter mais facilidade desse seu site ser encontrado pelas pessoas depois E aí depois de colocar aqui o o domínio que você quer você vai vir aqui do lado e

vai selecionar a extensão desse domínio Ou seja aquele finalzinho ali pode ser p comom.com.br pnet tem várias opções aqui mas as que eu mais recomendo são principalmente a pcom.br Principalmente se o seu público for brasileiro e a pon comom também como uma boa alternativa caso você não Encontre pcom.br ou então caso você vai fazer um site com audiência internacional também vou clicar aqui nessa opção e eu vou clicar para pesquisar a disponibilidade desse domínio ó mostrou aqui para mim que esse domínio está disponível Então tá tudo ok para eu seguir em frente pode ser que

você busque por alguma opção que já esteja em uso e domínio ele é exclusivo viu gente se você por exemplo tentar cadastrar aqui Google.com.br não vai ter essa opção disponível para você todo o nome de domínio é exclusivo então é bem importante que você pense bem nessa alternativa que você vai colocar aqui porque isso vai ser de domínio seu e se você errar qualquer coisinha aqui depois para você arrumar é só comprando o novo domínio tá não tem como editar um domínio que você já adquiriu Mas beleza ó Vou conferir aqui tá tudo certo e

vou clicar em continuar depois você vai Completar o registro do seu domínio colocando o seu contato direitinho primeiro ele pergunta se você né quer cadastrar isso para um perfil pessoal ou de empresa vou colocar aqui pessoal e vou clicar em próximo passo depois você vai colocar aqui os seus detalhes de contato também vai preencher tudo direitinho e vai clicar aqui em próximo passo e por fim você vai preencher o CPF ou o CNPJ no qual você vai registrar esse domínio coloquei aqui vou clicar Aqui para finalizar o registro E aí ele vai fazer aqui esse

registro de domínio para mim aqui você confere essas informações direitinho e clica para concluir a configuração do seu domínio por fim é só você esperar aqui esse processo automático que a própria hostinger vai finalizar essas configurações para você então vou aguardar aqui rapidinho e já volto com a próxima tela Prontinho finalizamos as configurações aqui da hospedagem do Domínio agora nós já conseguimos editar o nosso site ou então acessar o painel de controle aqui na hosting primeiro eu vou acessar aqui esse painel só para mostrar uma informação aqui para vocês quando a gente adquire aqui o

domínio por esse Resgate aqui da hostinger infelizmente depois que a gente concluir essas configurações por um tempinho ainda fica aparecendo esse aviso aqui no nosso painel ó o domínio nã estará acessível dentro de 3 minutos e aqui Embaixo ele fala seu domínio está se conectando com a hostinger Ou seja no momento estamos conectando seu domínio aos name serves da hostinger e o seu site pode ficar fora do ar até que a conexão seja totalmente concluída isso pode levar cerca de 3 minutos e de fato tá gente depois que a gente faz essas configurações ainda tem

um periodo Zinho ali de propagação desse domínio aqui pro nosso plano da r E aí dentro de TRS a 5 minutinhos em Casos raros Pode ser que leve ali até 2 horas Mas normalmente é bem rápido pode acontecer esse período aqui de propagação então eu peço que você pause aqui esse vídeo fique atualizando essa página até esse aviso sair depois que ele sair a gente consegue acessar o nosso painel do WordPress Beleza então eu vou dar uma pausa aqui e esperar rapidinho e vocês fazem a mesma coisa daí já volto Prontinho esperei aqui cerca de

TRS 4 minutinhos e já sumiu Aquele aviso ali para mim inclusive esse botão aqui de painel do administrador ficou ativo também então eu vou clicar justamente nesse botão aqui pra gente conseguer acessar o painel do WordPress assim que a gente acessa a hostinger dá esse passo a passo aqui de facilitador de criação de sites mas no caso eu vou fazer esse processo manual aqui com vocês então não precisa se atentar com isso aqui agora nós vamos entrar na Segunda Etapa desse tutorial que é a de Configurações iniciais onde a gente vai preparar os terrenos do

nosso site aqui antes da gente efetivamente começar a criar o layout dele inclusive Meus parabéns por já ter finalizado a primeira etapa que era de domínio e hospedagem agora bora aqui para essa segunda etapa antes de tudo só para avisar aqui vocês aqui você tem a opção de acessar o seu painel da hostinger e clicar aqui nesse botão em painel de controle para conseguir acessar o seu Painel do WordPress no entanto para você não ter que fazer todo esse processo outra forma mais rápida é de você simplesmente ó deixa eu sair aqui para vocês verem

é é de vocês simplesmente acessarem o domínio que você acabou de resgatar e colocar ao final aqui esse atalho Olha só você vai colocar barra WP tro admin E aí dessa forma você vai conseguir acessar o painel de login aqui do WordPress Aqui é onde você vai utilizar as credenciais que eu pedi para Você salvar do e-mail e a senha que você cadastrou para acessar esse painel eu vou fazer isso aqui rapidinho Inclusive eu vou deixar isso aqui checado para conseguir entrar novamente aqui de forma mais fácil e vou clicar aqui para prontinho já chegamos

aqui no nosso painel inicial do WordPress e para não ficar com todas essas informações poluindo a nossa visão aqui né Eu costumo a gostar de limpar tudo isso aqui para poder ficar um ambiente mais Agradável de trabalho eu vou clicar nessa opção aqui ó de opções de tela e eu vou desmarcar todas essas opções para deixar o nosso painel mais organizadinho vou voltar aqui e Pronto né ficou um pouquinho mais amigável inclusive Se esse for o seu primeiro contato com WordPress não se assuste tá bom ele é é bem mais tranquilo do que o que

parece e a gente vai vir aqui bem passo a passo os principais pontos onde Você deve olhar aqui dentro do seu painel primeiro Nós vamos clicar aqui em configurações e aí aqui nessa etapa você vai colocar por exemplo um título para esse seu site e uma breve descrição para ele também já para o Google começar a entender sobre o que que é que o seu site se trata o meu projeto aqui ele vai ser do escritório de contabilidade agilize Finanças então eu vou colocar por exemplo aqui em cima agilize finanças que é o nome da

marca e aqui embaixo eu vou escrever um pouquinho Melhor escritório de contabilidade agilize Finanças Pronto já coloquei aqui um nome e uma descrição você preenche aí também IX eu acabei clicando aqui sem querer voltei e aqui embaixo Outro ponto bem importante também é essa parte aqui de idioma do site caso por algum motivo o seu painel esteja aparecendo em inglês aí para você você pode colocar aqui português do Brasil e salvar as alterações aqui embaixo para conseguir deixar tudo Traduzido aqui e bem mais fácil de mexer no seu painel tem outras opções aqui você pode

dar uma pausa e dar uma olhadinha em cada uma delas também mas para não estender muito esse tutorial eu vou me ater justamente à principais que você precisa saber aqui ó nessa parte de links permanentes nós vamos selecionar essa opção e vamos selecionar isso aqui ó essa estrutura de links por nome do post beleza dessa forma os atalhos do nosso site vão conseguir ficar bem mais Fácil de serem identificados se a gente não marca isso aqui pode ser que outras páginas que a gente crie apareça por exemplo com um código aleatório uma data e depois

o nome da nossa página e dessa forma não fica muito amigável para as pessoas colocando isso aqui você garante que as pessoas vão conseguir encontrar o seu site mais fácil vou clicar para salvar essas alterações e Prontinho depois nós vamos vir aqui em aparência e aí eu vou selecionar um tema para poder Criar o nosso site por padrão vem essas opções aqui nós não vamos utilizar elas eu vou clicar aqui em Adicionar novo e eu vou adicionar um tema que é bem leve e 100% compatível com elementor justamente porque foi desenvolvido pela mesma empresa então

eu vou clicar aqui para instalar essa opção aqui ó do Hello se não tiver aparecendo para você você pode pesquisar aqui em cima por Hello também E aí eu vou clicar aqui para instalar e assim como tudo aqui no WordPress a gente instala um recurso e depois ativa para deixar ele funcionando ele vai instalar aqui e depois eu vou clicar para ativar Prontinho vou fechar essas notificações aqui para limpar o painel E aí e esses outros temas continuaram aqui que que eu vou fazer eu vou entrar em cada um deles e vou clicar aqui do

lado em excluir por que que eu tô fazendo isso para poder deixar o nosso site mais leve sempre que você tiver recursos que você não tiver Utilizando como plugins temas páginas imagens enfim o que você não tiver utilizando vai excluindo para não deixar lixo aqui no seu painel e prejudicando também o desempenho do seu site o mais enxuto que você puder deixar o seu site melhor vai ser o o resultado do seu desempenho Depois de deixar o tema instalado nós vamos vir aqui na nossa abinha de plugins do WordPress e eu vou tirar todos os

plugins que já vem aqui nativos com a hostinger eu vou Selecionar todos esses plugins aqui vou clicar aqui nessa Barrinha e vou clicar em desativar porque primeiro a gente precisa desativar para depois excluir agora vou selecionar aqui de novo e vou clicar em excluir isso porque os plugins que a gente precisar eu vou adicionar aqui manualmente com vocês vou clicar para atualizar aqui e olha olha só já tá tudo limpo agora eu vou clicar aqui em Adicionar novo e nós vamos adicionar o plugin necessário para conseguir criar o Nosso site de forma visual Bia que

plugin que é esse o famigerado elementor tá gente é um plugin excelente que você consegue fazer site de uma forma super simples e rápida igual vocês vão ver aqui então eu vou pesquisar aqui na barrinha por elementor Vamos pesquisar aqui e nós vamos adicionar Justamente esse bonitinho aqui ó com mais de 5 milhões de instalações ativas e muitas e muitas atualizações periodicamente então Ó vou clicar aqui para instalar e depois Eu vou clicar para ativar esse plugin também Prontinho vou clicar aqui para ativar E aí o elementor vai me puxar para um passo a passo

aqui para fazer umas configurações iniciais que eu não vou fazer por esse processo aqui com vocês Pode ficar tranquilo que vai ser mais fácil que isso por isso que eu vou clicar aqui para pular todos esses Passos vou pular aqui Prontinho nós vamos cair numa página que o próprio elemento já cria aqui de demonstração Pra gente e ó só para vocês terem uma ideia do funcionamento geral aqui dessa ferramenta aqui nós temos a pré-visualização do site que a gente tá desenvolvendo é totalmente visual e aqui do lado nós temos vários widgets que vão trazer essas

coisinhas ali pro nosso site os componentes do nosso site nós podemos por exemplo adicionar uma caixa para englobar esses conteúdos né Ou seja você tem vários tipos de estrutura aqui para adicionar por exemplo vou Selecionar esse aqui E aí ó eu vou vir aqui nos widgets nesses seis pontinhos vou adicionar por exemplo um vídeo aqui desse lado e aqui desse outro lado por exemplo eu quero colocar um título Vou colocar aqui um texto Tá vendo que é totalmente visual vou arrastar aqui por exemplo um botão também ó vou arrastar um botão aqui também e aí

o site ele vai tomando forma dessa forma aqui cada elemento seja um contêiner ou então seja aqui esses elementos perceba que sempre Terá a aba aqui de conteúdo para você colocar o conteúdo efetivamente daquele componente né Por exemplo aqui o título nesse caso aqui o texto cada um com um tipo de conteúdo específico depois você também tem a parte de estilização onde você pode trocar fonte cores fundo bordas diversos tipos de estilização diferente para cada tipo de componente e por fim aqui nessa aba de avançado você vai mexer principalmente nessa parte aqui de Margem que

nada mais é do que um Espaçamento externo a esse elemento por exemplo ó se eu colocar aqui uma margem de 100 pixels para todos os lados né não vai aparecer aqui vou colocar aqui no contêiner para ficar mais visual para vocês olha só vou vir aqui no estilo vou colocar uma cor avulsa aqui ó vou colocar uma outra cor aqui vou clicar aqui nesse contêiner vou vir aqui em avançado e vou colocar uma margem que é o espaçamento externo de 100 pixels aqui olha só perceba que ele criou uma margem Para todos os lados aqui

fora desse contêiner certo no entanto Olha só se eu colocar inversamente aqui ó 100 pixels de pading eu vou adicionar um espaçamento interno a essa determinado elemento dependendo da configuração que você for fazer isso vai influenciar e simplesmente você dominando essas etapas aqui ó tanto de layout estilo e essa aba de avançado em cada um desses componentes você consegue criar site de forma 100% personalizadas visual da Forma que você quiser isso aqui foi só um overview geral mesmo de como que funciona essa ferramenta mas bora lá pra parte que nos interessa né eu vou vou

fechar essa sessão aqui vou clicar nesse hamburguinho aqui do lado vou clicar para sair pra gente voltar pro nosso painel V vou selecionar aqui para sair pro painel vou aplicar vou clicar aqui em sair e aí Prontinho ó vou voltar aqui pra minha aba de páginas e eu vou excluir essas páginas também tá que já Vem por padrão então vou excluir tudo aqui mover pra lixeira aplicar e depois aqui em lixo eu vou excluir essas páginas aqui também vamos excluir permanentemente e pronto tá tudo limpo aqui agora vamos criar a nossa página principal do nosso

site que é onde a gente vai efetivamente criar o nosso layout eu vou clicar aqui para adicionar uma nova página vou fechar essa notificação e aqui eu vou colocar por exemplo página principal pode ser home Página inicial Landing page o que você quiser colocar aí vou selecionar essa opção aqui vou clicar em publicar publicar novamente e pronto já estamos com essa página publicada antes da gente começar a criar o nosso layout eu vou precisar também vir aqui no painel do press nós vamos voltar aqui em configurações vamos selecionar essa opção aqui de leitura e eu

vou dizer assim pro WordPress Olha só WordPress quando a pessoa acessar o meu domínio Principal no meu caso aqui agilize financas.com.br eu quero que a pessoa caia nessa página que eu acabei de publicar então eu vou colocar aqui ó vou selecionar essa opção de uma página estática e a minha página inicial vai ser essa página principal que eu acabei de publicar Vou salvar essas alterações e Prontinho agora quando a pessoa entrar aqui no nosso domínio ela vai acessar essa página aqui vamos voltar lá né paraas noss essas páginas agora eu vou Clicar aqui em página

principal vou clicar para editar com elemento a gente vai cair numa tela Igual àquela que a gente estava mexendo antes a primeira coisa que eu vou fazer é clicar aqui em configurações eu vou clicar para esconder esse título aqui né para não ficar esse tanto de letreiro feio aqui na nossa página vou clicar aqui em layout da página e vou selecionar essa opção de elementor Canvas dessa forma nosso site vai virar um Canvas aqui Totalmente em branco mesmo pra gente criar o que a gente quiser aqui dentro vou clicar para atualizar e prontinho já estamos

limpos aqui para começar a terceira e última etapa desse tutorial que é justamente a de criação do layout aqui da nossa página para você sair daqui com o site profissional bonitão para adaptar pro que você quiser então vamos lá bom primeiro para poder facilitar a nossa vida durante a criação aqui do nosso layout eu vou Disponibilizar de presente para você um template montado especialmente para essa aula para você não ter dor de cabeça por aí e para você conseguir acessar esse template é bem simples olha só aqui na descrição desse vídeo você vai ter acesso

a um link onde você vai conseguir acessar os materiais para essa aula Aqui você encontra todas as imagens que nós vamos precisar para poder adaptar esse template assim como também por exemplo ó esse documento aqui mostrando qual que é A paleta de cores que a gente vai utilizar a fonte que a gente vai utilizar também e para você acessar o template é só você clicar nessa Pastinha aqui e clicar para baixar esse template e utilizar da mesma forma que eu vou usar aqui eu já baixei esses materiais aqui no meu computador e aí eu vou

importar esse template aqui agora junto com vocês como é que é que a gente faz isso bem simples primeiro a gente vai clicar nessa pastinha aqui e aí a gente Vai abrir os blocos e páginas prontas do elemento o próprio elemento já disponibiliza vários templates pra gente utilizar É claro que a maioria está aqui ó com essa sinalização de utilizar com o elementor pro Mas você que fez a contratação guiada você pode utilizar em outro momento também essa sua licença para poder explorar essas outras possibilidades se você quiser mas aqui no caso eu vou me

ater a esse modelo que vocês ganharam de Presente eu vou clicar aqui em meus modelos vou clicar aqui do lado para importar o modelo nessa setinha aqui vou selecionar um arquivo e aqui no meu computador eu vou acessar a pastinha que a gente precisa para poder pegar esse template Vou acessar essa pasta aqui e e vou importar esse arquivo json desse template do elemento aqui no caso você eu vou colocar para não mostrar esse aviso novamente vou clicar em continuar e depois eu vou clicar em habilitar e Importar e aí ele vai fazer essa importação

desse arquivo Jon Mas ele já fez a importação aqui e agora é só eu clicar nessa setinha de inserir para inserir esse modelo aqui na nossa página e olha só em um passe de mágica nós temos toda a base do nosso layout aqui para simplesmente adaptar os textos as cores o estilo da fonte se a gente quiser o estilo das cores ali também enfim o que a gente quiser aqui mas já temos toda a nossa base pronta e aí aqui Eu vou passando rapidinho em cada uma dessas sessões e adaptando alguns elementos que são interessantes

de qualquer coisa você conseguir adaptar para outros modelos de página também então ó Primeiro de tudo nós vamos definir aqui a nossa paleta de cores e você consegue acessar essa paleta vindo aqui nos materiais clicando aqui no documento e acessando esse link aqui olha que legal eu uso bastante esse site aqui para poder definir paletas de cores Pros meus projetos você consegue já colocar todos os ext decimais aqui e inclusive copiar Esses códigos para utilizar de uma forma mais facilitada falando em facilidade né para poder facilitar ainda mais a nossa vida para não ter que

ficar copiando e colando aqui em cada elemento Nós já vamos cadastrar toda essa paleta de cores aqui nas nossas cores globais do site para facilitar esse nosso processo para isso nós vamos clicar nesse hamburguinho aqui Em cima eu vou clicar em configurações do site e eu vou clicar em cores globais E aí nessa cor primária aqui eu vou pegar essa cor amarela aqui um pouco mais forte vou pegar aqui vou colar aqui todas as cores tem um hexadecimal que é o código referente àquela cor e tonalidade dela também tá E aí a gente cola esse

hexadecimal aqui nessa cor secundária eu vou pegar esse azul mais escuro vou colocar aqui o texto eu vou deixar esse padrão mesmo se a 7aa e na Cor de assento eu vou colocar esse outro azul aqui para complementar a nossa paleta Beleza vou colocar esse azul um pouco mais claro Além disso também eu vou adicionar aqui nas cores personalizadas a cor branco vou dar um nome aqui para poder ficar mais fácil de reconhecer depois vamos colocar aqui ó eu vou puxar essa Matriz até esse cantinho aqui pegando a cor branca vou pegar também essa cor

aqui de branco gelo colocar aqui só para facilitar já a Nossa vida já que a gente tá cadastrando branco gelo colar aqui vou adicionar mais uma cor e vou pegar esse amarelo mais queimado para poder fazer o efeito de mouse no botão né quando a gente passa o mouse em cima de botão ele vai fazer o efeito de aumentar um pouquinho e também escurecer essa cor para dar realmente a intenção de que a pessoa ali Ela fará alguma ação é um quesito de usabilidade do usuário Então vou colocar aqui ó Amarelo Rover Ok clicar aqui

e Vou clicar em atualizar pronto já já temos a nossa paleta pronta também Além disso para poder facilitar a nossa vida eu já vou vir aqui em Fontes globais e eu vou definir uma nova fonte para esse projeto no caso aqui por padrão esse template ele tá vindo com a fonte que vem por padrão no elementor que é a Roboto mas aqui eu vou substituir por uma outra fonte que inclusive é a queridinha dos web designers porque ela é muito utilizada e ela é tipo Pretinho Básico das fontes sabe não tem como errar com ela

que a mon errar você pode depois quando você você for adaptar para outros modelos optar por outras fontes também mas no caso aqui eu vou me ater a essa uma dica só é bom que você use uma fonte ou duas no máximo primeiro pro seu site não ficar papagaiado né com um monte de fonte diferente e também para não prejudicar o desempenho cada nova fonte que a gente utiliza aqui vai prejudicar um pouquinho mais no Desempenho do seu site Então você ser enxuta em relação a isso já Vai facilitar o seu projeto então eu vou

colocar aqui ó cliquei nessa fonte primária vou procurar aqui por Monte serrar vou fazer ess a mesma coisa aqui nas outras fontes também no secundário aqui essas Fontes são puxadas do Google Fontes tá por isso que tem várias opções aqui vamos colocar aqui Monte serrar beleza e na fonte de acento também E aí dessa forma a gente não vai ter que Ficar se preocupando em trocar essas Fontes a cada novo texto que a gente tiver no nosso site eu vou clicar aqui e Prontinho Olha só vou fechar aqui em cima voltar paraa pré-visualização você pode

ver que algumas coisinhas já mudaram algumas cores a fonte aqui também já ficou um pouquinho mais diferente e aí agora nós vamos adaptar Cada sessão Então vamos começar aqui com essa sessão Inicial que é a sessão onde a gente vai colocar a logo e algumas Informações iniciais ali só para compor esse menuzinho ali da nossa Landing page então aqui pra gente conseguir personalizar esses itens é bem simples lembra daquele funcionamento de cada item que eu mostrei um pouco antes aqui nesse tutorial Olha só quando a gente clica aqui no contêiner a gente tem acesso a

essa aba de layout estilo e avançado e aqui por exemplo em estilo ó se você quiser você pode mudar a cor desse contêiner por exemplo se você Quiser colocar azul ou alguma outra cor você pode mudar tudo aqui eu vou deixar esse branquinho aqui como padrão mesmo mas no caso depois que você seguir esse tutorial se você quiser parar e tentar futricar um pouquinho em cada uma dessas opções para poder ver o que que cada uma delas faz você vai ver que é bem intuitivo o próprio elemento Então já indica aqui o que que as

coisas fazem E aí pode ser um aprendizado legal para você por aí também no caso aqui eu vou Me ater exatamente as coisas que a gente precisa fazer para mudar o geral desse layout para você conseguir fazer essa adaptação depois também eu não vou passar por todos os itens aqui para essa aula não durar 84 anos que aí com certeza não vai ser um site em uma hora né mas aqui ó vamos ver ó aqui eu vou trocar a logo eu ten uma imagem aqui eu vou clicar nessa imagem e eu vou selecionar um novo

arquivo para poder adicionar aqui no site e aí eu vou Clicar aqui em selecionar arquivos e eu vou puxar novamente os materiais aqui da minha pastinha que eu baixei lá do Dri já vou vir aqui em logos eu vou subir essas duas Logos para cá vamos subir essas duas Inclusive eu já vou vir aqui em enviar arquivos e eu já vou subir as outras imagens também ó já vou vir aqui nos materiais vou subir essas duas imagens avulsas só para poder facilitar a nossa vida depois vamos subir aqui as fotinhas de depoimento cada uma dessa

Vai ser encaixada nas sessões abaixo também vamos pegar aqui esses cards e também vou pegar aqui os backgrounds para esse site Pronto já Subimos todas as imagens agora tá mais tranquilo e aí para essa sessão branca eu vou usar uma logo de de aparência um pouco mais escura para poder fazer esse contraste então vou clicar aqui para selecionar e pronto ela já encaixou aqui direitinho inclusive uma dica olha só essas imagens quando você abre aqui a biblioteca do Elemento você vai ver que sempre aqui do ladinho nós temos a dimensão dessa as imagens Então se

depois você quiser substituir por outras imagens por aí eu sugiro fortemente que você utilize a base dessas dimensões para fazer essa adaptação justamente porque dessa forma você vai ter a certeza de que a imagem que você subir aqui nova vai se encaixar direitinho nesse layout assim como eu tô mostrando para vocês é bom você utilizar esse template todo como uma base mesmo Tanto na dimensão das imagens aqui do lado como também na quantidade de textos para não acabar gerando uma quebra de necessária de layout por aí mas beleza ó vamos vir aqui então já trocamos

a nossa logo e aqui do lado é onde você pode colocar por exemplo uma informação de WhatsApp uma pequena informação de endereço por exemplo eu posso colocar aqui quadra 101 asa su por exemplo Brasília Brasília DF né É bom que você não coloque um endereço muito grande Aqui para isso não prejudicar na visualização mobile inclusive ó se a gente clicar aqui em modo responsivo e der uma olhada aqui em em tablet olha só a gente pode ver que esse template já tá todo adaptado para Tablet também e paraa mobile da mesma forma Então você seguindo

esse passo a passo aqui direitinho você vai ter um site 100% responsivel com praticamente esforço nenhum gente muito fácil tá vendo ó por isso que eu falei para não ficar com Endereço muito grande aqui porque senão Pode ser que essa lista vai ficar muito grande para mobile uma coisa legal inclusive o que você pode fazer aqui é aqui nessa parte de link você colocar por exemplo um link aqui da localização que você quer levar a pessoa então você pode em vez de colocar o endereço aqui você pode colocar acesse a localização aqui por exemplo E

aí aqui né eu coloquei um hashtag só para ele identificar como link mas você pode Colocar o link do Google Maps aqui a pessoa clica e é direcionada pro Maps para poder ter esse endereço de uma forma mais fácil Ok acho que eu vou até deixar assim mesmo e aqui no WhatsApp eu vou simplesmente trocar esse aqui por um número fictício ó vou colocar aqui 61 vou trocar esse z0 por 5 aqui no final e aí Prontinho nós temos um número aqui Bia e se em vez de WhatsApp ou localização eu quiser colocar outro elemento

Sem problema você pode Preencher aqui o texto da forma que você quiser pode colocar o link também se for interessante para você da forma que você quiser e para trocar esse ícone você pode clicar aqui nele e abrir essa biblioteca de ícones do elemento que tem bastante opção de coisas para você pesquisar aqui e trocar de acordo com a informação que você tiver colocando por exemplo se você quiser achar aqui um computador né Você pode colocar aqui laptop ou por exemplo não sei se tem Monitor é bom que você procure as palavras em inglês tá

porque aqui tá tudo cadastrado em inglês pode colocar aqui desktop e procurar o que você quiser aqui que fizer mais sentido pro seu projeto mas no caso aqui eu vou deixar esses dois que normalmente são os mais utilizados sempre que você fizer alguma modificação é bom você ir clicando aqui do lado em atualizar para não perder nenhum andamento aqui também da sua criação mas pronto com pouquin Íssimo esforço já finalizamos essa parte aqui Inicial vamos seguir aqui pro banner Inicial desse site massa nessa segunda sessão aqui nós vamos seguir com o mesmo processo primeiro eu

vou clicar aqui nesse contêiner aqui de trás e aí eu vou vir aqui em estilo eu vou trocar a cor desse contêiner eu vou colocar essa cor secundária aqui só assim já ficaria mais legal mas de qualquer maneira Além disso também eu vou colocar uma imagem aqui para esse contêiner eu Vou pegar essa imagem aqui que tá escrito como BG banner Inicial vou colocar essa imagem aqui e para posicionar essa imagem melhor eu vou colocar aqui como posição centro eu vou colocar como anexo fixo que aí ó dessa forma ele faz esse efeito de ficar

preso ali atrás tá vendo que a gente chama de efeito paralax e aqui nesse repetir eu vou colocar para não repetir e nesse tamanho eu vou colocar para cobrir toda a tela dessa forma independente da tela Da pessoa ela vai ficar posicionada direitinho aqui sem problemas porém a gente tem tem um problema de contraste aqui com essa imagem atrás a gente não tá conseguindo ver muito bem tanto esse título o texto né as informações aqui da frente isso se dá a um princípio de design que a gente chama de contraste então pra gente prover uma

boa legibilidade pro nosso usuário é bom que a gente Coloque uma película aqui atrás para gerar esse contraste nas letras Aqui em cima então eu vou vir aqui em sobreposição de fundo vou clicar aqui no background e eu vou colocar essa cor aqui ó essa cor secundária aqui na frente já melhorou um pouquinho né mas eu vou aumentar aqui essa opacidade até mais ou menos deixa eu ver aqui uns 75 ao 75 vou aumentar só mais um pouquinho os 80 aqui para dar uma boa legibilidade tá vendo dessa forma as pessoas conseguem ler aqui agora

de uma forma bem mais confortável e essa imagem ficou Como uma textura atrás disso tudo e inclusive gente ter essa noção de todas essas coisas que eu venho falando até então né de desses princípios por exemplo como contraste hierarquia visual bom uso aqui de imagens né essas questões por exemplo de consistência das fontes da paleta de cores também para não ficar um site todo papagaiado né uma farofa de mistura de coisas aqui né deixando tudo meio feio no resultado final isso tudo é muito importante para Quem deseja efetivamente saber criar sites profissionais é uma coisa

que por exemplo os videozinhos que você encontra aí no YouTube difícilmente vão te falar e para você que inclusive quer masterizar toda essa questão de criação de realmente assim pegar essa habilidade para si para se profissionalizar nessa área saber ser um bom Web Designer profissional que vai entregar um resultado bonito e efetivo pros seus Clientes em vez de ser alguém que fica catando ali tutoria zinhos na internet achando que tá muito bom só com isso não gente para você encontrar todo esse material em um local só nós temos inclusive um curso aqui na escola de

sites que é totalmente focado para você conseguir masterizar completamente essa habilidade o nome deste treinamento É treinamento zpr nele você consegue ter todas as informações que você precisa para dominar essa área efetivamente nós Aqui ensinamos por exemplo todas as principais estruturas que o mercado mais requisita das pessoas como por exemplo criação de páginas de vendas e tudo bem mastigadinho aqui ó através de muitas aulas super detalhadas site institucional também nível pro que a gente chama né porque são todos os conceitos para fazer um site institucional nível profissional blog profissional também também um e-commerce grande o

suficiente com uma estrutura Robusta o suficiente para poder faturar até r$ 50.000 por mês dentre várias outras coisas como checklist de entrega um módulo inteiro só de otimização de sites mesmo para você chegar na fam gerada nota a enfim dicas de seo e inclusive nós temos também uma oficina layouts infinitos que ela tem quase 4 horas aqui justamente para você saber todos os detalhes de aplicação de todos os princípios de design que são 10 princípios que todo Web Designer precisa Saber para conseguir realmente efetivamente fazer sites que o resultado saia bonito toda uma base que

separa realmente o Web Designer né que não liga muito para essas coisas e no fim das contas leva um resultado mais ou menos pros seus clientes e cobra baratinho por isso também e web designers que sabem do que estão fazendo e entregam resultados que são efetivamente satisfatórios pros seus clientes dentre outras coisas também ó um curso completo aqui de de Elementor pro ensinando passo a passo de cada widget do elemento enfim várias coisas aqui para você poder aproveitar e masterizar essa habilidade de uma vez se você tiver interesse em saber sobre esse treinamento completo o

link vai tá aqui na descrição e eu tenho certeza que isso vai poder fazer toda a diferença na sua carreira então clica aí depois e dá uma olhadinha para você realmente subir né esse Degrau na sua carreira aí de web designer mas agora voltando aqui a nossa Página vamos continuar aqui no caso caso você pode se perguntar tá Bia mas como é que eu troco esses conteúdos da página esse Lauren Y que para quem não sabe são textos fictícios só pra gente preencher aquele espaço dentro de um layout antes que a copia esteja pronta para

você conseguir trocar isso aqui é super simples eu vou mostrar nessa sessão aqui mas eu não vou ficar trocando todos os textos para esse tutorial não ficar muito longo mas olha só eu vou clicar Nesse primeiro título aqui você percebe que cada vez que tiver um texto sempre vai ter um campo para você trocar essa informação no caso aqui do título é justamente esse campo Inicial aqui eu separei um título aqui ó já que tenha a ver com esse escritório para poder utilizar eu vou trocar aqui por exemplo por escritório especializado em gestão financeira ágil

acho que não sei se tá escrito errado é tá escrito um pouco errado aqui deixa eu só trocar Especializado aqui em gestão financeira ágil E aí como você pode ver ele ficou mais ou menos no mesmo layout aqui é bom que tanto em relação às imagens como aos textos desse layout você coloque algo com o número parecido de caracteres nem algo muito a mais nem muito a menos para não ficar um layout quebrado Ok você pode utilizar essa estrutura toda como base e aí ó por exemplo se eu vir aqui e digitar mais um monte

de coisa a gente pode ver que já vai começar a ficar meio Estranho Então vamos deixar mais ou menos desse tamanho mesmo deixa eu só escrever aqui de novo que acabou sumindo E aí aqui nesse subtítulo eu vou fazer a mesma coisa E aí eu vou pegar esse outro texto aqui e perceba que para esse widget de texto é um pouquinho diferente olha só nós temos um campo parecido com Word mas basicamente é o mesmo processo peguei o texto e troquei o luren y que tava aqui o legal do widget de texto é que você

tem a possibilidade por exemplo De colocar uma determinada parte como você pode clicar aqui para alternar essa barra de ferramentas e trocar a cor de uma determinada expressão também aqui ó por exemplo eu vou colocar só sucesso financeiro branco para poder trazer o quê A Hierarquia visual para esse termo aqui princípio de web design hein E aí se você quiser estilizar de outras formas também você pode vir aqui na aba de estilo trocar a cor desse texto nativamente por aqui Você pode por exemplo colocar uma tipografia diferente colocar uma outra fonte aumentar ou diminuir o

tamanho desse texto e estilizar aqui da forma que você quiser eu vou me ater oo template Mas você pode depois dar uma fotric adinha aqui para poder brincar com essas opções e aí aqui na parte do botão do mesmo jeito nós temos o campo de preenchimento desse botão por exemplo aqui é o texto dele aqui por exemplo você pode tirar esse Ícone se você não quiser ó por exemplo aqui eu não quero que seja um botão de WhatsApp quero que seja um botão que leve para uma outra questão então você pode tirar esse ícone aqui

ou você pode escolher algum outro tipo de ícone por aqui também aqui você vai ter acesso à biblioteca Inclusive eu vou até voltar pro ícone de WhatsApp aqui para poder ficar desse jeitinho e aqui em estilo eu vou trocar a cor desse botão nós vamos clicar aqui em cor eu vou colocar essa Cor primária e aqui no Rover eu vou colocar essa cor um pouco mais escura para poder fazer esse efeito aqui Opa acabei trocando foi a cor da borda eu vou clicar aqui para limpar e eu vou colocar essa cor aqui em cima Prontinho

ó agora ele já fez esse efeito bem bacana modificamos toda essa sessão e agora eu vou atualizar bora então aqui pra próxima nessa próxima sessão é a mesma coisa tá gente aqui no caso nós temos um título que você pode eu até Coloquei uma sugestão aqui para você só trocar o nome da empresa aqui ou você pode apagar e colocar um TT completamente diferente perceba que aqui nesse Título nós temos essa tag BR ela é opcional mas no caso ela tá aqui para poder fazer uma quebra de linha forçada no elemento Isso aqui é uma

tag HTML bem simples da gente utilizar É só você fazer essa mesma expressão aqui né esse maior menor e o BR dentro dele se eu tirar isso aqui ó perceba que ele tirou A quebra de linha às vezes pra gente forçar uma quebra de linha que fique mais bonito visualmente a gente pode utilizar esse recurso aqui e aí ele faz essa quebra de linha pra gente no caso eu vou deixar aqui desse jeito mesmo acho que talvez eu vou colocar só aqui ó sobre a agilise agilise Finanças Ok para ficar assim e aí aqui em

estilo eu vou trocar esse texto aqui ó para essa cor de assento aqui no sobre nós aqui em cima eu vou colocar uma cor mais escura Esse secundário aqui e nesse divisor que é um frufru bonitinho pra gente colocar aqui no título eu vou colocar aqui essa cor primária Amarelo massa já tá ficando mais bonito a única coisa que eu vou trocar aqui agora nessa parte textual é a cor desse botão Ok então vou colocar aqui o amarelo nessa parte normal e no Rover eu vou colocar esse amarelo Rover para fazer aquele mesmo efeito E

além disso também se você quiser trocar alguma coisa do conteúdo você vai vir Aqui nessa parte você pode trocar o texto Você pode trocar o link da forma que você quiser tá por exemplo você pode colocar o link do WhatsApp aqui e e se você quiser que esse link abra em uma nova guia em vez de abrir na própria janela aqui da pessoa você pode clicar aqui em opções do link e sinalizar aqui para abrir em uma nova janela às vezes é um recurso interessante também eu vou deixar aqui como padrão E aí aqui nessa

parte da imagem eu vou selecionar aqui Esse lapizinho no canto superior vou clicar para escolher uma imagem e eu vou pegar essa primeira imagem avulsa aqui ó essa imagem 01 E aí ela já se encaixou direitinho você pode se basear nessas dimensões também já vamos clicar aqui para atualizar e Prontinho ó já temos mais uma sessão estilizada de uma forma super simples Bora lá agora pros nossos serviços nos nossos serviços é a mesma coisa gente vai começar até a ficar meio repetitivo nessa parte aqui no subtítulo Que fica em cima eu não sei se isso

é certo mas enfim esse conheça os eu vou vir aqui em estilo vou trocar a cor para esse azul mais escuro Bia Por que que você tá mantendo sempre esse mesmo estilo por uma questão de consistência um dos princípios de Web Design mais importantes é sempre bom que quando você for fazer o seu layout você se preocupe em manter a mesma consistência de tamanho os espaçamentos cores para poder deixar o seu layout coeso e visualmente Agradável PR as pessoas também mas ó vamos lá aqui em nossos serviços eu também vou trocar a cor para essa

cor de acento aqui que é o azul um pouco mais claro nesse divisor eu vou colocar uma cor amarela desse jeito aqui já tá ficando bonitinho você pode trocar também ó essas informações aqui se você quiser É e aqui nos cards do serviço que é uma parte muito importante nós vamos clicar em cada um desses cards aqui e aí Aqui você pode colocar o título do Serviço Uma Breve descrição tentando seguir ali essa base de número de caracteres também tá para não ficar quebrado aqui e aí você vai fazer isso com cada card no caso

aqui ó nesse primeiro eu vou clicar para escolher uma imagem vou pegar uma das imagens aqui ó do serviço Beleza vou pegar esse primeiro de consultoria financeira vou só colocar Consultoria financeira aqui embaixo e aí agora eu vou vir aqui em estilo também E Aqui nessa parte de conteúdo eu vou trocar essa cor aqui do título vou deixar esse azul mais escuro vou fazer a mesma coisa com os próximos ó vou vir aqui nesse Card vou trocar para uma outra imagem aqui eu vou pegar essa de contabilidade geral vou colocar esse título aqui contabilidade geral

vou vir aqui em estilo e vou trocar a cor desse título Ok e aqui nesse último Card eu vou escolher a essa última imagem aqui ó essa aqui de Imposto de Renda vou Selecionar Imposto de Renda aqui embaixo ainda e aqui em estilo novamente eu vou vir aqui em conteúdo e eu vou trocar aqui por essa cor Bia Opa acabei trocando da descrição aqui né vou dar um control Z E aí agora eu vou vir aqui em título e vou colocar essa outra cor aqui vou limpar essa cor aqui beleza ó agora já ficou certinho

e se eu quiser estilizar de uma outra forma colocar um outro outro tamanho para essa descrição alguma coisa assim você pode dar uma Mexida em toda essa estilização aqui esse é um item que tem várias opções de estilização até inclusive ó de posicionamento desses elementos aqui você pode dar uma olhada mas no caso aqui eu vou mantendo no padrão Beleza só vou mudar essa cor desse título mesmo E caso você queira colocar mais serviços também é bem simples Olha só você vai clicar com botão direito nesse lapizinho aqui no canto superior vai clicar em duplicar

E aí perceba que ele já criou Um outro Card aqui embaixo você pode duplicar quantas vezes você quiser olha só criei eu fui duplicando aqui e agora eu tenho seis cards eles já estão adaptados para funcionar de forma responsiva então você pode ficar tranquila em relação a isso caso por exemplo Ó você queira cinco cards perceba que ele tá com esse espaçamento aqui no meio você pode clicar nesse contêiner aqui Inicial vir aqui em layout e você pode mudar a justificação De conteúdo desses elementos aqui ó por exemplo ele tá com esse espaçamento em entre

os itens você pode trocar para Centralizado pode colocar no início enfim da forma que você quiser no caso aqui ó eu vou deixar dessa forma mesmo eu vou clicar com o botão direito e excluir esses elementos Vou deixar só esses três mesm vou clicar para atualizar e agora seguindo o baile aqui nós vamos para a parte de depoimentos E aí aqui eu coloquei um depoimento Fictício aqui do fulano da Silva e a fulana da Silva mas no caso você pode fazer esse mesmo processo ó de clicar com o botão direito e duplicar para ter quantos

depoimentos você quiser eu sugiro que você coloque no máximo uns quatro aqui só praa S são não ficar muito vertical mas no caso aqui eu vou deixar esses dois só a título de exemplo aqui eu vou deixar essa cor aqui essas cores um pouquinho diferentes Porque aqui nós estamos tratando de um fundo Escuro e perceba que aqui eu fui fazendo quebra de sessões também com uma pequena divisão de cores tá vendo aqui é branco aqui eu fiz um contraste com aquele branco gelo é legal que você faça contraste com uma cor similar a cor de

base que você utilizar aqui em cima depois eu coloquei uma outra cor da paleta para poder ir fazendo essa quebra mesmo de divisões e contextualizar o usuário de onde ele tá na página E aí aqui ó esse vejo aqui eu vou deixar Branco mesmo vou vir aqui nesse título vou colocar branco também deixar assim e só esse divisor eu vou deixar como Amarelo vamos vir aqui ó vou colocar esse amarelo aqui só esse vejo o qu acho que eu vou vir aqui em estilo vou clicar nesse branco e eu vou diminuir um pouco a opacidade

dele só para ele ter uma hierarquia visual menor do que o título principal que assim já ficou melhor E aí aqui nesses cards de depoimento eu vou clicar em cada um deles eu posso por Exemplo trocar o nome da pessoa trocar aqui esse titulo Zinho que fica embaixo né Essa função da pessoa ou outra informação que você queira colocar aqui é onde você vai efetivamente colocar o depoimento dessa pessoa e aqui eu vou clicar para escolher uma imagem vou pegar aqui a imagem da fulana Primeiro vou trocar o gênero dela aqui ó fulana da Silva

Beleza já temos o primeiro cárdio e aqui você pode colocar uma imagem pequenininha mesmo não precisa Colocar uma imagem muito grande para um espaço pequeno e aqui nesse outro depoimento vou fazer a mesma coisa vou clicar aqui para escolher uma imagem e vou trocar aqui a fotinha do fulano e agora nós já temos dois depoimentos acabou por aí até poderia já tá uma sessão bonita mas eu vou firol um pouquinho a mais eu vou vir aqui nesse banner no no contêiner principal aqui embaixo e aí eu vou clicar aqui em estilo vou clicar em sobreposição

de Fundo e eu vou colocar uma textura de imagem aqui para esse fundo também eu vou clicar nesse Classic aqui e aí eu vou clicar aqui em imagem e vou selecionar esse banner aqui ó esse BG depoimentos Ok vamos selecionar essa imagem aqui e perceba que são imagens simples cruas que você consegue encontrar por exemplo em bancos de imagens gratuitos da internet nada de demais não tem nenhuma manipulação avançada aqui as manipulações a gente Consegue fazer aqui dentro do elementor mesmo como por exemplo mexendo aqui na opacidade ó eu vou vou fazer aquele mesmo processo

eu vou diminuir um pouco essa opacidade Vou colocar aqui mais ou menos em 0.1 nessa opacidade aqui e aí ela vai ficar como se fosse uma textura aqui atrás eu vou colocar aqui como posição centro vou colocar aquele anexo fixo para dar aquele mesmo efeito de paralax vou colocar para não repetir essa imagem e eu também vou colocar um Display cobrir aqui para fazer esse mesmo efeito que a gente fez ali em cima vou clicar para atualizar e Prontinho mais uma sessão pronta nessa próxima uma sessão nós vamos fazer basicamente o mesmo processo que a

gente fez aqui em cima e aí aqui ó eu vou primeiro trocar esse subtítulo em cima aqui na aba de estilo vou trocar a cor dele ó vou colocar essa cor secundário aqui nesse título eu vou colocar essa cor aqui ó de acento e aqui na divisor vou vir aqui em Estilo e eu vou colocar a nossa corzinha amarela e perceba que toda a estrutura dessa página Aqui tem uma sequência lógica de acordo com a solução que você tá oferecendo aqui nós temos umas informações iniciais o banner Inicial com já um botão de CTA maior

para poder chamar mais atenção das pessoas com slogan aqui da empresa depois nós temos um pouco sobre o escritório também aqui embaixo já informando os serviços que você oferece Aqui nós temos depoimentos Como prova social e aqui depois da pessoa consumir todas essas informações nós temos mais um reforço de CTA ou Call to Action né a chamada de ação para que a pessoa depois de todo esse processo de convencimento possa também ter mais uma chance de clicar aqui no botão de Fale Conosco e marcar um agendamento um orçamento seja o que for tudo isso aqui

tem uma estrutura lógica bem profissional que é bastante utilizado nas Landing pages de Alta conversão por aí e que com certeza vai valer bastante a pena de você usar pro seu próprio negócio ou talvez para um portfólio ou para o futuro cliente também aí continuando aqui a estilização eu não vou trocar esses textos aqui mas você pode fazer esse mesmo processo também aqui no botão eu também vou vir aqui em estilo vou trocar essa cor para esse amarelo e aqui no Rover eu também vou colocar aquele amarelo queimado para seguir essa mesma consistência aqui do

Lado eu vou trocar essa imagem também ó eu vou trocar esse tamanho da imagem aqui para full só para pegar ela sempre em tamanho completo aqui com uma definição melhor vou clicar aqui em escolher imagens e vou selecionar essa outra imagem aqui que dá essa impressão de parceria né de negócio fechado beleza coloquei aqui e agora aqui nessa parte do rodapé Já o final da nossa página eu vou fazer esse mesmo processo de utilização vou vir aqui por exemplo Nesse título de links úteis vou clicar aqui em estilo vamos deixar aqui uma corzinha branca aqui

em divisor também eu vou trocar a cor para amarelo e aí aqui embaixo você meio que não precisa fazer nada de Demais todos esses links Aqui eles já estão funcionando de forma já tranquila por exemplo se eu clicar aqui em serviços ele vai me levar para esse ponto da página se eu clicar aqui em depoimentos ele vai me levar para esse ponto da página Bia como é que esse Eleva ador mágico tá funcionando olha só é bem simples isso aqui é o que a gente chama de âncora dentro do elemento E aí aqui ó por

exemplo se eu clicar aqui nesse item de serviços perceba que aqui no link eu coloquei um hash servicos OK tá desse jeito aqui Então como que ele identifica aqui esse link aqui é aquela sessão que eu mostrei se a gente voltar aqui na sessão dos nossos serviços e clicar nesse contêiner aqui e ir até essa parte de avançado aqui nesse ID CSS Eu coloquei exatamente aquela palavra que foi utilizada depois do hashtag esse servicos aqui então Sempre que você quiser criar uma Âncora você vai colocar uma palavra aqui para esse id e lá no link

Onde você quer fazer efetivamente essa Ancora acontecer você vai colocar um hashtag e essa palavra que você delimitou ali naquele ID E aí dessa forma ó ele faz essa ancoragem até essa sessão que você identificou beleza e aí Aqui nós temos as principais sessões Você pode clicar aqui para duplicar adicionar alguma outra coisa também também se você quiser ou clicar nesse X para excluir um determinado item e aqui no final eu coloquei um item de política de privacidade que eu não vou ensinar nesse tutorial aqui a como criar Mas se você quiser aprender a como

adequar o seu site a lgpd que inclusive é indispensável para qualquer tipo de site que você fizer é só você procurar por lgpd lá no nosso canal que você vai Encontrar tutoriais completos sobre isso também no caso aqui eu já criei o item para poder facilitar aqui a sua vida e aí aqui nessa outra lista aqui eu vou fazer esse mesmo processo vou clicar aqui em contato vou vir aqui em estilo Vou colocar aqui a cor branca Vamos mudar a cor desse divisor aqui do lado e aqui nesses itens você pode trocar essas informações para

que você quiser você pode colocar o seu telefone pode trocar aqui o seu WhatsApp pode colocar links Também assim como eu mostrei lá naquela primeira sessão trocar o contato e aqui embaixo é claro colocar um novo endereço também ou sinalizar para as pessoas clicarem para poder acessar a localização do estabelecimento bem simples e aí e aqui nesse meio eu vou clicar nessa imagenzinha aqui do centro e vou colocar uma outra logo então vou colocar aqui uma logo de cor clara para poder fazer contraste com fundo escuro vou colocar ela aqui ó já encaixou Bonitinho e

aqui embaixo nós temos os botões de rede social dessa empresa por exemplo aqui a gente colocou WhatsApp Instagram e Facebook se a gente clicar em cada um desses itens você pode colocar o link aqui dessa rede social o link aqui do Instagram do Facebook se você quiser alguma outra rede social você pode clicar aqui para clicar um desses itens clicar nesse novo item trocar esse ícone também por exemplo se você quiser colocar YouTube vamos Procurar aqui YouTube vou selecionar aqui e aqui você vai colocar o link dessa rede social também bem simples para excluir algum

item É só você clicar nesse x e tá tudo certo também AB aí se eu quiser trocar essas cores aqui novamente você vai vir aqui em estilo vai trocar aqui a cor primária e depois você vai trocar aqui a cor por exemplo ao passar ao Mouse se você tiver colocado algum efeito feito também eu vou deixar aqui como padrão mesmo vou Clicar para atualizar e por fim nós temos só esse último rodap pezinho aqui embaixo que é informação de copyright e CNPJ da empresa Olha só eu vou clicar no Contender aqui embaixo vou trocar essa

cor aqui vou colocar por exemplo essa cor de azul um pouco mais claro para poder fazer sentido com a nossa paleta vou clicar nesse texto e aqui você pode por exemplo só trocar o nome da empresa o ano vigente é claro e também aqui ó o CNPJ dessa empresa para poder trazer uma Seriedade nessa página também né uma credibilidade caso as pessoas queiram pesquisar sobre essa empresa depois eu vou clicar aqui para atualizar e Prontinho Olha só se a gente olhar vou até clicar aqui para ver essas alterações aqui do lado para ver a página

real mesmo E se a gente for ver a gente já tem o nosso site Prontinho chuchu com bastante facilidade né bem rápido só trocando aqui essas informações e é o que eu falei gente Isso aqui Vocês conseguem trocar pro que vocês quiserem Ah eu quero fazer um site de cafeteria troca a paleta de cores troca a fonte se precisar troca as imagens os textos da mesma forma que a gente fez aqui e você tem um outro site completamente diferente seguindo essa mesma estrutura profissional sem precisar se preocupar com nada com qualquer nicho que você precisar

E é claro se você quiser aprender a fazer outros tipos de estrutura sinta-se livre Também para poder acessar o nosso treinamento se você tiver esse interesse ver lá todas as estruturas que você precisa masterizar para realmente entrar com como profissional nesse mercado ou então acompanhe também outros tutoriais gratuitos aqui nossos no YouTube tem várias páginas sendo criadas do absoluto Zero Onde você vai montar as sessões passo a passo com a gente tem muito material para você estudar e aqui eu te dei uma mão na roda como um pontapé Inicial do seu primeiro site profissional e

olha só que legal se eu clicar aqui com o botão direito e ativar uma extensão aqui que eu uso bastante o nome dessa extensão é mobile Simulator tá é só você procurar aqui ó mobile Simulator aqui no Google E aí você vai encontrar essa extensão aqui que faz Exatamente esse efeito que eu mostrei para vocês mas ó voltando aqui ó você já tem um site totalmente responsivo também para mobile beleza E se a gente clicar Aqui nos dispositivos e ver aqui em iPad você tem também uma visualização bem legal para esse dispositivo fazendo um site

100% responsivo que já é um grande diferencial inclusive para você mostrar isso pras pessoas depois eu fico muito muito muito orgulhosa de você ter chegado até aqui porque isso significa que você já tem o seu site profissional completo seja para usar como portfólio vender para um cliente para anunciar seu serviços ou o que você quiser então meus Parabéns é claro se você curtiu esse conteúdo não deixa de dar aquele likezinho para poder apoiar aqui o canal né comentar também o que que você achou deixar novas sugestões de vídeos também ou o que você quiser aí

embaixo nos comentários a gente vai ficar muito feliz de ver esse feedback de vocês e além disso isso também vai fazer com que o YouTube entenda que isso aqui que deve ser distribuído para mais pessoas que também precisam ser ajudadas com esse Tutorial e ao mesmo tempo né claro contribui para que a gente continue trazendo um conteúdo gratuito de qualidade aqui no canal para vocês porém antes de terminar esse tutorial eu quero só dar um toque a mais pra galera que é esperta e interessada em evoluir nesse universo de web design e quer se tornar

um profissional completo nessa área se você aí deseja dar um próximo passo na sua carreira e verdadeiramente aprender a criar site Impressionant de uma maneira pelo menos 10 vezes mais rápido do que a forma tradicional então eu te convido a clicar no link que estará aqui na descrição desse vídeo e conhecer o nosso treinamento zpro como eu falei anteriormente esse é o nosso treinamento Completão sobre criação de sites que com certeza poderá finalmente te levar ao patamar de se tornar um desenvolvedor de sites profissional e se destaca nesse mercado Inclusive é o mesmo treinamento Utilizado

também pela própria equipe interna aqui de web designers da escola de site então para você aí que é esperto 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 tchau tchau