Como Criar um SITE Completo e Profissional com WordPress Elementor Grátis

Nesse vídeo eu vou te ensinar a como criar um site completo e profissional com várias páginas E para isso a gente vai utilizar ferramentas bem acessíveis de usar que são WordPress e o elementor e o legal é que a gente não vai utilizar nada de programação e este vai ser um passo a passo de fácil entendimento para qualquer pessoa e é sério eu tenho certeza que nem curso pago ensina tudo que eu vou te ensinar nessa única aula Aqui e de graça fala pessoal tudo bem Rodrigo aqui do canal aprendendo site Seja muito bem bem

vindo para mais um vídeo e antes da gente começar aqui com o nosso vídeo Eu só peço que você não esqueça de deixar o like e também de se inscrever no canal se você tem interesse em aprender tudo sobre criação de sites tudo sobre WordPress elemento de uma forma bem simples e descomplicada beleza vamos lá [Música] Então beleza pessoal vamos lá então vamos partir aí para a criação aí para todo o passo a passo de como criar um site completo com várias páginas eu tô bastante empolgado para essa aula e eu vou passar para você

aí bastante informação mesmo tá mas fica tranquilo que vai ser tudo bem simples aí de entender tá olha só antes da gente iniciar aqui enfim colocar mão da massa aí no nosso site né enfim começar a fazer o site de fato eu só tenho algumas Observações bem importantes aqui e eu peço que você preste atenção nessas observações e enfim hipótese alguma você pule essa parte aqui das observações porque é muito importante tá enfim através dessas observações aqui você vai entender o certo aí o que eu vou te ensinar como que eu vou te ensinar o

que você vai aprender beleza sem Muita enrolação Então a nossa primeira observação aqui é que você não precisa ter experiência para seguir este Tutorial não vamos utilizar nada de programação será tudo de fácil acesso e entendimento tá então se você é aquele tipo de pessoa que nunca criou um site na vida enfim não sabe nem o que é domínio O que é hospedagem O que é WordPress O que é elementor pode ficar bem tranquilo porque enfim essa aula aqui vai ser praticamente um curso né eu vou te ensinar tudo do zero desde o absoluto zero

tá vou te ensinar como criar o site inteiro vou te ensinar como Pegar as imagens ali para colocar no seu site a como dimensionar as imagens do tamanho correto a como pegar os textos Enfim tudo tudo tudo tá não tem nada acho que eu não vou te ensinar nessa aula beleza vamos paraa nossa segunda observação aqui ó então todo o conteúdo do site que vamos criar É fictício e esse site serve para qualquer nicho de modo que você vai poder criar o seu site exatamente do seu jeito tá então o que que acontece aqui no

meu caso eu vou Criar um site aqui mais puxado aí pro lado de negócios enfim pro lado mais Empresarial né porém você pode criar um site para qualquer nicho né ah sei lá você quer criar um site para advogado você vai conseguir você quer criar um site para dentista enfim um site para qualquer profissão qualquer nicho qualquer tipo de negócio você vai conseguir seguindo esse meu passo a passo tá então aqui no meu computador ó eu separei aqui nessa pastinha algumas Imagens que eu vou utilizar aí no meu site né então aqui você pode ver

que eu peguei algumas imagens aí mais puxado para esse lado Business né esse lado aí de negócios e tal de consultoria empresarial e tal né Mas você vai conseguir criar aí do seu jeito né você vai separar suas imagens aí também no decorrer da aula ali como eu falei eu vou ensinar para você aí como que você faz para colocar as imagens do tamanho correto a Como configurar as imagens Bonitinho ali no seu site tá então vai ser tudo bem Tranquilo eu recomendo que você Separe as suas imagens as imagens aqui ó No meu caso

eu peguei aqui no freepick.com tá o freepick.com se você não conhece ela é um banco de imagens aqui né F um site que você consegue baixar várias imagens ó Então posso vir aqui por exemplo ó colocar fotos free que é grátis né eu vou pesquisar aqui por Empresarial ó vamos clicar aqui em buscar e ó ele me Dá vários resultados aqui ó eu posso pegar qualquer uma dessas imagens ó vamos supor que eu queira essa imagem aqui eu venho aqui em download e eu faço o download da imagem aí pro meu computador tá então você

pode estar vindo aqui claro que o freck é só uma alternativa entre tantas que existem né então você pode até ali no Google e pesquisar por banco de imagens que vai aparecer uma infinidade de banco de imagens tá que você consegue tá Utilizando aí enfim para tá pegando as imagens ou até mesmo você pode gerar as imagens aí com inteligência artificial hoje em dia tem uma enfim vários sites aí né que gera imagens com inteligência artificial mais para frente eu vou mostrar também como que você pode fazer isso se você quiser tá E também claro

se você tiver suas imagens aí se você contratou um fotógrafo para fazer as imagens da sua empresa do seu negócio você vai conseguir utilizar também Beleza então quero deixar bem claro que essa parte aí das imagens né vai ficar a critério de cada um vai variar muito de nicho para nicho beleza Ah você vai criar um site para sei lá Confeitaria né Obviamente você vai colocar imagens de bolo de doces né e assim por diante aí nicho por nicho beleza os textos aqui ó eu vou vi nesse site aqui ó Lauren y e esse aqui

é um site que ele disponibiliza aqui textos fictícios né basicamente esses textos aqui são os Textos aí que os designers né enfim o pessoal que trabalha nessa área utiliza para preencher espaços tá então eu não vou utilizar textos reais no site eu vou utilizar esses textos fictícios aqui só para ocupar os espaços e daí claro que no seu site você vai poder digitar os seus textos tá ou até mesmo se fizer sentido para você você pode vir aqui no no chat GPT né e enfim pedir para ele gerar com inteligência artificial ou até lá dentro

lá do nosso WordPress nosso Elementor você vai conseguir aí gerar os textos com inteligência artificial vou mostrar tudo nessa aula aqui beleza então resumindo o site Ele É fictício e você pode criar da maneira que você quiser você vai aprender a criar o site Beleza você pode só copiar aqui a estrutura que eu tô ensinando e fazer do seu jeito beleza ter Tera observação aqui Então siga o passo a passo exatamente igual eu mostro E se for necessário assista a aula mais de uma Vez tá isso aqui é muito importante principalmente enfim para você que

é iniciante para você que tá começando agora e talvez tem medo né de assistir uma aula aí de sei lá Du 3 horas de duração e dá algo errado então o que que eu recomendo Veja a aula uma vez com calma até o final para ver tudo que eu vou fazer para ver como que funciona tá como eu falei ali vai ser tudo de fácil Esso eu não vou mostrar para você nada difícil Nada de outro mundo tá vai ser Bem de boa essa aula então você pode tá assistindo aí e daí você assiste a

primeira vez para você aprender a como que funciona né para você se familiarizar com as ferramentas ali e depois você pode assistir uma segunda vez e daí sim ir pausando e fazendo ali igual eu mostro beleza Nossa quarta observação aqui então o que é domínio hospedagem WordPress e elementor tá esse aqui são os termos aqui que a gente vai utilizar Aí durante a nossa aula algumas pessoas sabem o que é a maioria das pessoas não sab o que querem dizer esses termos aqui mas basicamente domínio ele vai ser o seu endereço online tá no meu

caso aqui ó eu tenho o meu site ó aprendendos sites.com então aprendendos sites.com é o meu domínio tá E você também vai ter um domínio eu vou explicar para você como que você vai ter um domínio profissional aí o nome da sua empresa.com ou o nome da sua Empresa.com.br eu vou te ensinar como fazer isso e melhor de uma forma gratuita eu vou te ensinar como resgatar um domínio aí de uma forma gratuita tá a gente tem também a hospedagem que que é hospedagem quando você acessa um site seja qualquer site aí que tem na

internet esse site obviamente Ele sempre vai ter vídeos ele vai ter textos ele vai ter fotos enfim ele vai ter conteúdo né esse conteúdo ele fica arma enado em algum local da internet né E aí que Entra hospedagem tá então por exemplo aqui do meu site ó você pode ver ó aqui tem uma imagem tem texto tem os botões né o domínio é aprendendos sites.com quando você acessa você vai dar de cara com conteúdo esse conteúdo aqui ele tá armazenado em uma hospedagem tá então na sequência eu vou ensinar aí para você como que você

contrata domínio e hospedagem tá de uma forma bem fácil e rápida a pedagem aqui ela vai ter um custo porém eu já adianto para você que É um custo aí baixíssimo um custo que você pode pagar anualmente ou mensal e é um custo que cabe no bolso de todo mundo beleza WordPress o que que é WordPress então WordPress basicamente ela é uma plataforma de criação de sites então só para você ter uma ideia hoje aí calcula-se que em média 43% de todos os sites que possuem na internet aliás todos os sites que existem na internet

né esses sites eles são feitos em WordPress tá então a gente Vai contratar um domínio configurar esse domínio aqui junto com a hospedagem dentro dessa hospedagem a gente vai instalar WordPress né que é a plataforma de criação de sites e e WordPress ele é muito legal porque a gente não precisa utilizar nada de programação para criar o nosso site e dentro do WordPress a gente vai instalar ainda o elementor elementor ele é um page builder ou seja um construtor de sites que ele vai facilitar mais ainda a nossa vida pra Gente criar aí o nosso

site Beleza então essa aqui é a diferença entre domínio hospedagem WordPress e elemento detalhe que todos esses esse enfim essas ferramentas aqui esses termos né o domínio a gente vai conseguir grátis o WordPress também ele vai ser totalmente grátis o elementor também totalmente grátis e a hospedagem vai ter um custo mínimo beleza esse aqui é o mínimo de custo aí que você vai ter para conseguir criar qualquer site Beleza então acho Que as observações seriam basicamente essas se você ti tiver qualquer dúvida também durante o passo a passo durante o tutorial fique à vontade aí

para deixar nos comentários tá que eu sempre procuro responder todo mundo beleza então sem Muita enrolação agora na sequência eu já vou te ensinar a como contratar aqui ó domínio hospedagem Word PR elementor tudo junto e com poucos cliques vamos lá então beleza e nesse momento então eu peço que você acesse o primeiro link da Descrição e você vai cair nesse site aqui E esse aqui ele é o site da Host gator né E você lembra que eu acabei de falar ali sobre domínio hospedagem WordPress elementor e aqui através da Host gator Então você consegue

ter acesso a tudo isso de uma maneira simples e descomplicada tá se você acessar aí o primeiro link da descrição você vai ver que vai est aqui no momento da gravação desse vídeo 70% de desconto tá E esse desconto aqui ele é exclusivo Através aí do meu link da hostgator tá então você acessa através do meu link e você consegue 70% de desconto na contratação aí de hospedagem para você criar o seu site tranquilamente Beleza você vai vir mais para baixo aqui e aqui a gente vai ver que tem alguns planos ó então tem o

plano start o plano p o plano m e o plano turbo tá você pode estar fazendo um comparativo aqui né enfim das informações Ó mas basicamente o que que acontece aqui ó a gente tem o Plano start que é para um domínio ou seja nome da sua empresa.com isso é um domínio tá a gente tem o plano p que também é para um domínio aí a gente tem o plano M que ele serve aqui para mais domínios então se você tem interesse de sei lá no futuro você criar mais um site eu já recomendo que

você contrate aqui o plano m né então aqui você pode ter nome da sua empresa.com aí lojavirtual.com blog tal.com enfim você consegue armazenar vários sites vários Domínios aqui dentro desse plano beleza e a gente tem também o plano Turbo que ele tem a mesma lógica aqui do plano m a gente consegue hospedar vários sites e domínios porém ele tem um desempenho um pouco melhor então ele é recomendado Aí talvez para você que vai fazer um site e esse site ele vai receber um grande volume de visitas mensais enfim talvez você vai anunciar ele aí no

no Instagram e nas redes sociais ele vai receber bastante visitas tá então é indicado Você já contratar o plano turbo e cara é um investimento que vale super a pena tá ó aqui nesse caso eu vou pegar o plano P tá começar pelo plano P porque o plano start aqui você vai ganhar um ano de domínio grátis só que é o domínio com a extensão ponto online né E aqui no plano P você vai ganhar um ano de domínio grátis e a extensão do domínio é pcom né então a extensão pcom ela é extensão mais

usada do mundo tá então eu vou começar aqui com o plano P antes de eu Clicar aqui ó eu vou vir mais para baixo aqui e aqui também você pode estar acessando aí enfim esse site aí que eu tá na descrição né o site deles aí e conferir todas as informações aqui enfim tirar mais dúvidas né se você tiver Ó tem tudo bem explicadinho Tem alguns depoimentos de clientes indo mais para baixo aqui Aqui tem mais uma vez um comparativo ó enfim da hostgator pros outros concorrentes Então vale muito a pena e uma das coisas

que eu mais gosto Aqui da hostgator é a questão do suporte tá porque o que que acontece quando você vai criar um site principalmente se você não tem experiência né Você às vezes pode ficar meio assustado meio desamparado porque ai se algo dá errado se eu não conseguir nesse caso a hostgator aqui eles têm um suporte que funciona 24 horas por dia 7 dias por semana então independente do o horário né que você precisar de suporte enfim seja por dar algum erro alguma coisa Inesperada ou algo que você não saiba fazer você entra ali no

suporte deles e é um chatz online tá pessoal não é mandar e-mail e esperar dois trê dias para responder não é um chatz inho online que eles têm ali e você entra ali naquele chatz inho online e são pessoas reais que estão ali naquele chatz inho online para resolver o seu problema então isso é simplesmente fantástico Beleza você pode estar conferindo aqui então todo o site deles nesse caso eu Vou vir aqui em cima e eu vou fazer a contratação aqui do plano P mas aí Claro você contrata aqui o que fizer sentido para você

o que se adaptar tá aí o seu bolso enfim a sua necessidade tá vou clicar aqui no plano P começar essa próxima etapa aqui ó é bem autoexplicativa né Então você vai escolher o ciclo de pagamento Eu recomendo que você escolha um ano ou TRS anos tá porque um ano porque aqui um ano Ó você vai ganhar um ano também de Domínio grátis aqui nos se meses você não ganha domínio grátis e nem num mês então aí você teria que contratar o domínio separado beleza nesse caso aqui eu já quero mostrar para você a solução

completa para você fazer tudo junto de forma simples tá Então nesse caso se quer 1 ano deixa aqui se quer 3 anos né enfim você tem uma empresa aí tem um projeto mais a longo prazo pode estar contratando sem medo aqui os TR anos tá nesse caso aqui ó vou continuar para o Carrinho e aqui agora a gente vai escolher então o nosso domínio né você vai digitar aí o domínio que você quer no caso aqui ó vou colocar só como exemplo ó Rodrigo aprendendo sites e aqui eu vou aqui eu vou escolher a extensão

ó P com com.br ponl P site nesse caso eu vou deixar pon com porque ela é a extensão mais usada no mundo né então ficaria aqui ó Rodrigo aprendendos sites.com el você vai fazer o mesmo você vai colocar Aí o nome da sua empresa o seu nome e vai selecionar aqui o que você quiser tá detalhe que o domínio depois que você registra ele você não consegue mais alterar ele tá aí se você quiser mudar você vai ter que registrar outro domínio tá então muito cuidado para você não errar aqui nessa parte aí você clica

aqui nessa lupinha e aqui vai aparecer Então se o seu domínio aí ele está disponível para registro afinal não poem também resistir aí dois domínios com o Mesmo nome tá dois domínios exatamente iguais não poem então aqui ó esse domínio ele estaria disponível para mim registrar e o valor dele aqui é grátis tá então vou clicar aqui e adicionar domínio vou vir mais para abaixo aqui a gente tem essa proteção de domínio que você pode deixar ativada ou desativada você pode estar lendo aqui ó o que é o ID Protect Se fizer sentido para você

você deixa ativado senão desativado nesse caso aqui vou deixar desativado Mesmo vindo mais para baixo aqui ó a gente vai ter então uma descrição do nosso plano né o nosso plano ele vai incluir um site contas de e-mail ilimitadas Então você vai conseguir criar vários e-mails aí por exemplo ã contato @nome da su empresa.com suporte @nome supresa.com e assim por diante esses meios profissionais é que passam bem mais credibilidade a gente tem aqui o certificado SSL que nada mais é do que o Seu site aí seguro né Isso é excelente né até para para ele

ranquear melhor no Google né É fundamental aí que todo o site tenha o certificado de segurança aqui você vai ter acesso ao criador de sites da hostgator ao cpel ao f FTP ilimitado instalador de WordPress e mais Outras aplicações Beleza Aqui tá o ciclo de pagamento aqui mais embaixo ó se você quiser adicionar mais opções aqui de e-mail né mais gigas de e-mail você pode estar adicionando e Aqui tem mais alguns adicionais também que você pode estar conferindo e claro se fizer sentido pro seu negócio pro seu projeto Você pode adicionar aqui marcar eles beleza

ó vou clicar aqui em continuar e nessa próxima etapa aqui então você vai criar uma conta na hostgator você vai digitar seu e-mail você vai confirmar seu e-mail vai criar uma senha forte e vai concordar aqui com os termos de renovação termo de serviço política de cancelamento e tal enfim Esses serviços aí e vai clicar aqui em criar conta Beleza o serviço aqui vai pedir para você mais algumas informações como ã telefone seu CP enfim o CNPJ ali ou seu CPF aí você preenche tá E nessa etapa três aqui onde eu tô com o meu

mouse aí é só você fazer o pagamento você pode escolher ali se você quer pagar via cartão boleto pix PayPal Eu recomendo você pagar via pix ou cartão de crédito porque dessa maneira libera na hora PayPal também libera na hora tá Só boleto pode demorar aí de 2 a trê dias para compensar o pagamento e para liberar beleza feito isso você finalizando aí o pagamento aí todo enfim todo o processo isso aqui é bem rapidinho tá pessoal tô mostrando aqui detalhado mas para você fazer na prática aí vai ser coisa de 5 minutos nem isso

vai aparecer aqui a confirmação então e você vai estar recebendo vários e-mails aí na sua caixa de entrada dando as boas vindas a hostgator e dizendo que deu Tudo certo e beleza próximo passo Então você vai acessar o site principal aqui da hostgator ó hostgator.com.br e você pode ver que através desse site principal deles aqui ó tá com até 60% de desconto tá e através lá do meu link estava 70% de desconto então independente da época que você estiver vendo esse vídeo você sempre vai garantir o máximo de desconto possível através do meu link tá

e aqui você vai vir aqui ó no portal do cliente Vai clicar aqui em acessar e daí você tendo aí enfim já criado a sua conta né na hostgator você vai ter um e-mail e uma senha obviamente e aqui então a gente tem o painel do cliente né o portal do cliente aliás aqui da hostgator pode ver que aqui tem esse chatz inho ó então aqui através desse chatz inho você pode selecionar aqui a sua hospedagem e continuar com o chat aqui para você falar ao vivo aí enfim em tempo real com algum atendente Aqui

do time de suporte da hostgator para Eles tirarem aí as suas dúvidas em tempo real tá você pode ver que aqui eu tenho um domínio ó canal aprendendos sites.com aqui ele é um domínio de testes aqui que eu sempre faço as aulas aqui no canal e eu vou instalar WordPress nesse domínio então E como que você vai fazer isso você vai vir aqui em sites Ó aqui tá o domínio ó canal aprendend sites.com tá você vai vir aqui em cpel tá então vai ter o seu domínio Aqui e do ladinho vai ter o cpel aí

você clica aqui no cpanel e aqui vai est abrindo o cpanel então ã você pode ver aqui que tem bastante informações e tal mas não precisa você se assustar com isso você se preocupar com isso o CPN basicamente ele é um software de gestão de hospedagem Tá eu vou vir mais embaixo aqui e você vai procurar essa opção aqui ó WordPress tá você vai localizar aí o seu CPN WordPress tá embaixo Aqui WordPress é a ferramenta então que a Gente vai instalar aqui na nossa hospedagem pra gente criar o nosso site você pode ver que

aqui tem várias outras ferramentas né mas como eu falei lá no início WordPress é a mais utilizada no mundo e a que a gente vai usar Então você vai clicar no WordPress aqui ó você vai clicar em instale agora e aqui então você vai selecionar o seu domínio ó tá ionado aqui o meu domínio nesse caso aqui se você tiver mais domínios aí na sua hospedagem né você tiver contratado Mais domínios que inclusive você consegue fazer por aqui ó você vem aqui em domínios e contratar novo domínio você eu consegue contratar aqui fazer Essa gestão

Ó daí aqui quando você seleciona vai aparecer todos os domínios aí que você tem Beleza então nesse caso eu tenho um domínio vai aparecer um domínio e vai aparecer o seu aqui a gente tem assim ó http aí tem com o www https e tem o h ttps com o www tá Eu recomendo que você Deixe selecionado essa opção aqui https e aqui tem um detalhe que se você acabou de registrar aí o seu domínio há poucos minutos e você deixar selecionada essa opção provavelmente vai aparecer uma mensagenzinha aqui de erro né dizendo ã Um

certificado SSL confiável não foi encontrado tá Porém você pode seguir normalmente aqui com a instalação beleza porque esse é o é o período aí que o domínio demora para Agar na internet tá então quando você registra Um domínio ali nos primeiros minutos ou até mesmo nas primeiras horas ele fica propagando na internet então assim não fica 100% já online funcionando tudo certinho Tá isso é normal em qualquer hospedagem beleza aqui em diretório a gente deixa vazio porém se você quiser enfim instalar WordPress em um diretório você pode estar preenchendo vamos assim diretório Vou colocar aqui

por exemplo loja assim ó daí o meu site ficaria canal aprendendo site P com bar Loja eu estaria WordPress instalaria WordPress aqui nesse caso não é o que a gente quer a gente quer instalar WordPress aqui ó canal aprend sites.com beleza e aqui a versão do WordPress você sempre vai deixar selecionado a última versão aqui em configurações do site ó você vai colocar um nome aqui para o seu site então aqui ó posso colocar meu site empresarial aqui ó só para ilustrar mesmo tá aqui é a descrição ã aprendendo sites e você coloca aí a

Sua descrição e aqui conta do administrador essa parte aqui é muito importante tá então você vai escolher um usuário do administrador e uma senha e um e-mail tá que enfim que quer dizer esse usuário essa senha esse e-mail vai ser através desses dados aqui que você vai acessar o WordPress tá então aqui ó usuário administrador posso colocar por exemplo Rodrigo tá ou qualquer outro nome aqui a senha aqui ó eu vou esconder essa aqui eu vou gerar uma nova senha Você pode então colocar a senha eu recomendo que você coloque uma senha que você vá

lembrar né Talvez uma senha que você utilize aí no seu dia a dia enfim uma senha que você não vai esquecer e aqui e-mail do administrador Eu recomendo que você coloque algum e-mail seu seja do Gmail do Outlook enfim algum e-mail que você utilize também no seu dia a dia algo de fácil acesso para qualquer coisa enfim se você esquecer senha você consegue Recuperar através do e-mail beleza vindo mais para baixo aqui a gente tem o idioma Então aqui tem vários idiomas eu vou deixar português Brasil aqui tava português de Portugal tá vou deixar BR

aqui mas aí você pode escolher enfim você quer deixar inglês ou o idioma que você prefere trabalhar beleza essa outra parte aqui dos plugins eu vou deixar tudo desmarcado aqui porque eu quero configurar junto com você lá no painel do WordPress eu vou vir mais embaixo Aqui e eu vou clicar em instalar e agora a gente vai aguardar aqui um pouquinho o processo de instalação Eu recomendo que você não saia dessa página ó instalou rapidinho aqui tá Então como que funciona você vai ter aqui o link do seu site né E aqui ó acesso ao

painel da ferramenta Olha só você vai clicar aqui e nesse momento Então vai carregar aqui o painel do WordPress tá detalhe que um um segundo possível erro que pode acontecer se você acabou de registrar o Domínio pode ser que você faça esse processo aqui e dê uma mensagenzinha de erro tá isso quer dizer que o seu domínio ele ainda está propagando então caso isso aconteça com você você deixa essa página aberta aqui e tenta novamente Em alguns instantes tá enfim alguns minutos aí porque ele tende a ficar online depois tá E esse er é perfeitamente

normal beleza aí aqui ó deixa eu aproximar mais aqui para mim conseguir explicar para você como que Funciona para você acessar o seu painel do Word PR ó Então aqui tem o https T canal aprend S sites.com vai ter o seu domínio aí pon com também ou pcom.br seguido desse sufixo aqui ó barra WP tracinho admin Então você sempre vai acessar WordPress seguido dessa condição no meu caso aqui ó eu vou pegar isso aqui ó eu vou copiar Eu recomendo que você Copie também essa URL aqui e cole aí no seu Bloco de Notas enfim

anota em algum lugar para você ter fácil acesso Depois para você não perder ó vou vir aqui numa guia anônima vou vir aqui vou colar e vou dar um enter ó quando você fizer isso aí vai aparecer isso aqui ó para você colocar o seu nome do usuário então eu colocaria o meu nome do usuário que no caso é Rodrigo e a senha que eu gerei lá e acessaria o WordPress tá e você repete esse mesmo processo para você acessar aí o seu WordPress nesse caso aqui ó quando eu clico ele já abre direto WordPress

porque eu já tô aqui Dentro da ferramenta enfim dentro da hospedagem então ele já tem esse direcionamento automático Bele outra maneira também de você acessar WordPress vou voltar aqui no cpel ó você vem aqui no cpel né aqui é portal do cliente acessa aqui os sites vem no cpel ó vai abrir o panel você vem até em WordPress nesse momento ó vai aparecer que você tem uma instalação do WordPress ó daí você clica aqui no izinho do WordPress e aqui você clica em fazer Login E você vai fazer o login automático no WordPress tá Então

essas são as maneiras de você fazer login aí no seu WordPress e agora a gente tem então WordPress instalado aqui no nosso domínio a gente tem uma hospedagem e tudo funcionando e agora assim que a gente vai partir para a criação aqui do nosso site a gente vai fazer a parte mais mão na massa tá vamos lá então primeira coisa então que a gente vai fazer aqui né você pode ver Que aqui tem o painelzinho dor de pra Então a gente tem aqui o painel posts mídia páginas comentários aparência plugins usuários ferramentas configurações tá primeira

coisa que eu vou fazer eu vou vir aqui em aparência temas e aqui você vai ver que já vai vir com alguns temas aqui pré-instalados tá e o que que é o tema o tema basicamente ele é a aparência do site nesse caso aqui ó eu vou vir aqui em visitar site e Ó o meu site nesse momento ele tá assim Ó tá um site fictício aqui né só para mostrar mesmo eu vou voltar porque eu tô usando esse tema aqui ó 2024 agora se eu quiser mudar para outro tema por exemplo esse aqui ó

2023 vou ativar esse tema ó beleza tema ativado vou visitar o site ó já mudou a aparência tá diferente tá nesse caso aqui como a gente vai fazer uma aula super completa aqui eu quero ensinar para você como criar um site aí enfim 100% personalizado do seu jeito tá E Para fazer isso a gente vai utilizar o elementor então eu vou vir aqui em Adicionar novo tema e eu vou instalar esse tema aqui ó hello elementor se não aparecer aqui você vem aqui Pesquisar temas e pesquisa aqui Hello com dois Ls elementor tá esse tema

ele é o tema desenvolvido pela própria equipe do elementor e ele é um tema aí totalmente limpo e a partir dele a gente vai conseguir criar totalmente do zero o nosso site totalmente personalizado Beleza vou clicar aqui em instalar e vou clicar em ativar beleza esses outros temas aqui se você quiser você pode estar excluindo aí para eles não ocuparem espaço na hospedagem Enfim vou deixar só o tema rello mesmo ó vou escluir Beleza quando você tiver instalado aí e ativado o tema Hello vai aparecer essa mensagenzinha aqui Agradecemos por instalar o temao e daí

esse botãozinho para você instalar o Elementor Então nesse momento você pode estar clicando nesse botãozinho aqui ou caso não apareça esse botãozinho ou você não consiga e enfim clicar você vem aqui em plugins adicionar plugin e aqui você vai pesquisar por elementor desse jeito assim e aí esse plugin aqui que você vai instalar ó elementor Website builder e esse aqui ele é um construtor de páginas aí mais usado no mundo tá vou clicar aqui instalar Agora instalado e ativado vou vir aqui em plugins instalados ó abriu essa janelinha aqui do elementor não precisa a gente

criar conta no elementor Lembrando que o elementor obviamente ele tem a versão free né Ou seja a versão gratuita mas também ele tem a versão Pro né a versão paga nessa aula aqui eu não vou te ensinar nada com a versão paga né PR objetivo justamente é te ensinar a fazer um site gastando o Mínimo possível Tá eu vou fechar aqui e a gente vai utilizar então o elementor grátis Tá vou vir aqui em plugins plugins instalados aqui vai vir também alguns outros plugins né Por padrão WordPress nesse caso eu vou excluir essee plugin aqui

porque eu não quero ele e esse aqui também eu vou excluir porque eu não quero ele tá então a gente vai utilizar o elementor eu vou clicar aqui em adicionar plugin e eu vou adicionar mais Alguns plugins aqui eu vou pesquisar por elementor mais uma vez e o plugin que eu vou adicionar aqui deixa achar ele é esse aqui ó elementos kit elementor então basicamente o que que esse plugin aqui ele vai fazer né só para você entender através do elementor a gente vai conseguir criar todas as páginas do nosso site porém pra gente criar

o o cabeçalho e o rodapé do nosso site e o menu também a gente precisaria migrar para o elementor pro precisaria Comprar ali a versão Pro e pra gente não precisar fazer isso eu vou utilizar esse plugin aqui que ele é uma alternativa gratuita e funciona muito bem tá não é só porque é gratuito que não funciona direito Muito pelo contrário esse plugin aqui tem mais de 1 milhão de instalações ativas e eu vou ativar esse pluguin aqui então clicar aqui em ativar Beleza deixa eu vir aqui em adicionar de novo ó adicionar plugin e

eu vou pesquisar aqui Por Mat form Vamos dar um enter aqui e agora vou instalar e ativar esse plugin aqui também Mat form Então esse plugin ele vai servir pra gente criar o nosso formulário de contato né Afinal o elementor ele também tem opção de você criar formulário de contato né que daí você pode pedir ali pro pro visitante o nome o e-mail a mensagem o telefone enfim e você recebe essas informações né você tem acesso a essas informações Porém para você fazer isso também você precisaria do elementor pro e nesse caso a gente vai

utilizar alternativa gratuita que funciona muito bem e é excelente tá vou clicar aqui em instalar e ativar ó vir aqui em plugins instalados ó então aqui a gente tem o elementor elementos kitl e Mat form Então são esses três plugins aqui que a gente vai est utilizando aí para a criação do nosso do site Beleza se precisar de mais algum plugin aqui no Decorrer da aula eu vou aí enfim mostrando para vocês Tá mas a dinâmica aqui desses plugins é a seguinte né Cada plugin que você adiciona aqui no WordPress ele vai ter uma função

em específico então por exemplo como eu falei aqui o elemento vai ser para criar as páginas o elementos kit vai ser para criar o cabeçalho o rodapé o menu e o Mat form o formulário aí por exemplo Ah você quer adicionar um plugin aí para WhatsApp né você quer colocar um botão Do WhatsApp no seu site você adicionaria um plugin específico para isso você quer por exemplo instalar o Pixel do Facebook no seu site você vai adicionar um plugin específico para isso você quer por exemplo fazer backup do seu site né exportar ele salvar ele

você vai instalar um plugin específico para isso e assim por diante beleza nessa aula aqui eu vou te ensinar como criar um site completo porém se você tiver mais dúvidas aí depois tem o meu canal aqui ó Ó que tem um monte de de vídeos aqui que você pode est aprendendo aí muita coisa complementar tá que pode est te auxiliando depois beleza mas a dinâmica é essa cada plugin que você vai adicionar é uma função diferente Beleza E aqui também os plugins né quando você acessar aqui o seu painel do WordPress sei lá daqui um

mês dois meses vai aparecer para você atualizar os plugins tá então caso apareça para você atualizar algum plugin você pode sempre Estar clicando em atualizar aí e fazendo as atualizações beleza próximo passo agora eu vir aqui em páginas todas as páginas aqui por padrão também WordPress vim com essas duas páginas ó nesse caso aqui eu vou mover paraa lixeira vou excluir isso aqui eu vim aqui em adicionar nova página e nesse momento Então você vai criar as páginas do seu site tá então aqui ó eu vou criar por exemplo a página de home né ou

você pode colocar página inicial ou início enfim o Que fizer sentido para você vou vir aqui em publicar eu vou publicar tá detalhe que eu só tô criando a página tá vou personalizar ela depois vou voltar aqui no WordPress ó já tem a página de home vou adicionar uma nova página e aqui eu quero adicionar também página de serviços tá claro que cada nicho é diferente cada negócio é diferente e nesse momento você vai adicionando as páginas aí conforme a sua necessidade tá ó vou clicar em publicar vou voltar aqui Quero adicionar também uma página

de sobre né sobre empresa ó publiquei e obviamente também você pode dar um contra o C contra o V aí fazer exatamente como eu tô fazendo aqui tá vai funcionar super bem ó publicar publicar por padrão é isso tá ó a página home né que é Inicial serviço sobre contato Ah você quer criar uma página de de trabalhe conosco você quer criar uma página de depoimentos uma página de fotos uma página de vídeos enfim você Vai criando as páginas aqui tá Ah já vou criar aqui também página de termos de uso e também a página

de política de privacidade publicar Beleza vou voltar aqui bom nesse momento Então o meu site ele tem essas páginas aqui e aí você cria também com quantas páginas você quiser beleza próximo passo agora vamos adicionar essas páginas a um menu tá lembrando que aqui eu tô fazendo só as configurações na estrutura do site Beleza daqui a pouquinho já vou personalizar página por página personalizar o menu Ó você vem aqui em aparência menus aqui ó eu não tenho nenhum menu criado ainda então vou vir aqui eu vou digitar menu principal esse nome aqui que eu coloquei

em nome do menu isso aqui não não vai interferir em nada tá é só para mim reconhecer o menu Beleza vou vir aqui em criar menu e beleza ó aqui você vê que Eu tenho as páginas então eu posso clicar aqui em selecionar todas e adicionar ao menu ó Então o meu menu né lá do meu site quando ele tiver pronto ali ele vai ser composto por essas páginas ó no caso eu quero aqui ó que apareça primeiro a página de home ou seja início depois a página de serviços assim página de e página de

contato essa página de política de privacidade eu não quero que apareça no meu menu ela vai aparecer só Lá no rodapé do site lá no finalzinho do site essa aqui de termos de uso também ó vou remover aqui e só vai aparecer lá no final do site tá e aqui você consegue então fazer toda essa gestão das páginas né ã aqui tem posts no caso né aqui no WordPress Pode adicionar posts nesse caso aqui eu não quero enfim adicionar posts no no menu né porque não faz sentido essa opção links personalizados aqui é interessante né

então aqui você consegue colocar qualquer link aí no seu Menu né você quer colocar por exemplo ã um um contato do do seu WhatsApp né você coloca aqui ó wa PME Barrinha deixa eu aproximar aqui para ficar melhor ó vou falar do meu caso aqui tá est no Brasil 55 Rio Grande do Sul 54 número do telefone né e os nove dígitos aqui do WhatsApp tá E aqui no link você coloca contato entra em contato WhatsApp falar agora enfim o que fizer sentido Para você tá ó adicionar o menu beleza daí o usuário ele vai

clicar no WhatsApp ali ele vai entrar em contato lá com você tá nesse caso eu vou deixar assim se você tá meio perdido ainda agora não se preocupa tá quando eu fazer ali a personalização do menu você vai ver enfim que tudo que eu tô mostrando aqui vai bater certinho beleza vou salvar o menu aqui beleza ã antes da gente conseguir antes da gente personalizar as páginas Vou vir aqui em configurações leitura sua página inicial exibe uma página estática e aqui você vai escolher qual das páginas vai ser a página principal Ou seja a página

inicial do seu site vai ser aquela página que quando o usuário acessar por exemplo aqui no meu caso ó canal aprendo com quando o usuário acessar canal aprend site.com vai ser a página que vai abrir então no meu caso página de home tá aí você faz esse processo aí com a sua página Vou salvar As alterações beleza outra coisa que eu vou fazer aqui vou vir aqui em links permanentes aqui ó se tiver padrão ou outra coisa eu recomendo que você venha aqui e coloque nome do post Tá deixe salvo essa opção aqui nome do

post e salvo as alterações Tá eu já tô acabando aqui as configurações chatas e agora sim vamos partir aqui de fato para a personalização Tá bom vamos lá então eu vou vir aqui na opção elements kit eu Vou clicar aqui nessa opção e eu vou vir aqui ó em header e foter tá ou header e fter enfim ó cliquei aqui ele ele pede né Para você fazer aqui primeiro uma configuração Zinha tá então aqui eu vou deixar tudo padrão ó antes dele liberar essa função vai aparecer para você ionar aqui nesse caso não vou mexer

em nada aqui ó só vou clicar em próximo próximo próximo se você quiser est assistindo aqui o vídeo enfim próximo próximo e finalizar beleza agora sim ó vou clicar Em em Head fter e ó apareceu desse jeito assim e provavelmente para você também vai aparecer assim tá deixa eu fechar aqui beleza e o que que a gente vai fazer agora a gente vai adicionar então o cabeçalho do nosso site né ou seja o header né raer ou header vou clicar aqui em Adicionar novo aqui em título eu vou colocar cabe sário desse jeito assim isso

aqui não vai interferir em nada tá isso aqui é só para você reconhecer o que você tá Criando aqui em tipo Raider condições no site inteiro tá Ou seja eu vou criar um Raider tá que que vai ter nesse Raider vai ter um logotipo e vai ter ali um um menuzinho né e eu vou personalizar isso aí com as cores e tal e eu quero que isso apareça no s site inteiro e eu vou deixar também isso ativado ó desse jeito assim vou salvar Beleza agora vou vir aqui editar ó Edit content cliquei aqui e

nesse momento Então vai est abrindo aqui o elementor Pela primeira vez Tá vai abrir mais ou menos assim para você se você tiver assistindo esse vídeo talvez no futuro abra alguma coisa diferente né talvez essa Barrinha aqui abra em cima enfim mas a lógica aqui ela vai ser a mesma tá ela vai ser bem Pareci não vai ter nenhuma mudança significativa beleza antes de mais nada eu vou definir as cores globais aqui do meu site eu vou vir aqui nesse menuzinho ó bem no canto aqui configurações do site cores globais Tá então o que que

acontece se você já tem uma identidade visual né se você tem sei lá um logotipo já um manual de marca ali com as suas cores tudo bonitinho você vai pegar nesse momento as suas cores e você vai adicionar aqui nas cores globais tá nesse caso aqui ó é um site fictício que a gente tá criando né então eu vim aqui no canva mesmo e eu criei um logotipo aqui fictício né na verdade eu nem criei eu só peguei um modelinho pronto aqui e importei e Escolhi as cores tá então vou pegar aqui as minhas cores

na prática né do meu logotipo e eu vou jogar aqui nas minhas cores tá Opa aqui Então como que a gente vai fazer isso então ó eu vou pegar esse tom de verde aqui vou vir aqui vou copiar o código da cor Beleza vou vir aqui adicionar cor ó vou vir aqui e vou colar Tá aqui o meu tom de verde tá eu vou pegar também esse tom aqui de azul esse aqui ó vou vir aqui vou Copiar adicionar cor vou vir aqui e vou colar além desses aí eu vou utilizar aqui um tom de

branco também então vai ser essa aqui as minhas cores tá vou utilizar esse tom de verde vou utilizar esse Tonzinho de azul e o branco pronto são essas as minhas cores você vai adicionar também as suas cores Ah você ainda não tem cores definidas tranquilo você pode estar criando o seu site aí e depois você altera as cores beleza por exemplo Aqui ó esse Verde ó eu vou criar o meu site eu posso colocar os botões na cor verde eu posso colocar algumas partes do site na cor verde e depois eu venho aqui ó e

eu troco essa cor para outra cor tá então se você não tem talvez uma paleta de cores definidas você pode colocar provisoriamente qualquer cor e depois se você tiver enfim decidir fazer de tal cor você só muda a cor aqui ó vou atualizar vou voltar aqui vou clicar em Fontes globais e eu vou escolher também As fontes ó eu vou vir aqui no primário e aqui a gente tem várias Fontes disponíveis nesse caso eu vou utilizar a fonte Monserrat ó que eu acho ela mais fácil de ler de trabalhar enfim e essa aqui vai ser

a fonte aqui dos meus títulos tá primário então aqui ó eu escolho o tamanho também nesse caso aqui ã vou deixar assim no tamanho 48 PES 800 tá mas aí você pode regular Enfim fazer toda a gestão e a minha fonte secundária que é essa aqui ó eu Vou colocar também aqui Monte Serrat assim tamanho 16 né colocar lá Menorzinha peso vou deixar 400 enfim você faz essa gestão aqui essas outras aqui eu não vou mexer eu vou deixar só a fonte primária e a secundária beleza Ah você não tem fonte né você não sabe

qual fonte utilizar você pode utilizar aqui uma Monte Serrat que é uma das fontes mais utilizadas aí da internet né é uma fonte bem agradável de ler ou você pode Utilizar aqui qualquer outra fonte aí enfim do seu interesse uma fonte que você acha legal para utilizar no seu site tá mas a ideia é que aqui você escolha uma fonte pelo menos aí para os títulos né Afinal cada e parte aí do seu site vai ter um título né então você seleciona essa fonte pros títulos e também essa fonte aqui para os textos né que

vão ser aqueles textos mais longos aí que vão ter no seu site ó vou clicar aqui em atualizar posso fechar aqui no x E beleza já defini aqui as fontes né e as cores globais do nosso site agora vou vir aqui no maizinho vou clicar em flexbox e vou adicionar aqui um contêiner nesse caso eu vou adicionar esse aqui ó eu vou clicar aqui nesse contêiner ó bem em cima aqui vou vir em estilo tipo tipo do plano de fundo clssico cor aqui estão as cores ó que já puxou as cores ali que eu configurei

ó posso dear essa cor azul por exemplo posso colocar um Verde ou posso deixar até mesmo em uma cor Branca tá nesse caso eu vou deixar Branca mesmo e daí o que que eu vou fazer aqui desse lado aqui ó você pode ver que são dois contêiners né ou seja dois quadradinhos desse lado esquerdo aqui onde tá o meu mouse vou colocar o logotipo e desse lado direito aqui eu vou colocar o menu né como é padrão Aí de qualquer site né Então como que a gente faz isso eu vou vir aqui ó nos elementos

tá E aqui então você vai ter Uma série de elementos ó ã você pode arrastar título imagem texto vídeo botão divisores passador Google Maps ícone indo mais para baixo aqui ó tem a versão Pro no caso a versão Pro Aqui tá tudo bloqueado a gente não vai usar essa versão Pro tem o geral ó caixa de imagem caixa de ícone ã Carrocel de imagens galeria enfim você pode adicionando os elementos aqui para dentro do seu site vindo mais para baixo aqui tem essa opção elementos kit ó Então essa opção Dos elementos kit só aparece aqui

porque eu instalei lá O plugin elementos kit tá caso contrário não apareceria aqui a gente tem várias opções também ó indo mais para baixo aqui ó Inclusive a opção Element kit aqui de haer fter tá então o que que eu posso fazer aqui ó até vou já pegar aqui o menu ó e vou arrastar para cá ói para cá o menu vou vir aqui ó vou selecionar o menu principal Ó você pode ver que aqui Já puxou automaticamente o Meu menu Tá eu já vou configurar isso vou pegar aqui ó vou arrastar uma imagem para

cá e nessa imagem aqui eu vou colocar então o logotipo ó vou clicar aqui e eu vou vir aqui no canva mesmo e eu vou salvar esse primeiro logotipo aqui para mim adicionar tá nesse caso eu fiz um logotipo aqui com duas variações então eu creio que esse primeiro aqui em branco né que tá com fundo branco eu vou adicionar aqui no começo e esse outro aqui eu vou adicionar lá no final do Site né no roda pé Então vou vir aqui ó você pode estar vindo aí no Enfim no canva também nesse no meu

caso aqui eu utilizo o canva pro tá Porém você não tem necessidade de utilizar o canva pro aqui ó posso baixar a imagem com fundo transparente né mas nesse meu caso também se eu não quisesse baixar com fundo transparente eu podia baixar a imagem normal mesmo tá pois daí ela ia baixar Branca né e eu consigo colocar ela lá no fundo branco nesse caso vou Baixar assim mesmo tamanho 500 por 500 clicar aqui em baixar Beleza já fez o download aqui no no meu computador agora vou ensinar para você um pouquinho aqui sobre o tamanho

correto da imagem tá eu posso pegar a imagem aqui do meu computador e arrastar ela para cá ó arrastei para cá eu vou inserir só aqui ó ela tá ficando assim ó ela tá ficando com umas bordas enormes aqui ao redor Então como que a gente faria para cortar ela da maneira correta Ó você pode estar acessando esse site aqui photopia.com esse site basicamente ele é um photoshop aí online e gratuito tá daí você vem aqui ó pega a imagem arrasta aqui vem aqui nessa opção de corte ó e aqui eu vou cortar a imagem

para ela não ficar com essas bordas brancas aí gigantes tá ó Vou cortar ela rente os elementos ó assim ó cortei E você vai deixar o seu logotipo aí mais ou menos nessa condição tá você vai deixar ele Sem bordas em cima sem bordas do lado Aí você vem aqui ó arquivo exportar como se ela tiver com fundo transparente aqui ó sempre exporta como png ó vou salvar aqui e beleza já fez download aqui para o meu computador agora eu venho aqui ó vou arrastar a imagem vou pegar aqui ó agora sim ó tá aqui

nos downloads ó vamos arrastar para cá de novo eu botei desse jeito aqui só para exemplificar tá pessoal porque ã eu sei que muita gente na hora que vai criar o site acaba tendo Esse problema né o pessoal coloca com um logotipo aqui uma com umas bordas enormes e não dá certo então ess aqui Eu até vou excluir aqui né não vou mais usar aí agora sim tá certo eu vou clicar nesse logotipo aqui eu vou vir aqui no alinhamento vou deixar a esquerda e aqui eu vou selecionar o tamanho em pixels ó então um

tamanho que fique legal 200 pixels aí mas você pode estar colocando O tamanho que você achar melhor beleza eu posso pegar também aqui ó o link do meu site né minha página inicial ó copiar ó https canal aprend ses.com vi aqui na imagem URL personalizado e colar porque daí toda vez que o usuário ele clicar nessa imagem que vai aparecer né no site inteiro ele sempre vai ser direcionado para a página inicial do site né isso aí já é padrão Tá vou pegar esse menu aqui ó aqui el gente tem algumas opções ó vou deixar

Ele para a direita tá vou vir aqui em estilo menu item Style aqui é tipografia Ó você já puxa a sua tipografia então aqui ó essa aqui é a minha tipografia primária tipografia que eu coloquei ali para os textos ó vou colocar aqui a secundária que é essa aqui a cor aqui do texto eu vou deixar Azul assim vou até at aumentar um pouco aqui assim para uns 600 vou vir aqui em Hover né quando o usuário passa o mouse ó eu vou Configurar uma cor ó o verde ó pode ver que quando o usuário

passa o mouse aí vai ficar na cor verde tá outra coisa que eu vou fazer aqui eu vou clicar aqui nesse contêiner vou deixar o conteúdo aqui no centro e esse outro aqui também ao centro assim ó então tá ficando assim aí o cabeçário do nosso site e claro que lá nas páginas e no menu né quando você tava criando antes aquela parte mais chatinha lá da estrutura quanto mais Páginas você enfim adicionar aqui vai vai puxar automaticamente aqui e vai aparecer aqui beleza posso estar clicando aqui em atualizar ou publicar Enfim vou clicar aqui

nesse contêiner ó mais uma vez o fundo aqui ó ah quero mudar a cor do fundo ó é só mudar aqui tá outra coisa também aqui no layout ó aqui você vai regular a largura ó desse jeito assim tá Então como que funciona essa questão aqui da largura ó o máxximo que você consegue Colocar é 1600 pixels se você deixa essa opção encaixotado ó se você deixa a opção largura Total ele vai abrir aqui do tamanho do monitor tá então o que que acontece Obviamente as pessoas elas vão acessar né o os sites a internet

em diferentes monitores no meu caso aqui eu tô gravando essa aula em um monitor de 17 polegadas Mas vai ter gente que vai e enfim acessar determinado site em um Monitor de 14 polegadas vai ter gente que vai acessar em um monitor de 20 polegadas Então vai variar muito você entende que cada enfim dependendo de como a pessoa acessar o site né a visualização vai ser diferente nunca vai ser igual Então o que eu recomendo que você faça aqui ó deixa encaixotado e deixa o próprio padrão aqui do elementor Ó 110 tá deixa dessa maneira

assim porque quando a pessoa abrir aqui essa esse site em um notebook Menor né de 14 polegadas ele vai abrir cortando né Mais ou menos aqui onde eu tô com meu mouse ó ele vai abrir menorzinho Mas vai ficar uma visualização agradável também para quem acessa em um dispositivo maior Beleza então vou deixar padrão mesmo aqui eu vou vir aqui no contêiner também eu vou deixar ele na cor branca desse jeito assim agora vou clicar aqui no responsivo e vou vir aqui em tablet ó e no tablet ficaria assim agora vamos Configurar esse menu aqui

no tablet e depois a gente vai configurar aqui no responsivo né no celular eu vou clicar aqui nesse menu Ah vamos ver que que eu vou fazer primeiro aqui ó aqui aqui o background ó Posso alterar ó posso deixar diferente né nesse caso eu vou deixar branco mesmo aqui para enfim pra gente seguir um padrão tá deixar assim mesmo mas daí se você quer colocar outra cor Diferente você coloca beleza menu item Style eu vou deixar assim mesmo não vou mexer mas aqui você consegue fazer toda a gestão né Por exemplo aqui ó quando o

usuário passa uma quando tá ativo também aliás aqui no ativo eu vou mudar para verde desse jeito assim tá por exemplo L usuário ele tá na página de sobre automaticamente essa ess essa escrita aqui sobre vai ficar verde tá V voltar aqui então aqui a gente tem mais algumas Opções deixa eu colocar o logotipo aqui também ó vamos escolher essa mesma imagem vamos ver ó tá ali o logotipo você pode fazer o mesmo esquema aí então vou vir aqui Hambúrger Style deixa eu mexer aqui ó tá vendo que tá mudando ali ó é o botão

né que a pessoal vai clicar aqui para abrir o menu né então vou deixar ele aqui para a direita aqui você regula o tamanho dele ó vou deixar padrãozinho Assim aqui a cor ó ó ficou a cor verde nesse caso vou deixar a cor azul assim aqui o espaçamento a margem ó vamos ver se vai mudar alguma coisa é no caso aqui é botão de fechar ó ah vou deixar 10 aqui e aqui 10 também aliás aqui um oito assim ó Isso aqui já botão de fechar aqui no Rover Ó você configura também ó pode

ver que ficou verdinho Ali aqui no tipo de fundo eu vou colocar transparente Ó daí quando usário passa o mouse né no caso quando usário vai clicar ele vai ficar verdinho ó não sei se dá para ver direito mas tá ficando verdinho ali deixa eu vi aqui nesse outro plano de fundo que é referente a esse aqui ó então a cor dele Eu vou deixar transparente também ó usuário passa o mouse aqui em Rover Mudar aqui para verdinho assim ó passou o mouse par ver que tá verdinho ó abriu aqui tá assim então fica mais

ou menos assim o menu e daí claro que aqui tem uma série de opções né você consegue enfim personalizar Praticamente todo esse menu né Aqui tem a opção quando você adiciona subitens né nesse caso vamos deixar assim mesmo para não complicar muito aí a aula tá ó vai ficar assim então aqui no celular eu Vou clicar nesse primeiro contêiner aqui vou vir em porcentagem Vou colocar aqui 30 não 40 ã 40% assim vou clicar nesse outro aqui vamos vir aqui em porcentagem 60% assim ou seja 60 + 40 fecha 100% tá ó no celular então

ele abriria dessa maneira assim detalhe que aqui ó por padrão ele tá puxando 360 pixels de largura tá porém a maioria dos celulares aí é 420 pixels 430 pixels para mais tá então vamos Botar um 420 aqui na maioria dos celulares vai abrir exatamente assim beleza assim no tablet e assim no computador beleza ã bom aqui não tenho mais nada o que fazer vou clicar em atualizar e agora Olha só eu vou lá na minha página inicial ó canal aprendend site.com e pode ver que já aparece aqui então Ó vou clicar aqui em serviços ó

sobre contato pode ver então que tá Ficando assim aí aparência do nosso site ó tô na página de contato tá ativo aqui o contato né E aqui ó na URL ó canal aprendend site.com bar contato ó vou pro sobre ó trocou barra sobre agora a gente vai criar o rodapé né que é a parte que vai aparecer aqui embaixo onde eu tô com meu mouse e depois a gente vai personalizar as páginas uma a uma beleza vamos lá então vou vir aqui no meu painel do WordPress então Elementos kit mais uma vez raer fter agora

a gente vai vir aqui em fter ó e não tem nada criado obviamente que vai ser roda pé ó vir aqui em Adicionar novo vou colocar aqui roda pé tipo fter condição no site inteiro deixar ativo no mesmo esquema que a gente fez o nosso cabeçário do site né a gente vai fazer o nosso rodapé do site nessa mesma lógica ó tá aqui ele então e agora vou clicar em editar Edit content mais uma vez vai abrir o editor do Elementor e vamos fazer então Ó vou clicar aqui no maizinho flexbox ã nesse caso vou

selecionar essa opção aqui essa estrutura com quatro contêiners Tá eu vou clicar aqui no contêiner vou vir em estilo ã plano de fundo vou deixar clássico e vou selecionar essa cor azul aqui ele tá aparecendo em cima tá pessoal porque eu tô fazendo tá mas quando tiver pronto ele vai aparecer na parte de baixo do site inteiro Beleza eu vou vir aqui Também no canva e nesse caso eu vou colocar esse outro logotipo agora essa página dois aqui então vou vir aqui baixar Página dois tá vou colocar fundo transparente aqui porque eu tenho o canva

pro né mas se você não quiser não precisa desde que ela esteja né o logotipo esteja aqui com o mesmo fundo né é fundo azul aqui e aqui também fundo azul vamos ver se baixou é esse aqui ó mais uma vez eu vou pegar ele eu vou vir aqui no fotopia ó eu vou fechar esse Outro aqui ó vou vir aqui no fotopia e vou configurar aqui o tamanho correto ó Então vou cortar aqui aqui aqui e aqui dessa maneira assim agora vou vir aqui exportar como png salvar ele vai fazer o download aqui no

meu computador tá agora eu venho aqui ó eu vou arrastar a imagem para cá e vamos pegar esse logotipo então aqui que é esse aqui Ó vou arrastar aqui beleza selecionar tá aqui ó eu vou clicar nele tamanho eu vou deixar em pixels eu vou deixar 200 pixels também que é o mesmo tamanho que eu deixei o logotipo lá no início tá ó eu vou deixar ele alinhado à esquerda eu vou vir aqui ó eu vou copiar e eu vou colar a URL do site enfim essas mesmas configurações tá ã vamos ver agora embaixo dele

aqui eu vou adicionar um pouquinho de texto tá e o que que seria esse um pouquinho de Texto né qual que seria a proposta aqui seria você escrever um pouquinho sobre a empresa tá de uma forma resumida Tá mas isso aqui bem resumido mesmo tá coisa coisa rápida sem texto longo ó então aqui quando eu arrasta o editor de texto Ó você pode vir aqui e ó aqui você pode digitar o texto que você quiser ó você vem aqui em texto ó digita ou vem aqui em visual ó coloca em em em Itálico sublinhado enfim

formata e digita da maneira que você quiser sobre Os textos né como eu falei lá no início do vídeo no início da aula ã nessa aula aqui enfim nesse passo a passo eu vou ensinar você fazendo só com textos fictícios né porque afinal o conteúdo de cada site ele vai variar de pessoa para pessoa então eu não vou colocar textos reais né o objetivo é te ensinar realmente a fazer um site né o conteúdo fica aí sob sua responsabilidade Mas aqui então o que que você pode fazer você pode digitar aqui ã nesse editor Zinho

manualmente né como você quer o texto ou você pode vir aqui nessa opção ó escreva com ia tá nesse caso aqui você precisa criar uma conta no elementor lá no não precisa ser no elementor pro mas lá no site oficial do elementor né elementor.com Você precisa ter um e-mail vinculado lá e conectar o e-mail aqui e daí basicamente você consegue gerar alguns textos aí com inteligência artificial beleza Lembrando que essa função da Inteligência Artificial do Elemento você consegue utilizar até um certo ponto depois você tem que pagar para usar inclusive aqui no meu canal eu

tenho vídeo ensinando a como fazer isso e esse vídeo vai tá na descrição dessa aula beleza nesse vídeo eu ensino a como você gerar textos com a inteligência artificial do Element a como gerar códigos também a como gerar até imagens aí só com a inteligência artificial do elementor Mas aí você tem que fazer uma integração ali tá nesse caso não vou Ensinar porque isso foge um pouco aqui da aula tá então então tem pessoas que não querem gerar com inteligência artificial já tem os textos prontos e tal então não vou mostrar outra alternativa também para

você não precisar conectar aqui e tal você pode vir aqui no chat GPT né Todo mundo conhece o chat GPT caso você não conheça você acessa aí no no Google né vai lá no Google e digita chat GPT e vai abrir o primeiro site você vai fazer ali um Login né você pode entrar inclusive com o Google e tal fazer um login e aqui ó é um chatz inho que você conversa com ele né Vou colocar aqui ó meere uma descrição rápida de no máximo 10 palavras para uma empresa de Finanças vou botar assim ó

ele já deu uma frasezinha aqui ó posso pegar essa frasezinha ó vi aqui copiar vim aqui ó D um cont control V ó Colar essa frasezinha daí você vem aqui em estilo Ó você configura a cor aqui na fonte ó minha tipografia secundária assim ó e tá aqui então então você pode fazer esse processo enfim ao decorrer do site inteiro né Você pode pedindo aqui os comandos e a inteligência artificial vai te gerando e você vai lá e vai colando no seu site Beleza espero que tenha ficado Clara essa parte e qualquer dúvida deixa aí

nos comentários Ok eu vou adicionar um titulo Zinho aqui e Aqui eu vou colocar assim ó ã institucional institucional eh dois pontinhos e aqui vão ser mais ou menos eh vão ser as páginas aí do site tá Vou colocar aqui na cor branca topografia eu vou deixar o primário só que eu vou diminuir aqui para 18 assim e eu vou vir aqui e eu vou arrastar também aqui ó o botão aqui para baixo e qual é que é a ideia aqui então deixa eu só pegar aqui o meu painel do WordPress eu vou copiar eu

vou abrir aqui numa nova guia aí eu vou vir aqui em páginas todas as páginas e eu vou adicionar então algumas páginas ali né como se fosse um menuzinho mesmo só que no roda pé vou pegar por exemplo aqui ó a página de home ó vou vir aqui copiar endereço do link aí eu venho aqui ó tô aqui no botão tá ó vou digitar aqui home e vou colar o endereço do link vou vir aqui Aqui você pode abrir numa nova janela nesse caso não faz sentido então Vou deixar assim vou vir aqui em estilo

nesse botão e vou deixar ele assim ó transparente preenchimento zero e fonte secundária desse jeito assim e ao passar o mouse a cor do texto fica verde assim ó daí eu posso pegar isso aqui e simplesmente duplicar e agora eu coloco aqui ó página de serviços e daí você vai repetir esse processo com as páginas aí que você tem no seu site ó vir aqui copiar colar vamos duplicar Página de sobre V pegar a página de sobre aqui copiar cont contrl V vou duplicar página de contato e aí fica legal né até pro usuário ele

não ficar perdido aí no seu site né ele saber as páginas enfim ele ficar bem direcionado então é importante você deixar isso bem claro Daí você pode vir aqui ó e duplicar e fazer quantas vezes você quiser beleza nesse caso eu Vou deixar assim mesmo tá posso pegar aqui ó vou copiar vou vir aqui vou colar eu vou colocar aqui ã páginas vou pegar esse aqui ó vou copiar vou vir aqui vou colar Vou colocar aqui por exemplo o política de privacidade ó vamos copiar aqui o link né vamos voltar aqui vamos colar o link

aqui ó e vamos digitar aqui ó política de Privacidade assim política tem acento né Mas enfim vamos duplicar aqui vamos colocar outro aqui ó termos de uso vir aqui pagin zinha de termos de uso copiar vim aqui cont control V colar ó daí você vem aqui duplica e repete esse processo aí quantas vezes você quiser agora aqui eu quero adicionar algumas redes sociais Então como que a gente vai Fazer isso eu vou achar a opção lista de ícones tem aqui no geral ó lista de ícones vou arrastar para cá e aqui você escolhe os itens

da lista então por exemplo Ah eu quero adicionar aqui o ã Facebook da empresa ó vou digitar Facebook aqui no ícone Ó você consegue achar o ícone das redes sociais tá então ó digito Facebook aqui ó escolh o ícone do Facebook e aqui no link você coloca o link do Facebook né que é o facebook.com bar o nome da empresa quero colocar aqui Também o Instagram ó pesquisei pro Instagram tá aqui ó aqui ó Instagram e vou digitar aqui instagram ou você pode colocar sei lá acesse nosso Instagram clique para ir para o Instagram enfim

o que fizer sentido para você beleza quero colocar aqui também o WhatsApp ó WhatsApp texto WhatsApp vou colocar também e-mail vou Pesquisar aqui por envelope assim ó aqui mesmo e vou digitar aqui e-mail daí aqui ó pra pessoa quando ela ela clica aqui em e-mail né aqui no link Ó você vai colocar assim ó deixa eu aproximar aqui para ficar mais fácil você vai digitar assim ó mail dois pontos e aí você vai colocar o e-mail tá ó vou colocar aqui mail @ email P com só para ilustrar Mas aí você vai Colocar aí enfim

o nome da sua empresa o seu e-mail que quando o usuário ele clica aqui em e-mail vai abrir automaticamente aí seja no computador ou no celular o aplicativo de e-mail para ele mandar um e-mail direto tá a mesma coisa aqui no WhatsApp ó daquela maneira que eu Já ensinei antes né coloca o linkzinho aqui ó w.me barra o número do telefone aqui completo beleza pessoa clica já cai direto Lá na Enfim no contato ok bom vamos personalizar aqui esse essa listinha de ícones deixar o espaçamento de 15 assim aqui o alinhamento vai ficar na esquerda

mesmo divisor vai ficar sem divisor o ícone aqui os ícones né eu vou deixar na cor verde eu vou aumentar um pouco o tamanho assim e o texto aqui eu vou deixar minha tipografia secundária na cor Branca vou aumentar mais aqui o espaço assim aliás aqui eu esqueci deixa eu duplicar esse aqui ó vou estar para cá colocar aqui entra em contato aí para direcionar bem o usuário tá ó fica assim então o nosso rodapé aqui nos nos ícones aqui ó ao passar o mouse botar aqui a cor verde ó fica assim Beleza então vou

vi aqui no contêiner layout Vou deixar padrãozinho 1140 né como eu dei aquela explicação antes ali tudo eu vou fazer nessa nessa largura de 140 para ficar padronizado Beleza vou vir aqui avançado preenchimento Vou colocar aqui 50 pixels superior e un 50 pixels inferior desse jeito assim mas aqui você pode colocar mais ó pode colocar 100 e 100 Ó daí fica assim só vamos ajustar um pouco melhor a disposição aqui desses elementos deixa eu ver aqui ó você Consegue regular ó Então vou colocar esse aqui mais assim ó né Eh ocupando mais espaço que os

outros e esse texto aqui vou colocar uma margem de uns 100 pixels assim para ele não ficar junto com os outros elementos ficando assim então o nosso rodapé tá detalhe que aqui ó eu vou vir pro tablet ó esse 100 pixels aqui que eu coloquei de imagem direita ele puxou automaticamente tá então sempre vai Puxar aí quando você coloca no responsivo Tá eu já vou ajustar bem aqui no no responsivo só vou adicionar antes aqui mais um coninho bem embaixo e esse aqui eu vou colocar nessa cor aqui que eu esqueci de colocar que é

essa cor aqui ó vou dar um cont control c aqui vou vir aqui vou dar um cont control V ó que esse tom de azul mais forte tá ele vou vir aqui e vou adicionar Um textinho De todos os direitos reservados né E daí aqui você pode colocar Sei lá o CNPJ da empresa todos os direitos reservados o ano enfim o que fizer sentido para você beleza ó tipografia eu vou deixar aqui um 200 e o tamanho 13 para ficar bem pequeno mesmo ele tá pegando um espaço aqui ó deixa só vir aqui no contêiner

ó pode ver que ele tem um espaçamento embaixo em cima não então vou colocar aqui em Cima e uns 15 pixels assim ó daí fica assim então o nosso roda pé aí do site beleza vamos ver agora aqui no tablet no tablet Vou ajustar aqui esse botão deixa eu ver o que que eu posso fazer aqui no tablet largura em porcentagem aqui ó Então você vai regulando aí né Deixa eu ver esse texto Aqui vou ter que reduzir ele vou deixar um tamanho 14 esse aqui também tamanho 14 esse contêiner aqui eu vou zerar ele

deixar uma margzetta assim páginas vou deixar assim mesmo vamos ver esse logotipo aqui diminuir um pouquinho esse texto aqui eu vou diminuir ele também para uns 14 e esses aqui também para uns 14 pixels Olha eu posso pegar aqui ó copiar Opa aqui ó colar os estilos colar Estilo e colar estilo ó se você quiser você duplica né Igual eu expliquei então fica mais ou menos assim no tablet Esse aqui também ó Vamos diminuir aqui para uns 14 pixels aí já foi todos assim bom vou deixar assim no tablet espaçamento que não vou mexer agora

vamos ver aqui no celular tá Ó celular eu vou clicar aqui no contêiner em vez de 100 eu vou colocar 50 Pixel superior 50 Inferior vou colocar um 50 na direita e um 50 na esquerda desse jeito assim esse logotipo aqui vou deixar 150 pixels mesmo esse institucional aqui vou adicionar uma margem de uns 10 assim e esse home aqui ó vou regular manualmente para ele ficar mais perto aqui do institucional tá então Men 15 aqui de Margem ó copiar Ó daí eu aplico aqui nos outros Ó você pode ver que eles ficam mais pertinhos

ó esse aqui também Ó vou aplicar aqui E esse outro vou aplicar aqui copiar vamos aplicar aqui vamos aplicar aqui beleza e essa listinha aqui vamos deixar mais perta assim ó na maioria dos celulares vai abrir dessa dessa maneira assim então aqui eu não sei por que tá bugando aqui que ó o sobra ele tá um pouquinho mais pro ladinho ó agora foi certo Agora foi Também ó foi também o política temos de uso agora foi ele está um pouquinho mais pro lado esquerdo ó Beleza então na minha opinião ficou uma visualização agradável legal tá

claro que você config ur aí do seu jeito beleza vamos manter um 15 aqui e vamos colocar aqui um 50 e um 50 também ó então nos celulares vai abrir dessa maneira assim no tablet dessa maneira assim e no desktop dessa maneira assim Vou clicar aqui em atualizar e agora vou abrir a página inicial do meu site e agora você pode ver que aqui já aparece então o nosso rodapé beleza vamos partir agora então para a criação da nossa página inicial então do nosso site vamos lá eu vou vir aqui no meu painel do WordPress

eu vou vir aqui em páginas todas as páginas e aqui então vai ter a página de home ou de início enfim a página inicial aí do seu site né Igual Eu fiz aqui do meu eu vou clicar aqui em editar vai abrir assim e agora vou clicar em editar com elementor E mais uma vez vai estar abrindo aqui o editor do elementor e a gente vai conseguir fazer aqui a nossa criação tá primeira configuração bem importante aqui ó você vai vir aqui nessa engrenagenzinha em configurações e aqui tem essa opção de layout da página tá

então aqui tem padrão tela do elementor elementor largura Total como Que funciona aqui se você deixa padrão vai aparecer aqui o cabeçalho o rodapé e vai aparecer o nome da página aqui nesse caso a gente não quer que apareça esse nome aleatório aqui tá se você deixa a tela do elementor fica absolutamente tudo em branco então Inclusive essa opção é boa para você que quer criar uma Landing page uma página de vendas né você não quer ã deixar aí menu não quer deixar roda pé nada disso essa opção é ideal Para você tá nesse caso

aqui como a gente tá criando um site a gente vai deixar essa opção aqui ó el mentor largura total né que daí vai aparecer aqui o cabeçado e o roda pé tá E agora vir aqui no maizinho vou adicionar aqui um contêiner e vamos escolher uma imagem aqui para ir de fundo nesse contêiner ó vou vir aqui em imagem nesse caso eu tenho as imagens aqui do meu computador nessas aqui eu baixei no freep Mas como eu falei se Você quiser você pode estar baixando em qualquer banco de imagens ou usando suas próprias imagens tá

ou até mesmo as imagens também aqui ó criar com i você pode também criar aqui com ência artificial do elementor beleza nesse caso aqui uma coisa que eu quero mostrar para você agora é que quando você baixa uma imagem de um banco de imagens né geralmente ela vem num tamanho absurdamente grande então vou mostrar para você como que você faz para Redimensionar essa imagem para deixar essa imagem no tamanho certo para utilizar no seu site tá nesse meu caso aqui eu vou pegar essa imagem aqui tá então eu quero utilizar essa imagem aqui como a

imagem ali do meu banner principal do meu site tá Então como que a gente faz isso eu vou pegar essa imagem aqui eu vou clicar com o botão direito e eu vou abrir ela aqui no pint mesmo tá nesse caso eu tô usando Windows aqui a última versão do Windows eu vou Abrir ela no pint mesmo Provavelmente você também vai ter o pint aí se você utilizar o Windows se você utiliza outro sistema operacional você pode pegar ela e jogar aqui no fotopia também ó deixa eu fechar essa aqui ok Ó você pode pegar a

imagem aqui se você não tem o pint aí ó jogar no fotopia esperar carregar aqui V aqui em imagem ã tamanho da imagem e de largura você vai colocar assim ó 1920 Você vai clicar fora aqui e você vai clicar em aceitar ó aqui ela reduziu o absurdamente tamanho porém ela ainda está numa qualidade muito boa Olha só e aí esse tamanho que que a gente vai utilizar para as imagens de fundo aí ao longo do nosso site sempre 1920 pixels de largura né se você quer fazer no P vem aqui ó em dimensionar ó

pixels coloca aqui 1920 aqui ele já puxa automático a o vertical né então horizontal 1920 vertical 1279 o vertical É a altura tá então a altura pode variar muito pode ser 1000 10000 1200 1500 vai depender aí enfim do seu projeto da sua imagem tá ó dei um ok aqui e a imagem tá num tamanho numa qualidade aliás muito boa eu vou salvar aqui ó vou clicar em salvar beleza ó já salvei a imagem aqui no meu computador essa aqui ó eu posso vir aqui exportar como png e salvar ela aqui beleza nesse caso não

vou salvar de novo aqui porque eu já tenho ela aqui nos Meus downloads tá aqui ó a imagem então atualizada nesse tamanho tá ó Então vou vir aqui e vou enviar a imagem aí no tamanho 1920 eu quero colocar essa imagem de fundo aqui do meu site clicar aqui em selecionar e beleza ã que que eu vou fazer agora aqui então vou vir aqui em layout desse contêiner e aqui a gente tem algumas opções Tá eu vou deixar ele encaixotado 1140 pixels tá Porém Aqui ó eu consigo regular a Altura dele tá Então como que

a gente pode fazer aqui se você quiser que essa primeira sessão aqui né enfim esse banner Inicial ele abre exatamente no tamanho da do monitor aí do usuário você vai vir aqui você vai colocar VH e aqui sem VH ou seja olha só eu tô em um monitor aqui como eu falei de 17 polegadas e ele abriu aqui né essa imagem abriu exatamente do mesmo tamanho do meu monitor se a pessoa do monitor de 20 polegadas de 14 polegadas enfim Independendo do tamanho vai abrir do mesmo tamanho tá então você pode fazer esse esquema aí

ou até mesmo colocar sei lá 90% o que fizer sentido para você tá nesse caso aqui eu acho que eu vou deixar em uns 90% mesmo beleza Ou eu poderia ã vir aqui ó deixar em pixels ignorar isso aqui só vir aqui avançado e colocar um preenchimento por exemplo ah 300 superior e 300 inferior assim ó tá isso vai aí de cada um nesse Caso eu vou deixar aqui em VH que é a porcentagem vou deixar aí e os 90% mesmo eu vou vir aqui na opção plano de fundo aqui tem a imagem então resolução

da imagem completo posição você pode regular a posição aqui ó nesse caso eu vou deixar centro Ó você pode estar mudando aliás vou deixar centro à esquerda que fica melhor anexo rolar rolar isso aqui ó fixo fixo é isso aqui ó ela fica fixa nesse caso vou deixar Rolar repetir não repetir tamanho da exibição a gente tem algumas opções automático cobertura Counter e personalizado nesse caso vou deixar cobertura assim tá mas é claro que você vai configurar aí de acordo com a sua necessidade né ã muita atenção aqui ó se você deixar por exemplo Counter

ó ela pode ficar com espaço em branco aqui tá então muita atenção aí como que você vai configurar ao certo isso tá no meu caso aqui ó cobertura Fica de boa posso ir atualizando a página aqui ou publicar tá se eu clicar aqui ó em pré visualizar alterações abre em uma nova guia ó Então posso ver como é que tá ficando o meu site outra coisa bem legal também que eu quero mostrar aqui para você se você fizer alguma coisa errada aí enfim você pode vir aqui no histórico e voltar então você vem aqui no

histórico e restaura né se você sei lá que nem aqui ó ah exclui sem querer ó vem aqui no histórico e Restauro tá outra coisa também tem um navegador aqui ó do ladinho ó aqui no navegador ó Eu adicionei um contêiner né e o contêiner tá vazio mas aqui conforme você vai adicionando os elementos Ó você pode fazer a gestão dos elementos por aqui ó clicar no contêiner conforme eu adicionando mais elementos você vai ver que vai aparecendo aqui e você também pode fazer igual né fazer a gestão por aqui beleza posso vir aqui em

sobreposição de Fundo e ó adicionar uma sobreposição ó vou aumentar um pouquinho aqui deixa em 0.7 dessa maneira assim beleza e agora eu vou vir aqui e eu vou arrastar um título para cá ou seja um um texto né enfim a headline aí do meu site né Essa headline que vai ter ali no início do site né antes de eu mexer aqui ó vou vir no contêiner layout justificar conteúdo ao meio tá então você pode est fazendo esse mesmo Processo aí também tá aí mais uma vez aqui no texto Ó você pode vir aqui e

pedir pro chat GPT ã me gerere a headline meere o texto para o banner pro meu site e tal enfim você especifica para ele ele vai gerando pra você tá nesse caso aqui ó eu vou pegar e eu vou colar um pouquinho de textinho fictício aqui para preencher os espaços né até porque o foco da aula aí não é o conteúdo né mas sim é você fazer o site ó então tipografia primária Deixa eu só Regular um pouquinho a altura da Linha aqui assim ó vou deixar em uns 900 até que fica melhor Beleza vou

deixar assim ó aqui aliás eu coloquei errado vou adicionar um contêiner aqui direção dele vou botar para cá colocar outro contêiner duplicar tá vou deixar assim ó esse aqui eu vou vir aqui vou zerar os espaçamentos e esse aqui vou Deixar pouquinho menor né esse aqui ó largura aliás aqui ele fica padrão mesmo assim aqui ó porcentagem ó esse aqui vou deixar í uns 60% assim ou seja o texto que eu colocar aqui ele vai ficar alinhado para a esquerda beleza fazend eu posso clicar aqui no texto ó e para dar um um toque aqui

no design ó vou vir aqui em borda tipo de borda sólido vou zerar aqui ó borda esquerda da cinco Pixels na cor verde aí eu venho aqui avançado layout preenchimento esquerdo Opa 15 assim ó ele de um toquezinho aí no design né fica mais bonito ainda nesse texto aqui eu acho que eu vou aumentar um pouquinho o tamanho tá assim altura da Linha assim e vou deixar assim ó para ficar em três linhas tá E esse contêiner aqui eu vou deixar ele um pouquinho mais azulado assim ó pro usuário Conseguir ler melhor o texto tá

afinal se eu deixo assim por exemplo ó o usuário ele vai bater o olho aqui no texto e é ruim de tu ler né então vamos aumentar aqui ó Assim fica muito mais fácil de ler tá então são pequenos ajustes aí né que inclusive quando você tiver fazendo seu site você vai vendo né que tem alguns ajustes aí e você vai melhorando né vai melhorando aos poucos tá vamos colocar aqui um subtítulo né ó tipografia secundária e vamos colocar Aqui também um botão ó tá aqui o botão vamos arastar para cá e aqui nesse botão

fica ao seu critério se você quer colocar sei lá página de serviços né veja nossos serviços a página de contato entra em contato você quer colocar o link do WhatsApp né você quer colocar um link aí pra outra página enfim fica ao seu critério tá nesse caso aqui eu vou digitar aqui entre em contato desse jeito assim eu vou escolher um ícone aqui também ó colocar O ícone do WhatsApp tá inserir vou vir aqui em estilo aqui você seleciona então o alinhamento vou deixar a esquerda tipografia vai ser tipografia secundária área minha aqui porém eu

vou aumentar um pouquinho peso 700 assim aqui a cor do texto vai ficar branca mesmo e o fundo aqui eu vou deixar na cor verde tá aqui o raio da borda ó eu posso apertar para cima aqui e pode ver que ficou Redonda a borda nesse caso vou deixar aí uns 10 assim ó Ele não vai ficar nem Redondo nem quadrado né ele vai ficar quadrado com as levemente arredondadas aqui em conteúdo até agora que eu vi que o elemento ele atualizou né e antes dava para você escolher aqui o tamanho do botão e agora

não tá mais aparecendo isso então eu vou configurar manualmente aqui em preenchimento colocar uns 20 pixels superior uns 20 inferior uns 80 na direita e uns 80 na Esquerda dessa maneira assim então e aqui você vê que tem informações bem Claras né o usuário ele vai vir aqui ele vai bater o olho na headline vai Aler a sub headline e tem o botão para ele clicar aqui ó a gente pode configurar quando o usuário passa o mouse então você pode vir aqui ó H cor do plano de fundo aqui ó e configurar uma cor diferente

ó por exemplo á usuário passa o mouse ó o botão fica azul ou até mesmo você pode deixar ele Verde mesmo só que um Tonzinho um pouquinho mais escuro ó assim ou também deixa deixar ele Verde você pode vir aqui ó e colocar alguma animação ó ó tá vendo a animação ó assim ã enfim tem várias animações aqui ó você pode estar configurando tá nesse caso aqui deixa eu só vir aqui no canva pegar esse Tonzinho aqui de verde que eu também Esqueci de pegar ó vou vir aqui vou copiar aí eu vou vir Aqui

ó e vou dar um cont CRL V aqui para colar ó então quando o usuário passa o mouse ó o botão ele fica levemente um pouquinho mais verde tá eu acho que fica fica mais clean dessa maneira né então eu vou deixar assim beleza posso vir aqui também ó adicionar mais um titulo Zinho colocar aqui por exemplo sei lá bem-vindo e ó nesse caso eu vou colocar ele na cor verde tipografia secundária vou aumentar aqui o peso e espaçamento entre as letras vou deixar Assim ó bem-vindo aí a headline a sub headline e o botão

vamos ver como que isso fica aqui no tablet ó no tablet que que eu vou fazer eu vou clicar aqui nesse contêiner porcentagem 100% assim vou vir aqui também vou adicionar uma margem aqui de uns 50 e de uns 50 aliás um pouquinho mais até 70 e 70 ó e no tablet ficaria assim e tem detalhe que aqui no tablet ó você pode Clicar aqui e a imagem você pode mudar ela ó você pode colocar ela numa posição diferente inclusive aqui ó personalizado ó ó vou deixar assim no tablet ou padrão mesmo tá vamos ver

aqui no celular Ó aqui tá tudo desconfigurado no celular como que a gente ajeita isso então Ó você lembra que ali no tablet ó eu coloquei 70 pixels na direita e 70 esquerda quando Eu coloco no celular ele puxa automaticamente então a gente vem aqui e zera e nesse caso aqui eu só vou colocar uns 10 pixels na direita e uns 10 pixels na esquerda tá esse título aqui eu vou diminuir ele também eu vou colocar vou colocar aqui uma fonte 32 no celular desse jeito assim e vou diminuir a altura da Linha assim ó

então você vai configurando aí conforme se adapta ó esse outro textinho aqui eu vou diminuir Também para uns 14 esse botão aqui ó eu vou zerar ele e aqui eu consigo configurar manualmente ó 20 e 20 Vou colocar aqui 1 40 e 1 40 assim tá abrindo assim então no celular né detalhe detalhe que aqui no celular ele vai abrir o tamanho da tela inteira tá porque olha tá configurado aqui deixa eu vir aqui ó no contêiner ó 90 VH aliás 90% do tamanho da tela ó posso colocar 100% Vamos colocar aqui uma resolução maior

assim ó ele vai abrir 100% o tamanho da tela aí do dispositivo que a pessoa abrir tá eu acho que fica uma visualização bem legal beleza essa imagem aqui ó a mesma coisa ó você pode vir aqui inclusive enviar uma imagem diferente para aqui no celular ou configurar essa aqui nesse caso eu vou deixar assim mesmo beleza então tá ficando assim no celular o nosso Site aí vamos atualizando aqui né pra gente não perder o processo uma dúvida também que o pessoal tem é que ah se pode sair daqui e voltar depois e a resposta

é sim você pode fechar isso aqui ã voltar depois né daí obviamente você vem aqui no painel do do WordPress né inclusive ele tá aberto aqui ó você vem aqui no painel do WordPress ó vem aqui na página que quer clica em editar com elementor e vai abrir aqui o editor novamente Beleza eu vou vir aqui no Maizinho vou selecionar a opção flexbox e agora vamos adicionar mais outra sessão aqui né mais outro contêiner né ã nesse caso aqui eu vou selecionar essa estrutura aqui vou clicar nela vou deixar 110 e aqui vou colocar 100

pixels superior e 100 pixels inferior eu só vou deixar essa primeira aqui maior né esse primeiro banner aqui inicial do nosso site maior tá esses outros aqui eu vou deixar tudo padrãozinho de 100 por 100 e de 110 pixels Beleza vou adicionar aqui outro conto coner vou clicar nesse contêiner Vou colocar aqui a direção linha horizontal vou vir aqui adicionar outro contêiner e vou duplicar E por que que eu fiz isso porque de um lado eu quero colocar um título e de outro um texto tá embaixo também deixa eu ver se eu já consigo adicionar

um vídeo aqui ó quero colocar um vídeo então é bem legal que tem um vídeo aí da Apresentação e tal para a sua empresa tá claro nesse caso eu tô fazendo com o vídeo né mas ah você não tem vídeo não precisa fazer tá só vou mostrar aqui para se caso você tiver um vídeo aí você já sabe como que faz beleza ó então eu posso pegar esse mesmo título que tá aqui ó copiar vim aqui e colar por que que eu fiz isso porque ele já está formatado aqui da maneira correta tá então eu

só vou pegar aqui ó eu vou mudar a cor dele ó mudei a cor eu vou Diminuir também um pouco aqui o tamanho aí vou deixar assim beleza essa bordinha Verde aqui acho que eu vou tirar isso aqui não tá legal não vou deixar vou deixar só lá no início eu posso pegar esse outro textinho ó copiar vim aqui e colar esse aqui eu vou deixar ele na cor azul ou preta Vou deixar na cor preta assim ó e eu vou vir aqui vou centralizar no meio esse aqui já tá tá Centralizado ó Então fica

assim ó fica Um título né a esquerda e uma descrição aqui à direita ó essa descrição até posso aumentar mais ó pegar mais textinho aqui vou copiar vou vir aqui e vou dar um cont Crol V ó colei tá ã eu tô fazendo desse jeito porque eu acho bonito tá claro que se você quiser colocar ah sei lá um título em cima por exemplo ó deixa eu mostrar aqui para você ó aqui é o título assim em cima ó Você coloca assim dessa maneira ó outro embaixo ó Vem aqui cola o outro embaixo arrasta o

vídeo aí se for o seu caso ó assim tá nesse caso vou deixar assim eu vou clicar aqui nesse vídeo e como que a gente faz então para inserir um vídeo aí no nosso site tá olha só aqui a gente tem algumas opções Ó tem YouTube Vimeo Daily Motion videopress e Auto hospedado Então como que funciona tem várias maneiras de você adicionar um vídeo aqui eu recomendo que você deixe selecionado a opção YouTube tá só não Recomendo a opção Auto hospedado porque aut hospedado você vai praticamente pegar e fazer o envio do seu vídeo aqui

direto pro WordPress tá só que isso não é muito não é muito legal porque às vezes pode acabar pesando demais aí a hospedagem então eu não acho não acho legal fazer isso eu acho legal você vi aqui em YouTube e colocar o vídeo no YouTube tá então você vem aqui no YouTube ó cria uma conta aí né você deve ter uma conta no YouTube se você tá Vendo esse vídeo você vem aqui em maizinho você envia o seu vídeo pro YouTube e na hora ali de você publicar o seu vídeo né você coloca ele como

público ou como não listado tá E daí você copia o link dele e você cola o link aqui tá a diferença é que se você colocar el como o público Todo mundo vai ter acesso através do YouTube se você colocar como não listado somente as pessoas que tiverem o link vão ter acesso ao seu vídeo nesse caso Incluindo aqui o seu site tá então enfim você pega aí o vídeo que você quiser no caso aqui ó vamos pegar meu último vídeo aqui ó compartilhar copiar ó Copi o link vou vir aqui contol V ó aqui

o vídeo Então vai aparecer aí Beleza deixa eu voltar aqui aí Eita nesse caso bugou tudo aqui vídeo adicionado é o elemento dá umas bugada às vezes tá ó deixa eu tirar aqui que eu não quero aparecer meu vídeo não Tá aqui beleza aqui você configura a hora de início né se você quiser que o vídeo ele comece Em algum momento específico e aqui a de término se você quiser que ele acabe em algum momento específico aqui tem outras opções também que você pode est configurando com por exemplo a reprodução automtica sem som repetir enfim

bem Auto explicativo aqui tá eu vir aqui em sobreposição de imagem e eu ativar essa opção por porque eu quero colocar uma imag sobreposta aqui Do meu vídeo para ele ficar mais bonito Então vou vir aqui nesse caso eu vou colocar essa imagem aqui eu só vou editar ela antes pint ó ela tá no tamanho 4200 por 2800 é um tamanho bem grande tá então eu vou vir aqui em pixels eu vou colocar uns 1000 pixels assim e vou dar um ok ó a imagem ainda tá numa qualidade boa porém diminuiu absurdamente o tamanho ó

vou salvar e agora vou fazer o envio dessa Imagem aqui pro meu WordPress assim vou selecionar e ó agora aparece a imagem então sobreposta aqui daí o usuário vai clicar aqui e vai tocar o vídeo Beleza vou vir aqui em estilo aqui você escolhe a proporção do vídeo então você pode tá mudando aí enfim 4.3 21 por 9 vou deixar assim ó 21 por9 ó Mas é claro que vai variar cada caso é um caso né Aqui tem a opção filtro CSS que você pode tá sei lá alterando brilho aqui Ó o contraste também a

saturação nesse caso saturação assim vou deixar assim mesmo eu vou adicionar assim um pouquinho de brilho aqui para ele ficar mais mais opaco né assim aqui o ícone de reproduzir Ó você pode estar Mudando a cor vamos ver um verde aqui o tamanho assim nesse caso vou Deixar a cor branca ou verde vou deixar uma cor verde tá aqui opção de sombra à Não vou mexer ó então ficaria assim a sessão aí com o vídeo tá o contêiner com o vídeo vamos ver aqui no tablet no tablet Olha só vou seguir um padrão aqui no

tablet tá cadê Aqui ó coloquei 70 aliás vou colocar 50 aqui ó 50 na direita e 50 na esquerda tá então eu vou seguir esse padrão aqui do tablet Vou Manter 100 aqui vai ficar 50 inferior 100 esquerda 100 esse contto aqui eu vou clicar nele direção para baixo desse jeito assim ó no tablet então ficaria assim no celular ó como eu coloquei 50 50 lá ele puxou aqui então no celular eu vou manter sem superior sem inferior esse ícone aqui ele ficou ficou absurdamente grande né Vamos diminuir Isso aqui assim ó vou deixar assim

no celular aliás acho que tá muito espaçamento aqui em cima né Deixa eu zerar esse aqui assim eu vou deixar uns 80 e uns 80 ou até mesmo uns 70 assim para não ficar muito também né V ficar assim então o celular só adicionar aqui um 10 e um 10 aí eh vou clicar nesse texto aqui vou dar uma Margzetta no desktop Beleza vou atualizar aqui ã deixa só voltar aqui pro tablet eu vi que a gente tem um pequeno erro aqui no tablet tá não sei se você percebeu mas ó ele tá com uma

barra Branca lateral ó pode ver aqui nos outros dispositivos ó Isso não tem ó desktop e no tablet tem tá Inclusive tem um vídeo aqui no canal específico né que eu ensina como corrigir isso porém vamos tentar ver na prática aqui o que que é Eu eu vou vir aqui no navegador e ó eu vou ocultar o primeiro contêiner ó ocultei o começo e pode ver que a Barrinha aqui sumiu ou seja esse problema ele tá aqui no começo tá vamos ver ó sumiu ó ele tá nesse nesses contêiners aqui então Ó ó sumiu ó

vi mais aqui pro lado ó é esse contêiner aqui que tá dando erro Tá eu vou clicar nesse contêiner aqui aqui esse que ele tá em 100% ó Vamos diminuir Ó coloquei para 90% ó pode ver que sumiu A Barrinha ó vamos atualizar vou até abrir aqui numa nova guia para você ver melhor Olha só ó no tablet ele abriria assim ó e sumiu a barra Branca ó no celular também não tem nada beleza ã vamos vir mais para baixo aqui e vamos adicionar então mais um contêiner nesse aqui eu quero colocar alguns Box aqui

descrevendo serviços tá ó eu vim aqui preenchimento vamos manter padrões sem superior sem inferior a cor dele aqui Posso deixar esse tom de azul aí eu posso pegar esse textinho aqui ó copiar vou vir aqui vou colar e vou centralizar e aqui vou colocar ser viços e aqui você pode colocar uma lista de serviços enfim o que fizer sentido aí pro seu negócio tá vamos pegar esse outro textinho aqui ó colar vou deixar ele na cor branca assim vou centralizar Vamos diminuir um pouco aí você pode colocar sei lá conheça nossos serviços enfim o que

fizer sentido para você Tá eu vou vir aqui no elementos kit aqui e o elements kit ele tem uma opção de box deixa eu arrastar essa icon Box essa mesma ó eu vou utilizar essa aqui tá antes de eu colocar aqui deixa eu só vir aqui ó no layout vou adicionar um contêiner para cá ó bastante atenção nessa parte tá pessoal para não ã dar erro Tá eu vou clicar aqui nesse contêiner ó eu vou colocar linha horizontal aí eu venho aqui vou arrastar outro contêiner Eu duplico ó e fica vários boxes tá ó só

para exemplificar melhor vou arrastar outro aqui e vou deixar ele normal tá vou vir aqui ó vou arrastar o icon box para cá daí eu posso vir aqui ó arrastar outro para cá e arrastar outro para cá se eu não tivesse feito aquele esquema seria dessa forma assim ó daí se você tenta duplicar ó ele vai duplicando para baixo Tá então por isso que eu ensinei dessa forma ali da esses aqui ó se você quer duplicar para baixo Ó você vem aqui duplica para baixo ó duplica quantas vezes você quiser para est colocando aí as

informações do seu site Beleza você pode vir aqui também ó no coner ó excluir ó deixar dois ó duplicar enfim Aí você faz a gestão tá nesse caso aqui eu vou deixar três né E qual é que é a ideia então aqui ó você escolhe o Icone Zinho ó que você quer aqui você coloca um título né E aqui um pequeno texto então isso aqui é legal para você descrever aí os serviços enfim da sua empresa tá ó você pode deixar aqui o ícone desabilitado ou até mesmo colocar uma imagem né quer colocar uma imagenzinha

vem aqui faz o envio da imagem aqui para o WordPress nesse caso eu vou deixar ícone tá aqui você coloca o título aqui o texto aqui ó você pode habilitar um botãozinho de lei mais aqui Digitar no caso ó lei mais e colocar uma url aí quando a pessoa vem aqui clica em lei mais ela é direcionada pro link que você colocar então sei lá você quer criar várias páginas aí de serviços no seu site né você quer criar uma página específica para cada serviço e você quer que quando por exemplo a pessoa clica aqui

ela seja direcionada para essa página Então você faz nesse esquema você vem aqui nas páginas né Adiciona as páginas e copia né copia os links das Páginas e vai colando aqui enfim vai fazendo conforme a tua necessidade Beleza eu vou deixar sem botão aqui ah vou deixar sem link ó pode ver que quando tem o jogo da velha aqui ó você pode inserir um link tá ó passo o mouse aparece para clicar eu vou deixar sem ó eu passo o mouse não acontece nada tá aqui tem mais algumas configurações Ó você pode habilitar esse efeito

Zinho Hover aqui para aparecer outro ícone nesse caso não vou mexer aqui ó a Posição do ícone você altera também vou deixar assim mesmo aqui o alinhamento do conteúdo ó vou deixar paraa esquerda assim aqui tem essa opção ó vamos ver como que fica legal ó pode deixar ativo aqui você digita o seu textinho tá E aqui em estilo então a gente faz toda a personalização né então aqui é o plano De fundo né Você pode deixar um branco ou mudar para outra cor nesse caso aqui eu vou deixar branco assim aqui não vou mexer

no pading Olha já vem tudo configurado R da borda vou deixar em uns 10 ó para ficar padrão aqui com o botão aliás no vídeo aqui eu esqueci de botar a borda borda raio da borda 10 ó pode ver que ele ficou meio arredondados Beleza deixa eu só excluir aqui não gerar uma confusão aqui ó tô Editando esse aqui tá e conteúdo ó aqui você consegue personalizar tudo então vou deixar aqui na cor preta mesmo aqui a descrição vou deixar aqui na cor preta também o título ó vou configurar aqui a tipografia deixar a fonte

700 peso 700 tamanho 18 assim e a descrição aqui tipografia secundária Beleza o ícone aqui ó vou deixar nessa cor verdinha então o Ícone aqui ó configuro o tamanho Enfim tudo 100% personalizável aqui tem a opção do background ó para você configurar uma imagem ó é legal também né dá para fazer aqui essa tagz inha Ó você pode mudar também como ver aqui plano de fundo vamos ver o que que fica legal fazer aqui ó pode deixar assim ou na cor verde Vou deixar na cor verde tipografia secundário Vamos só diminuir Aqui assim ó então

fiz uma iação rápida aqui e claro que você pode personalizar isso mais a fundo explorar todas as opções ó posso vir aqui ó colar colar decaro que eu clico em cada um e eu edito ó por exemplo lá esse primeiro tá assim esse segundo eu vou vir aqui eu vou mudar o título vou mudar a descrição eu vou mudar aqui o os elementos né o o ícone né esse outro aqui também ó vou vir aqui vou mudar o Ícone aí eu posso pegar aliás esse ícone aqui tá meio estranho vou botar esse aqui ó aí

eu posso pegar ó vi aqui duplicar E mais uma vez tá mudando aqui os ícones né ó colocar aleatoriamente mesmo aqui só para você pegar a visão aí de como que você pode tá ã enfim fazendo tá ó então você vê que fica bem agradável né pro usuário ler as informações bem Claras né o titulo Zinho a descrição e Daí você adapta bem aí a sua necessidade vamos ver aqui no tablet ó no tablet vou fazer assim eu vou clicar nesse contêiner aqui direção para baixo eu vou clicar nesse outro aqui também direção para baixo

aí vai ficar assim no tablet aí eu vou deixar aqui sem pixels 50 sem inferior e 50 na esquerda ó no tablet fica assim então só esse aqui ó eu vou ter que subir um pouco ó para ele ficar mais ou menos na mesma posição aí dos outros Tá vamos ver aqui no celular como que fica Beleza só vou vir nesse contêiner aqui vou zerar esse aqui também vou zerar vou manter 70 superior 70 inferior 10 na direita 10 na esquerda ó fica mais ou menos assim então para esse que eu vou zerar também aqui

assim e esse aqui eu vou zerar também ficar assim então no celular Vamos botar tá aqui 420 ó na maioria dos celulares vai abrir exatamente dessa maneira assim então o nosso site beleza ó no tablet tá assim e no desktop tá assim Vou atualizar Vamos abrir aqui uma nova guia para ver como que tá ficando ó beleza tá ficando assim então o nosso site próximo contêiner aqui o V clicar no maizinho vou selecionar esse contêiner aqui ó com dois lados né um do lado do outro dois contêineres vamos Colocar aqui uma uma parte aqui que

fala então sobre a empresa né então aqui a gente já deu a apresentação aqui teve um videozinho da apresentação aqui uma descrição dos serviços Vamos colocar agora aqui uma imagem e Um textinho aí de sobre a empresa tá como que a gente vai fazer isso já vou colocar aqui 100 pixels superior 100 pixels inferior o layout a gente mantém aqui 110 né enfim para manter padrões vamos pegar alguma imagem Aqui deixa eu ver pode ser essa imagem aqui eu vou abrir ela aqui no pint tá vou editar no pint mesmo aí você pode seguir aí

editando no pint igual tô fazendo ou editando lá no fotopia Beleza eu vou colocar ela mais assim na vertical mais ou menos assim deixa eu ver o tamanho dela aqui ó ela tá num tamanho absurdamente Grande Ó 3792 vou colocar aqui em pixels horizontal uns 600 tá Assim ó ela fica desse jeito assim então posso até diminuir mais um pouquinho aqui beleza assim ó ela vou voltar aqui então vou arastar uma imagem para cá e vamos pegar essa imagem aqui então do meu computador vamos arrastar para cá WordPress selecionar Beleza vou pegar essa imagem aqui

também e vou adicionar uma bordinha aqui de uns 10 pixels para ela ficar arredondada Opa aqui não ficou não peraí eu vou zerar Aqui eu vi aqui em estilo aqui ó 10 pixels Agora sim ela ficou arredondada né daí a gente mantém esses padrões aí de 10 pixels de arredondamento claro se você quiser você deixa quadrado mesmo né e isso vai variar muito dependendo aí do estilo do site né às vezes é um site mais sério talvez advogado né É legal deixar tudo quadrado né enfim vai variar muito da identidade visual e tal tá ó

vou pegar esse textinho aqui ó vou copiar vou vir Aqui vou colar vou alinhar aqui paraa esquerda e aqui eu vou botar sobre e daí vai ser sobre a empresa tá posso pegar esse outro aqui também copiar deixa eu ver não esse outro aqui ó copiar ó aí você vê que quando os textos já estão formatados né fica muito mais fácil para você tá fazendo a gestão né ó pegar esse outro aqui vou vir aqui vou colar só vamos pegar aqui um texto maior ó vou vir aqui vou colar o texto posso até Duplicar ó

para dar uma quebra de linha tá vou até duplicar não aqui eu vou colocar um botão acho ao inv vez de eu duplicar vou pegar esse mesmo botão aqui ó vou copiar vou vir aqui e vou colar esse botão ã vou vir aqui nesse contêiner também e eu vou adicionar uma margzetta poque contraste saturação enfim você pode fazer uma edição aqui beleza aqui também ao passar o mouse Ó você pode mudar opacidade Enfim fazer Algumas configurações aí inclusive animação aí você vê o que faz sentido para você beleza vamos ver aqui no tablet no tablet

eu vou clicar aqui no contêiner eu vou colocar a direção para baixo e esse contêiner aqui ó eu vou zerar essa margem vou vir no layout e vou botar ele 100% desse jeito assim e esse outro aqui também eu vou clicar nele 100% eu vou vir aqui nesse Contêiner eu vou manter 100 aqui eu vou botar 50 inferior 100 e aqui 50 na esquerda Deixa eu só ver uma coisa aqui se consigo aumentar é consegui ó deixar a imagem um pouco maior beleza ó fica uma visualização aí bem agradável tá ficando assim então no tablet

aqui no celular vamos arrumar aqui eu vou manter o 70 superior o 70 inferior um 10 na direita um 10 na esquerda e fica desse jeito assim então No celular esse texto aqui ó vocês lembram que antes eu tinha colocado uma margem nele né ele copiou junto à margem nesse caso vou deixar assim essa margem e ficar assim então no celular beleza vou vir aqui eu vou atualizar eu vou adicionar aqui mais um contêiner né ã posso pegar esse aqui ó com quatro e aqui eu vou colocar alguns contadores Tá como assim já vou Mostrar

para você ó vou vir aqui em estilo primeiro colocar nessa cor aqui a margem eu vou colocar 50 em cada um porque esse contêiner aqui ele vai ser um pouco menor aí que os outros tá aí eu venho aqui ó e eu acho a opção de contador ó Isso aqui é legal para você colocar alguns números da empresa né Então pode ver que aqui começa no zero e vai até o 100 né então por exemplo Ah você pode colocar ali sei lá tantos Pedidos feitos tantos clientes satisfeitos ã tantos anos de experiência enfim o que

fizer sentido aí pro seu modelo de negócio tá nesse caso eu vou deixar padrãozinho assim ó mas você pode estar alterando Ó você altera aqui os números aqui o prefixo o sufixo a duração da animação e o título ó que é esse número legal aqui nesse caso eu vou deixar assim mesmo e eu só vou mudar aqui a cor desse dessas escritas né vou deixar Aqui ã deixa eu ver a minha fonte primária Vamos aumentar um pouco aqui para 56 não aumentar um pouquinho mais 72 assim e o título aqui ó Já puxou a minha

fonte secundária e nesse caso vou deixar a cor branca desse jeito assim aí você pode só pegar aqui ó copiar e colar nos outros daí você clica no caso nesse segundo vem aqui e faz a edição né E vai editando eles aí conforme a sua necessidade Beleza eu vou colocar também alguma imagem de fundo aqui para ficar mais bonito posso vir aqui em sobreposição de fundo ó escolher uma imagem vamos pegar aqui do meu computador vou pegar essa aqui ó Esses prédios Vamos abrir aqui no P vamos editar ela rapidamente aqui pixels 1920 tá pessoal

porque ela vai ficar aí de fundo Beleza vou salvar ela eu poderia reduzir aqui o tamanho dela mas nesse caso eu já vou deixar Assim porque eu posso reutilizar ela aí em mais contêiners depois ali do meu site Beleza então vou pegar ela aqui ó eu vou arrastá-la para WordPress vou clicar aqui então em selecionar ó já apareceu a imagem ali vou deixar aqui resolução completo posição vamos ver o que vai ficar legal aqui superior ao centro assim tamanho eu vou deixar hã cobertura e vou ajustar aqui a opacidade Ó vou deixar assim mais ou

menos ó ficando dessa maneira assim Então beleza vamos ver aqui no tablet ó fica assim não vou mexer e no celular fica assim não vou mexer também vou atualizar aqui pra gente não perder aí o nosso Progresso né e agora eu vou adicionar aqui mais um contêiner e eu vou colocar alguns depoimentos aqui então Ó 100 pixels superior 100 pixels Inferior deixa eu ver o que eu posso fazer aqui vou pegar esse textinho pronto vou colocar aqui depoimentos é interessante né independente aí do seu negócio ter depoimentos no seu site pode ser depoimentos em inscrito

pode ser prints de WhatsApp pode ser vídeos de depoimentos nesse caso aqui eu vou colocar depoimentos por escrito tá Porém você é livre para colocar o que vai se adaptar melhor para você beleza ó posso arrastar Um contêiner para cá clicar nesse contêiner e fazer aquele mesmo esquema ó direção horizontal eu venho Coloco os outros contêiners e duplico e aqui ficou três Box então né e cada um desse desses boxin aqui eu vou personalizar eu vou vir aqui ó eu vou arastar uma imagem vamos pegar aqui do meu computador uma imagem vou pegar essa aqui

por exemplo ó essa imagem Ela tá no tamanho 262 por 262 pixels tá ó eu vou pegar ela Aqui eu poderia até dimensionar ela no pint um pouquinho menor nesse caso eu vou deixar o tamanho 100 pixels e eu vou vir aqui em raio da borda e eu vou arredondar a borda dessa imagem para ela ficar Redonda ó tá Redonda agora eu vou vir aqui vou pegar mais um texto aqui enfim pode ser qualquer um desses tá pegar esse aqui eu vou colocar embaixo e aqui seria como se fosse aí o depoimento da pessoa né

Deixa eu só Reduzir aqui para não ficar muito grande né deixar assim mais ou menos para não ficar algo muito aí extenso né eu vou deixar alinhado pra esquerda ó para ficar padronizado ali com aquele outro tá com os Box ali dos serviços ainda aqui eu vou colocar um Itálico também para diferenciar Posso duplicar aqui ó e aqui embaixo eu posso colocar como se fosse o nome da pessoa tá ó deixa eu ajustar Aqui assim ã vou vir aqui também vou pesquisar por star ó vai aparecer essa opção aqui de classificação ó e aparece as

estrelinhas Central alinhar aliás essa imagem para a esquerda ó e fica assim então o que seria um depoimento tá aí você pode estar pegando e fazendo aí Quantos você quiser vamos vir aqui em borda ó vou colocar uma sombra na caixa assim deixa eu só ajustar melhor isso Vou colocarla mais de leve assim vin avançado preenchimento eu vou colocar aqui uns 50 pixels assim e eu quero ajustar também a borda né colocar aqui uns 10 pixels ó ficaria assim então um depoimento e eu posso pegar né Ó vou excluir esses outros contêiners aqui ó e

vou duplicar e vou duplicar e eu venho aqui e eu apenas altero a foto ó deixa eu arrastar essa outra foto para Cá selecionar esse outro aqui el Claro você digita aí o depoimento da pessoa enfim hã aqui é legal você não colocar também depoimentos muito grandes tá textos muito extensos né até para não ficar cansativo né aí pro pro usuário Então pode ver que aqui eu eu coloquei ó uma duas 3 4 5 ó tá padrãozinho cinco linhas em cada um tá então é legal até que você siga esse padrão para não quebrar muito

o layout né porque por exemplo pensa que Nesse último aqui ó você vai colocar um depoimento maior ó olha só o layout quebra não fica legal né então é legal manter aí Alguns padrões Ah você quer colocar prints do WhatsApp ou prints de rede social você pode vir aqui Pesquisar por Carrossel de imagens arrastar um Carrossel de imagens para cá você vem aqui ó e você seleciona várias imagens para esse Carrossel e as imagens ficam passando em Carrossel tá você coloca aqui tamanho completo aqui Você vai escolher Então as opções né quantos slides vão exibir

os slides que vão rolar enfim você consegue fazer também Essa gestão beleza Ah você quer adicionar vídeos você pode pegar aqui ó deixa eu só excluir aqui para ficar melhor vou excluir vou excluir vou adicionar outro contêiner aqui vou duplicar e vou duplicar você quer adicionar vídeos ó pega e arrasta os vídeos para cá assim um do ladinho do outro né para não ficar muito grande não Ficar algo muito invasivo aí nos seu site e coloca os vídeos de depoimentos beleza Ah você aqui é mais depoimentos Como Eu Fiz antes ó vem aqui duplica e

vai duplicando tá nesse caso eu vou deixar três depoimentos aqui porque eu acho legal não fica muito enfim muita coisa tá eu vou clicar nesse container aqui eu vou colocar para baixo ele também eu vou vir aqui ó vou manter 100 Pixel superior no Tablet 50 100 50 desse jeito assim Então tá ficando no tablet o nosso site no celular vamos ajustar aqui ó ele já puxa né a quantidade que eu botei no tablet ele já puxa no celular então vamos ajustar aqui manualmente 70 70 10 e 10 assim aí fica uma visualização bem bem

legal né sempre gosto de olhar bastante os sites né porque às vezes a gente coloca alguma coisa que não não fica tão agradável né então a gente vai alterando mas a Princípio é isso então vou atualizar aqui beleza eu vou clicar aqui no maizinho aliás eu vou pegar algo que eu já tenho pronto aqui pode ser essa parte aqui ó vou copiar vou vir aqui vou colar e aqui eu vou colocar mais um pouquinho de texto né eu vou pegar ã pode ser esse texto aqui ó vou copiar vou vir aqui e vou colar colocar

aqui por exemplo ã saiba mais isso aqui seria como uma chamada para ação tá pessoal deixa eu Colocar aqui na cor branca vamos centralizar aqui ó então tenho um texto mais um pouquinho de texto e vou colocar mais um botão também pode ser esse aqui copiar vou vir aqui colar o botão e vamos centralizar seria uma enfim chamadinha para ação aí convidando a pessoa para entrar em contato com texto aqui convencendo na a pessoa né usuário aí do site eu posso vir aqui também nesse contêiner se eu quiser e ó diminuir um pouco a largura

tá vou Colocar um 900 aqui porque ó entre ele ficar mais esticado e mais compacto acho legal ele mais compacto porque facilita a leitura beleza pessoal vamos ver aqui ó no tablet já tá automaticamente configurado o celular também só tirar essa margem aqui aí tá ficando assim então no celular Vou atualizar aqui e agora vou adicionar mais outro Contêiner aqui E esse aqui eu vou colocar o formulário de contato então Ó vou clicar aqui dois lados 100 pixels superior 100 pixels inferior eu posso reutilizar e esses elementos aqui né então vou vir aqui ó vou

colocar aqui contato aqui Mais Um textinho Aí você coloca enfim o seu texto entra em contato agora enfim colocar aqui também Uma uma descrição Zinha para ficar bonito né colocar menor aqui assim Beleza vou atualizar aqui e agora a gente vai colocar aqui um formulário de contato tá então para isso eu vou voltar aqui no painel do WordPress né e eu tenho a opção do metform né que é o plugin que a gente instalou antes ali que é do formulário eu vou clicar aqui no metform e ó ele é ele é feito pelo mesmo desenvolvedor

do elementos kit tá Então a gente vai clicar em próximo aqui ó para ele liberar aí as funções do Plugin e tá aqui então o painelzinho do metform eu posso vir aqui em Formes e aqui eu não tenho nenhum formulário e aqui agora eu posso criar então um formulário vou clicar aqui em Adicionar novo colocar aqui forme mesmo isso aqui não vai ã interferir em nada tá pessoal isso aqui é só para você reconhecer o nome do seu ã formulário né Afinal você pode criar vários formulários e daí por Exemplo lá na página inicial do

seu site você vai colocar um formulário principal de contato aí você pode ter outro formulário na página ali de trabalho conosco e assim por diante tá você consegue fazer vários formulários Então você identifica o formulário aqui com o nomezinho Para você reconhecer ele tá no meu caso eu só vou ter um formulário mesmo aí no site inteiro Então vou colocar form mesmo vou vir aqui em editar form e aqui olha só que legal Abre o elemento então aqui a gente consegue fazer as edições né a gente consegue criar o formulário tá Então olha só como

que a gente vai fazer isso tá a gente vai adicionar aqui como se fosse um contêiner mesmo ó e daí você vem aqui ó em vez das opções lá do elemento vão aparecer as opções aqui do Mat form então por exemplo eu posso adicionar aqui um pouco de texto ó o que que seria esse texto seria o nome da pessoa aqui no Label eu vou colocar nome Né E aqui no place holder eu vou colocar por exemplo assim ó digite seu nome ó aqui a gente tem algumas configurações recomendo você deixar ativado essa opção de

obrigatório ou seja vai ser obrigatório pro usuário digitar o nome dele no formulário eu vou vir aqui em estilo e vamos ajustar aqui essa tipografia tá ó vamos colocar aqui a tipografia secundária aí melhorou Ah aqui também tipografia secundária em todos e ó é um formulário então que o Usuário vai vir aqui e vai preencher tá ã Deixa eu voltar aqui beleza pedi o nome do usuário agora eu quero pedir o e-mail do usuário ó vou arrastar e-mail para cá aqui embaixo ã Vou colocar aqui digite seu e-mail assim e vou deixar também obrigatório eu

posso pegar aqui ó esse essa primeira camada né copiar vi aqui e colar o estilo então fica nome e-mail Lembrando que aqui você consegue fazer Mais personalizações tá você consegue vir aqui personalizar a cor aqui as bordas a margem tá toda essa personalização Beleza vou deixar padrãozinho assim mesmo nome e-mail telefone ó vamos arrastar o telefone para cá vamos colocar aqui telefone e aqui em Place Holder digite seu telefone ou seu WhatsApp enfim como você preferir vamos deixar Obrigatório também porque se você não deixa obrigatório o usuário ele pode enviar o formulário a em branco

tá isso acontece muito então deixa sempre tudo obrigatório e vamos colocar aqui também a mensagem ó mensagem aqui ó ó Digite sua menagem isso claro se você quiser né que usuário Mande uma mensagem para você se você quiser por exemplo Ah só captar O o e-mail dele o nome né você deixa só as camadas aí que você quer Beleza vamos Copiar aqui colar beleza ó nome e-mail telefone mensagem vou deixar assim mesmo mas você pode estar explorando aqui e colocando mais opções beleza e claro a gente tem que colocar aqui o principal que é o

botão né então vou arrastar o botão para cá porque daí sem o botão não tem como o usuário mandar a mensagem vou deixar el em alinhado aqui para a esquerda Vamos colocar aqui Enviar mensagem assim deixa eu ver se eu Consigo adicionar um ícone nele aqui do WhatsApp aí beleza vamos só ajustar aqui ó tipografia secundário peso 700 tamanho 18 né ficar padrãozinho com os outros lá aqui no pading também ó vou colocar 20 70 20 e 70 eu não lembro se eram ess essas esses os tamanhos exatos né que eu coloquei lá mas eu

acho que é assim tá mas enfim tente manter um padrão né E aqui plano de fundo V colocar na cor verde e aqui no Rover o plano de fundo Eu vou ter que abrir de novo aqui a home só para mim pegar o Tonzinho de verde ó isso aqui quando passa o mouse ó aqui ó esse aqui ó vamos vir aqui vamos copiar esse código aqui no Rover ó vou dar um cont control V aqui assim ó aí perfeito borda que tá cinco eu vou colocar 10 aí agora sim o botão ele ficou Igual aqui

ó entra em contato enviar mensagem nossa nesse caso aqui eu viajei na maionese né Eu não sei porque que eu coloquei um botão do WhatsApp aqui enfim eu vou colocar uma flechinha viajei na maionese tá inserir aí agora sim ó não tem nada a ver o botão do WhatsApp ali né o WhatsApp é nos outros esse aqui é para usuário m d o formulário Vou atualizar o sal vai fechar e aqui então você já tem um formulário E como eu falei você Consegue criar vários formulários aqui e fazer a gestão deles e editar eles tá

vou vir aqui em Andes e que que acontece toda vez que você tiver um formulário aí no seu site e o usuário lá e preencher o formulário você vai estar recebendo os dados do usuário aqui ó então aqui vai aparecer uma lista né de de cada vez que uma pessoa Enviar mensagem para você vai aparecer o nome da pessoa e mail o telefone a mensagem vão aparecer tudo aqui beleza vou vir aqui em settings Também aqui tem algumas opções né Deixa eu ver aqui você consegue integrar com o recapita e o meil shimp tá então

se você quiser fazer talvez campanhas aí de e-mail marketing né enfim algo mais avançado você consegue vir aqui ó e colocar a api do meio shimp tá ele fazer essa integração Beleza deixa eu ver mais mais uma vez aqui informes vou clicar em editar aqui ó aqui tem algumas configurações bem legais também então aqui tem o título do formulário né como A gente já viu não vai interferir em nada e aqui a mensagem de sucesso tá então aqui eu vou colocar em português Ó Obrigado pelo seu contato assim aí você pode colocar retornaremos em breve

e tal tal aqui tem algumas opções vou ir mais para baixo aqui não vou mexer h mais importante aqui seria essa aqui do redirecionamento né então aqui que que você pode fazer você pode direcionar usuário depois que ele preencheu o seu formulário e clicar No botão de enviar mensagem né Por exemplo Ah você quer que depois que o usuário envie mensagem ele caia numa página de Obrigado por exemplo você vai colocar o link da página de Obrigado aqui ou por exemplo você quer que sei lá usuário ele caia no seu WhatsApp você vai colocar o

link do WhatsApp aqui tá nesse caso eu vou colocar sem direcionamento mesmo Vou salvar aqui beleza agora a gente vai voltar aqui ó deixa eu fechar essa guia Aqui essa aqui eu vou fechar também a vai voltar aqui nas páginas vamos na página inicial aqui e eu vou editar aqui com elementor Ó você vai vir aqui aqui nos elementos então ó a gente tem os elementos a gente vai achar a opção de Mat for ó que vai est aqui no finzinho tá vou arrastar o Mat form para cá Edit form tá aqui ó form o

nome que eu dei lá Edit form ó aqui você pode enfim alterar o formulário aí se você quiser salvar e Fechar e aqui então está o formulário no nosso site tá vamos só ver aqui como que ficou tablet tablet eu vou deixar assim ã 100% esse aqui também vai ficar em 100% eu vou manter aqueles mesmos padrões ali assim então fica o nosso formulário e no celular ficar assim então deixa eu zerar esse contêiner Aqui ó fica assim então no celular fica uma visualização bem legal aí bem agradável Tá beleza vou atualizar aqui V abrindo

uma nova guia ó tá assim então o nosso site aí o usuário vai estar aqui ele vai vir aqui vai colocar por exemplo Ah o nome Opa aqui eu esqueci de configurar pera aí vai colocar aqui o e-mail ó teste @email.com tá vai colocar aqui o Telefone vai colocar aqui uma mensagem e vai clicar em enviar ó Obrigado pelo seu contato Tá agora você vai vi aqui no painel do WordPress Mat form entries e tá aqui ó ó viu tá aqui ó teste teste @ email telefone mensagem teste tá então como eu falei vão aparecer

todas aqui essas informações tá deixa eu só vir aqui no formulário eu esqueci de personalizar a mensagem que dá aqui ó quando o usuário não preenche né quando ele deixa em Branco ficou a fonte ã primária ali puxou automaticamente né vamos ajustar isso aqui rapidinho Label aqui ó tipografia secundário aqui não tem mais que mexer vamos copiar aqui ó copiar colar estilo colar estilo e colar estilo eu vou salvar aqui eu salvando aqui não precisa eu me lá na página do elementor tá ele vai atualizar automaticamente tá vou vi aqui Ó ó agora sim apareceu

pequeno ali né e não apareceu daquele tamanho absurdo beleza só para finalizar aqui então a nossa home né a nossa página inicial eu vou adicionar aqui também um o mapa né do Google Maps claro que essa etapa aí é opcional né Ó vou vir aqui vou adicionar o contêiner tá vou vir aqui ó e tem essa opção de Google Maps tá então eu vou arrastar para cá o Google Maps obviamente se você tem uma empresa aí enfim um negócio virtual né somente Virtual não faz sentido você colocar o Google Maps porém muita gente tem negócio

físico né queer colocar o endereço então para colocar o endereço é só você arrastar o Google Maps e aqui em localização você vai colocar exatamente o seu endereço tá então você vai colocar aí o nome da sua rua o seu bairro a sua cidade o país enfim é só colocar o endereço aqui que ele vai puxar automaticamente tá não tem erro nesse caso aqui Ó olha olha só esse contêiner aqui ele tá em0 nesse caso esse aqui ele vai ser diferente porque eu vou colocar ele largura total e vou dear 100% ó e DAE vai

ficar 100% aí do tamanho da tela Beleza eu vou pegar aqui também deixa eu ver aqui ó zerei ó pode ver que saiu as margens e fica assim então o Google Maps Beleza deixa eu clicar nele aqui aqui você ajusta o zoom ó se você quiser aproximar mais e aqui a Altura também você ajusta Beleza vou deixar assim mesmo vamos ver aqui no responsivo ó no tablet e no celular aqui ele já tá certinho beleza vou clicar em atualizar aqui ã uma coisa legal agora também que a gente pode fazer é colocar algumas animações aí

na nossa página inicial Tá colocar algumas animações aí para ficar mais bonito mais chamativo o nosso site né Então como que a gente faz isso Ó eu Vou subir até em cima aqui e eu vou vi nesse contêiner aqui mas isso aqui você pode fazer em qualquer elemento tá você pode fazer no contêiner inteiro você pode fazer no texto no botão em qualquer elemento eu vou pegar o contêiner inteiro Olha só vou vir aqui em avançado efeitos de movimento e aqui tem essa opção animação de entrada ó e aqui você pode selecionar alguma animação né

para quando o usuário ele tá entrando no site D essa animação ó nesse caso eu vou Deixar assim ó para ele vir aqui da esquerda ó eu posso vir aqui ã pegar esse outro contêiner vir avançado eit feit de movimento e colocar uma animação nele também ó assim Vou Colocar assim esse vídeo aqui também avançado animação vou deixar assim e assim você vai fazendo então aí com todos os elementos ó esse aqui vou pegar o Contêiner inteiro por exemplo ó feito de movimento animação Ó tem várias animações né claro que algumas são mais legais aí

outras ficam talvez muito evasivas né V Colocar assim ó para mim da direita Vamos colocar algumas animações aqui também assim esse aqui vou colocar para vi assim enfim tô colocando tudo mais aleatoriamente aqui tá mas aí você vai fazer aí obviamente o que vai ficar mais legal Para você o que vai se encaixar mais na sua cidade né E essas animações aí são bem legais aqui no mapa não vou colocar animação ó vou atualizar e agora vou abrir uma nova guia e agora você vai ver as animações tá ó aí ó pode ver que já

deu um toque né no no site enfim deu um charme a mais essas animações tá ã outra coisa que eu quero fazer aqui também é adicionar um botão de voltar ao topo né aí toda vez que o usuário ele vem até o final do site aqui aqui Aparece o botãozinho de voltar ao topo né ele clica e o site rola até o topo tá Então como que a gente faz isso a gente vai instalar mais um plugin para fazer isso vou vir aqui no painel do WordPress eu vou vir em plugins adicionar plugin vou pesquisar

por WP front desse jeito assim e eu vou instalar esse plugin aqui ó WP front screw top tá vou clicar em instalar Inclusive tem outro vídeo aqui do canal aí que eu ensinei como instalar esse Plugin né mas eu vou fazer rapidamente aqui beleza vou vir aqui nos plugins instalados aqui ó quando você vem aqui no nos plugins instalados ó aparece a opção então daí você pode estar clicando aqui em settings né configurações ou você vem aqui no WordPress ó configurações e vai aparecer essa opção então aí com o plugin adicionado tá Primeira coisa eu

vou deixar habilitado esse botãozinho de voltar ao topo ele vai aparecer no site inteiro beleza essa Opção de JavaScript aqui é para melhorar o desempenho então vou deixar habilitado também mas caso ocorra algum problema aí você pode deixar desabilitado beleza essa opção aqui de screw offset é o momento em que o botão de voltar ao topo vai aparecer Ou seja quando eu rolar a página sem pixels para baixo já vai aparecer botãozinho de voltar ao topo nesse caso eu vou deixar padrão assim o tamanho eu vou deixar padrão também a opacidade que tá em 80%

posso Deixar 100% aqui tem algumas opções de animação e tal duração da animação vou mais para baixo aqui eu vou deixar essa opção já selecionada As Margens aqui eu vou deixar 20 pixs e 20 pixs e aqui você vai escolher o botão então aí pro usuário clicar e voltar ao topo nesse caso eu vou selecionar esse aqui ó caso você não não quer usar nenhum desses aqui você pode pegar selecionar essa opção aqui URL personalizada e colocar a URL aí de algum botão para aparecer vou deixar esse aqui ó vou salvar as as alterações vamos

voltar aqui no nosso site ó não tá aparecendo nada vou rolar para baixo ó já apareceu aqui o botão ó vou rolar lá embaixo ó o usuário quer voltar pro topo ó clica ele volta para o topo Beleza vou voltar aqui então no meu painel do WordPress agora vou vir em páginas todas as páginas e agora vamos fazer então a criação aqui das outras páginas beleza a Criação não né a personalização Afinal criadas aqui Elas já estão ó olha só o que eu vou fazer então vou pegar a página de home aqui eu vou clicar

em editar com elementor só que eu vou abrir numa nova guia Tá o que que a gente vai fazer então vai est abrindo aqui o elementor e uma guia aqui do nosso navegador beleza aqui a gente já tem todos os elementos e tal tudo bonitinho tudo formatado AD tá agora eu vou digitar primeiro aqui a página de sobre Por exemplo vou vir aqui na página de sobre Aliás a contato a contato que é a primeira aqui ó vou clicar em editar editar com elementor E aqui nessa outra guia continua aberta a página de home tá

eu vou vir aqui colocar elementor largura total e agora o que que a gente pode fazer para economizar o nosso tempo e ao mesmo tempo para manter padrões aí eu posso pegar qualquer elemento daqui ó vou vir aqui vou copiar vou vir aqui e vou colar ó eu posso colocar aqui aí eu Posso tá botando aqui só o nome da página então aqui ó ã contato outra coisa que eu vou fazer aqui também é clicar nesse contêiner e diminuir aqui essa essa altura né Ó vou deixar por exemplo assim ó 30% tá mas aí você

regula enfim da maneira que você achar melhor tá aí como essa aqui ela é uma página aí de enfim de contato eu vou colocar o formulário nela ó Então vou vir aqui vou pegar o formulário vou copiar vou vir aqui vou Colar o formulário vou pegar também aqui os Maps vou vir aqui Opa aqui e vou colar os Maps e olha só tá pronta a página de contato em que questão de segundos aí né Aí eu posso vir aqui também e trocar a imagem né colocar outra imagem diferente vamos pegar essa aqui por exemplo ó

vou abrir aqui no P mesmo vou dimensionar ela 1920 tá aqui vou salvar Ela e agora vou pegar eu vou enviar ela aqui pro meu WordPress né beleza e daí o que que você pode fazer né seguindo essa mesma lógica cada página aqui do seu do seu site você pode tá colocando uma imagem diferente né para não ficar tudo ali padronizado tudo igual né ó no tablet fica assim né já tá formatado né configurado e aqui no celular eu vou diminuir também ó ó fica assim então no celular deixa eu colocar uns 30 aqui no

celular também ó fica Assim no celular a página de contato bem claro que você pode personalizar ela mais né enfim o site é seu você pode adicionar mais contêiners aqui adicionar mais informações enfim o que fizer sentido para você aí pro seu negócio enfim pra sua empresa ó vou clicar em atualizar aqui vamos abrindo uma nova guia ó tá assim então a página de contato aí a página de home página de contato e deixa a gente pega agora a gente repete esse mesmo Processo com as outras páginas ó posso até deixar aberto aqui o contato

deixa eu dar um Ctrl C aqui no meu WP AD mim vou abrir aqui ó ã contato já já vou ã ensinar para você também como criar a página aqui de política de privacidade e termos de uso tá vou vir aqui na página de serviços ó vamos editar editar com elementor deixa eu arrastar ela para cá assim ó seguindo a mesma lógica então ó elementor largura Total vou pegar aqui ó Opa esse contêiner aqui não tô conseguindo copiar ele pera aí deixa eu recarregar aqui porque eu não tô conseguindo copiar deu alguma interferência aqui aqui

agora sim ó copiar vou vir aqui colar no caso essa aqui página serviços Ó daí eu posso vir aqui na página inicial e colocar as informações aí que eu quiser ó posso pegar aqui os serviços por exemplo ó Copiar aqui colar nesse caso aqui para dar uma uma quebra aqui né colocar uma cor branca assim vou excluir aquias opções esse bozinho Deixa eu ver se eu consigo adicionar aqui uma sombra assim ó ó daí você pode vir aqui como é uma página específica de serviços você colocar mais textos né deixa eu pegar mais texto aqui

ó copiar ó vou vir aqui e vou colar de uma página que você vai descrever mais aí os serviços né E você pode fazer aquele Mesmo esquema Ah você quer que cada bozinho aqui tem um botão você pode vir aqui e habilitar o botão pro usuário clicar a pro seu WhatsApp ou enfim clicar aí pra página de contato enfim adaptar isso aí à sua necessidade tá eu vou clicar nesse container aqui também ó vou botar ele para baixo e agora eu posso estar duplicando aqui ó para baixo né como é mais conteúdo ó assim e

assim então aqui você vê que fica uma página mais Completa aí de serviços tá outra coisa que eu posso fazer aqui também que é interessante você fazer eu vou copiar essa essa chamadinha para ação e vou colocar aqui também eu vou pegar o formulário ó vou copiar vou vir aqui e vou colocar aqui também tudo isso pro usuário ele ter um direcionamento melhor né então que você personaliza da forma que você achar melhor Ah você quer colocar vídeos imagens enfim você faz da maneira que Você quiser beleza ó posso vir aqui atualizar vou voltar aqui

nas páginas todas as páginas então contato já foi home serviços página de sobre ó vamos editar e vamos fazer o mesmo processo elementor largura Total aqui ó copiar aqui a página de sobre nesse caso eu deixei imagens iguais aqui tá mas como eu falei aqui ó aqui e aqui deixei imagens iguais mas como eu falei é recomendado que cada enfim cada página Você troca a imagem aí para ficar mais diferente né não ficar tão parecido né aí aqui ó posso pegar colocar até esse mesmo vídeo aqui ó esse vídeo de apresentação da empresa e tal

ó posso vir aqui copiar ó colocar essa outra sessão aqui né esse outro contêiner nesse caso aqui posso vir aqui ó zerar o espaçamento para ele ficar mais padronizado ó Então tá aí a página de sobre e daí você pega e você vai adicionando mais informações enfim e vai Configurando tudo vamos ver aqui como é que tá ficando no tablet fica assim no celular fica assim então tem o botão aqui né pra pessoa enfim entrar em contato vamos atualizar aqui assim Vamos acessar aqui o nosso site ó página inicial página de serviços página de sobre

página de contato agora vamos vou Mostrar para você agora Como que você faz para gerar esses textos aqui de política de privacidade e termos de uso beleza e para fazer isso Então na verdade tem vários sites aí na internet que você consegue fazer né ou seja gerar esses textos automaticamente e de graça tá inclusive tinha um vídeo aqui no meu canal Deixa eu ver se eu acho esse aqui ó como gerar páginas de política de privacidade e termos de uso para para Site WordPress tá que que acontece então eu fiz esse vídeo aqui ó faz

seis meses atrás utilizando aí uma ferramenta gratuita da internet né só que essa ferramenta ela simplesmente não existe mais né atualizou então no momento que eu tô gravando esse vídeo hoje eu vou utilizar essa ferramenta aqui ó esse site aqui esse que o gerador de termos de uso e esse aqui é o de política de privacidade tá você pode estar copiando aqui esse mesmo site ó pesquisando no Google tá e utilizando ele Talvez você vê esse vídeo no futuro e essa ferramenta não tiver mais disponível você vai lá no Google e você pesquisa gerador de

termos de uso gratuito e gerador de política de privacidade gratuito tá essas ferramentas elas vão funcionar bem semelhantes Beleza então olha só vou gerar por exemplo aqui o termos de uso tá vamos botar aqui nome da sua marca Vou botar aqui Canal aprendendo sites tá vou colocar só como exemplo mesmo beleza aqui o meu link ó vou copiar V aqui vou colar o link aqui o e-mail eu vou deixar desmarcada essa opção aqui porque eu não tenho loja nem nada nessa plataforma vou desmarcar essa opção vou clicar aqui em gerar texto ó aqui já gerou

automaticamente o texto então ó os termos de uso canal aprend sites T ó tá aqui todas as informações Então esse texto també ele foi enviado aí pro meu e-mail Então posso vir aqui ó copiar esse texto né E daí eu venho aqui deixa só fechar essas aqui essas Abas para ficar melhor vou vir aqui n Minhas páginas todas as páginas termos de uso n editar editar com elementor vamos vir aqui elementor largura Total vamos adicionar um contêiner aqui ó vamos arrastar um texto Para cá vou vir aqui dar um cont control V nesse caso ele

ficou inteiro Deixa eu ver se eu consigo corrigir ele um cont control V assim ó ó tá aqui então os termos de uso do meu site ó deixa eu vir aqui em cima assim agora eu venho aqui eu ajusto a fonte ó secundário beleza eu só abrir mais uma vez aqui o WP Todas as páginas contato eu quero copiar a primeira sessão aqui só tá primeiro contêiner aqui ó vou copiar V aqui vou colar termos de uso vamos só dar um espaçamento aqui sem superior sem inferior ó tá aqui então a página de termos de

uso do meu site Opa Que foi 10 é 100 aí vamos ver aqui no Tablet V deixar em 100 50 100 50 assim no tablet aqui 70 10 70 e 10 e assim no Celular Vou atualizar voltar aqui no meu minha página inicial né vamos rolar nosso site aqui até o final então e tá aqui ó ã termos de uso ó vou clicar aqui beleza abriu a página de termos de uso daí você faz esse mesmo processo com a política de privacidade beleza no caso aqui ó política de privacidade ela pede o CNPJ tá eu

não sei se você tem CNPJ se você não tem né CNPJ você tem como fazer aqui com o CPF tá mas caso não dê com essa ferramenta você pode estar Pesquisando no Google gerador de política de de privacidade gratuita e você acha aí facilmente outras ferramentas que fazem essa função tá nesse caso não vou gerar aqui porque eu já gerei ali só para mostrar para você mesmo como exemplo tá próximo passo agora eu vou vir aqui no meu painel do WordPress eu vou vir aqui em aparência personalizar e você pode ver aqui onde eu tô

com meu mouse ó que tá aparecendo O logotipo do WordPress né isso aí provavelmente vai aparecer aí no seu site também Então nesse caso a gente quer mudar ISO né Deixa eu até fechar aqui essas outras Abas para ficar uma visualização melhor aqui pra gente ó fechar todas aqui ó tá WordPress no caso a gente quer que apareça o quê o nosso logotipo né e como que a gente faz isso vou vir aqui identidade do site e aqui a gente vai escolher então o ícone do site ó deixa eu ver se eu consigo fazer com

Algum que já tá aqui ó selecionar ó aqui no meu no meu caso fechou certinho tá ele vai fazer sentido aqui mas caso o seu ele não feche assim assim quadradinho igual o meu O que que você faz você vai lá no fotopia você coloca lá o seu logotipo da forma que você quer e você deixa ele grandão assim você tira as bordas né e deixa ele quadrado tá vou clicar aqui em Recortar imagem ó pode ver que já aparece aqui ó on eu tô com o meu mouse ó já tá aparecendo o ícone do

Site então vou clicar aqui em publicar e tá publicado Vou acessar a página inicial ó outra coisa importante também aqui para mim tá aparecendo essas opções aqui ó meu site personalizar novo editar porque eu estou logado aqui no meu WordPress tá para você que vai fazer aí também vai aparecer mas pro visitante não vai aparecer essas informações ó tanto que eu vou vir aqui vou copiar vou abrir uma guia anônima aqui vou colar vou ir e ó aqui não tá aparecendo Ó aqui tá o site Então realmente como ele é né como ele vai aparecer

aí para o público ó botãozinho de voltar ao topo E aqui as páginas então página de serviço página de sobre você personaliza cada página do seu jeito página de contato desse jeito assim Beleza então eu creio aí que o nosso tutorial a nossa super aula aí chegou ao fim tá se você tiver mais dúvidas eu vou deixar uma playlist completa aqui na descrição do vídeo tá enfim com várias aulas Complementares deixa eu vi aqui em playlist essa aqui ó tudo sobre WordPress e elementor tá ó vou tá deixando essa playlist aqui então Aqui tem muita

coisa que você pode aprender né Por exemplo ó como instalar ã a tag do Google no WordPress ã tem vídeo específico aqui sobre o formulário de contato eu ensino você como exportar importar site WordPress melhores plugins como fazer botão pulsante ó enfim tem uma série de vídeos Aqui aí que vão te ajudar como aumentar a segurança do WordPress muito importante também aqueles vídeos que eu falei lá na mais no começo da aula como gerar textos com inteligência artificial aqui no elementor tem também tá então você pode est conferindo deixa eu vir mais para baixo aqui

ó são todos esses vídeos aí e toda semana são vídeos novos aqui ó como gerar imagens incríveis com inteligência artificial dentro do elementor então você pode estar Acompanhando tudo aqui e claro você pode também est entrando aqui no canal da hostgator Academy pesquisa aí no YouTube hostgator Academy e aqui tem também uma Enfim uma série de vídeos aqui de tutoriais que vão te ajudar aí no seu dia a dia tá Inclusive tem o vídeo meu aqui ó que eu participei lá com eles né ensinando aí como ganhar dinheiro com com WordPress tá então você pode

estar acompanhando aqui o canal da hostgator Beleza então Nossa aula de hoje era isso eu espero ter ajudado valeu e até a próxima