Como Fazer um SITE PROFISSIONAL em 2025 com WordPress Elementor Grátis

1.42k views19885 WordsCopy TextShare
Aprendendo Sites
👉 Hospedagem Hostgator com Desconto: https://www.hostgator.com.br/42850.html Este vídeo é definiti...
Video Transcript:
fala pessoal tudo bem Rodrigo aqui do canal aprendendo sites e esse vídeo é definitivamente um dos vídeos mais completos e detalhados que eu já fiz aqui para o canal hoje eu vou te mostrar todo o passo a passo de como criar um site completo e profissional do zero e não se preocupe porque para isso não será necessário entender nada de programação nem investir valores altos aqui nós vamos usar apenas ferramentas gratuitas e acessíveis que são WordPress e o elemento e olha tem muito curso pago por aí que não ensina nem metade de tudo que eu
vou te passar nessa aula aqui é de graça então fica comigo até o final porque eu tenho certeza que vai valer a pena e antes de mais nada só peço que você não esqueça de deixar o like no vídeo e também de se inscrever no canal porque isso ajuda muito o canal a crescer cada vez mais aqui no YouTube beleza pessoal vamos lá então estou aqui na tela do meu computador e eu separei um mapa mental aqui com algumas observações e também mostrando o passo a passo aqui que a gente vai fazer Nesta aula tá
e eu peço que você não essa etapa que você veja com atenção para você entender Exatamente tudo que eu vou te ensinar e não ficar nenhuma dúvida aqui logo no início da aula Ok então número um aqui este passo a passo pode ser seguido por qualquer pessoa e não é necessário ter experiência no assunto Tá então se você nunca criou um site antes Se você não tem muito conhecimento aí com algumas ferramentas do digital você pode ficar bem tranquilo pois eu vou ensinar tudo bem detalhado bem passo a passo vai ser um vídeo aí bem
voltado para iniciar antes tá E também para você que já tem conhecimento aí na nas ferramentas né ali no WordPress no elementor com certeza também vai agregar para você tá então É voltado Tanto para quem já tem conhecimento quanto para quem não tem Ok E como eu falei ali na introdução você pode ficar bem tranquilo porque a gente não vai utilizar nada de programação vai ser tudo feito aí com ferramentas bem intuitivas e fáceis aí acessíveis para qualquer pessoa Ok número dois aqui o site que vamos criar Pode ser adaptado a qualquer nicho tá então
no meu caso aqui que que eu vou fazer eu vou criar um site aqui mais voltado pro nicho Empresarial aí enfim de consultoria e tal né é um nicho aleatório aqui que eu escolhi inclusive os textos do site eu gerei todos aqui no chat GPT com inteligência artificial ó então eu vou estar usando todos esses textos aqui no decorrer do meu site Ok as imagens também do meu site eu peguei todos aqui no freck o freepick é um banco de imagens mas enfim é só mais um aqui dentre milhares aí de bancos de imagens que
existem tá então você pode estar acessando aí enfim o o freck ou pesquisando no Google também bancos de imagens que vai aparecer uma infinidade aí de opções para você tá baixando imagens aí e usando no seu site tá ou até mesmo se você tem as suas próprias fotos aí se você contratou um fotógrafo profissional ou você mesmo tirou suas próprias fotos aí para enfim sua empresa seu negócio você consegue usar tranquilamente no seu site inclusive aqui no meu computador eu separei aqui também essas imagens ó todas as imagens aí ã fictícias né e eu vou
utilizar essas imagens aqui ok o meu logotipo também ó eu fiz aqui no canva um logotipo aqui só para ilustrar mesmo né e Vale ressaltar também que todo o conteúdo do site aí ele fica por sua conta Beleza então basta você seguir aqui o meu o meu passo a passo e você ir adaptando a tua necessidade né Por exemplo Ah você quer criar um site de academia você vai vir aqui e você vai encontrar imagens de academia você vai criar ali os textos H voltado para academia você vai criar o seu logotipo ou enfim se
você já tem o seu logotipo né você vai usar e assim por diante tá o conteúdo do site ele é muito particular de cada um E como eu falei o seu site ele pode ser adaptado a qualquer nicho Ok basta você alterar Então as imagens do site colocar as imagens aí de acordo com o seu nicho os textos do site e as cores do site a estrutura aqui enfim toda a lógica você pode seguir exatamente como eu vou fazer beleza aqui não tem erro terceiro aqui então o objetivo dessa aula é te ensinar como criar
um site profissional com domínio próprio o que que seria com domínio próprio vai ser o seu domínio profissional www. nome do seu site.com ou enfim.com.br eu vou te ensinar como fazer essa configuração aí do seu domínio profissional tá E é muito importante que o seu site tenha um domínio Porque sem o domínio aí enfim não tem como as pessoas até acharem no Google aí e na internet beleza criar um site também responsivo o que que seria um site responsivo seria um site que vai abrir em qualquer monitor por exemplo um site que vai abrir da
forma correta em um notebook em um tablet em um celular enfim em qualquer tipo de tela o objetivo aqui é te ensinar a fazer um site que vai abrir responsivo que vai abrir certo e que vai abrir bonito beleza também o site que vai ficar online 24 horas por dia e principalmente que vai abrir rápido né então não adianta você fazer um site e o seu site ele ser lento ele demorar muito para abrir né E nessa aula o objetivo é justamente te ensinar tudo isso te ensinar Como criar um site o mais profissional possível
um site que o usuário Ali vai acessar e ele vai abrir rapidamente ele vai sempre estar online enfim vai ter todos os benefícios de um site aí o máximo de aproveitamento possível Beleza então para isso teremos apenas um custo básico que é o custo de hospedagem né então só para você entender melhor o domínio ele é o seu endereço online por exemplo eu tenho meu domínio aprendendos sites.com a hospedagem ela é basicamente o serviço ali de armazenamento vai fazer com que o teu site fique online porque afinal o teu site ele vai possuir imagens textos
vídeos enfim todo o conteúdo do teu site ele precisa ficar armazenado em algum digamos assim em algum local da internet tá E aí que vai entrar a hospedagem então para ter qualquer site online A gente sempre vai precisar de um domínio e uma hospedagem Ok inclusive na sequência eu vou te ensinar como fazer toda essa contratação o custo de hospedagem ele é um custo básico custo aí bem baixo mesmo que você você pode pagar mensalmente ou até mesmo uma vez ao ano se você preferir e o domínio eu vou te ensinar como que você faz
para ganhar um domínio totalmente de graça beleza número quatro aqui Então siga o passo a passo exatamente como eu mostro não pula etapas e inclusive se for necessário Veja a aula mais de uma vez e por que que eu falo isso ã Primeiro de tudo tem muita gente que comenta aí nos vídeos e tal né que tá dando errado que não é assim que tá diferente só que daí a pessoa ela não segue o passo a passo como eu mostro né ela vai pulando etapas né então é importante você seguir o passo a passo do
início ao fim para ficar mais assertivo para não ter enfim nenhum problema nenhum erro Tá mas pode ficar tranquilo também que todos os possíveis problemas aí que você pode ter durante a aula eu já vou também at apresentar as soluções aí conforme a gente ir seguindo o passo a passo tá E também né se Claro se for necessário Veja a aula mais de uma vez isso é muito importante justamente para você que é iniciante para você que tá vendo talvez pela primeira vez esse vídeo né para você que tá vendo pela primeira vez um um
vídeo aí ensinando a como criar site é interessante você ver uma vez a aula do início ao fim só para você se familiarizar com as ferramentas para você entender como que vai funcionar esse passo a passo né E daí você pode estar vendo pela segunda vez para daí sim você ir dando pausa no vídeo e seguindo aí do seu jeito o passo a passo tá então esse aqui vai ser o nosso passo a passo primeiro a gente vai contratar hospedagem de site que eu já falei ali em cima o domínio vai ser grátis segundo passo
dentro da hospedagem a gente vai instalar o WordPress o que que seria WordPress WordPress é uma plataforma de criação de sites e hoje em dia é de longe é a plataforma mais usada do mundo então Grandes Empresas Grandes agências grandes players do mercado utilizam WordPress e através dessa ferramenta que a gente vai conseguir criar aí o nosso site sem utilizar nada de programação tudo de uma forma muito intuitiva terceiro passo aqui então dentro do WordPress a gente vai instalar um tema o tema ele vai definir aí a aparência do site algumas config ações e também
alguns plugins dentre esses plugins a gente vai instalar o elementor o que que seria o elementor o elementor ele é um construtor de páginas e através do elementor a gente vai conseguir personalizar todas as páginas do nosso site Então vou te ensinar como criar um site com várias páginas Você pode ter a página principal aí do seu site página de contato página de sobre página de de portfólio página de serviços enfim você vai adaptar aqui tudo isso aqui a sua necess idade Beleza você vai fazer do seu jeito e você vai ver que é mais
fácil do que você imagina para criar um site ok então nós vamos partir aqui pra nossa primeira etapa né que é a contratação de domínio e hospedagem e nesse momento Então eu vou deixar esse link aqui na descrição do vídeo esse aqui é o link da hostgator e o que que é hostgator a hostgator é uma solução completa para você criar o seu site online de forma profissional então hostgator é uma hospedagem aí de sites porém através da hostgator você vai conseguir também aí registrar o seu domínio você vai conseguir instalar WordPress instalar o elemento
Enfim fazer absolutamente tudo que você precisa para ter um site ali como eu falei um site online 24 horas por dia um site que abra rápido um site que tenha tudo para você ter aí resultados no digital e aqui no site da hostgator quando você acessar aí através meu link você vai garantir o máximo de desconto possível independente da época do ano que você esteja aí enfim vendo esse vídeo e acessando o link tá pode ser que esse desconto aqui ele esteja diferente aí no decorrer do ano porém através desse link você sempre vai ter
enfim o máximo de desconto possível Beleza então você clica aqui nesse botãozinho aqui que vai aparecer Logo no início ele vai direcionar aqui para os planos de hospedagem O que que a gente tem aqui a gente tem alguns planos de hospedagem eu já vou falar mais sobre esses planos de hospedagem antes disso eu só vou vir mais embaixo Aqui ó você pode estar acessando o site aqui enfim conferên todas as informações aqui enfim se familiarizando mais aqui com as ferramentas tem tudo bem explicado aqui enfim eu vou vir mais embaixo Aqui ó tem alguns depoimentos
aqui tem alguns comparativos e uma coisa que eu gosto sempre de ressaltar aqui da hostgator é a questão do suporte então o suporte funciona 24 horas por dia e 7 dias por semana tá então se você tiver qualquer problema aí enfim qualquer erro na aí na na sua hospedagem no seu domínio enfim você pode tá entrando em contato com o suporte online e o pessoal está aí para tirar as suas dúvidas e te ajudar e particularmente falando por mim mesmo né eu utilizo há vários anos a hostgator tanto que eu indico eles né E todas
as vezes que eu precisei do suporte eles foram super rápidos em alguns minutos aí eles já resolvem o teu problema ou enfim tiram a tua dúvida Beleza eu vou voltar até em cima aqui para os planos né então vamos falar um pouquinho mais sobre os planos aqui basicamente a gente tem quatro planos né planos start plano P plano m e plano Turbo Qual que é a diferença entre esses planos plano start é para você que tá começando agora e quer hospedar apenas um domínio detalhe que através desse plano aqui você vai ganhar também um ano
de domínio grátis porém com a extensão ponto online que que seria isso por exemplo aprendendos sites ponl tá Seria isso não seria aprendendos sites.com né E você vai ter o seu domínio aí ã nome do seu domínio P online já no plano P tá aqui o diferencial ó aqui você ganha um ano de domínio grátis e daí você consegue escolher a extensão aí do seu domínio né então você consegue colocar aí nome do seu site. comom ou nome do seu site.com.br ou outra extensão aí que você quiser né Sem falar que aqui no plano P
ele tem mais armazenamento aqui que no plano start tá mas Vale ressaltar que para seguir o passo a passo aqui qualquer um desses planos vai servir beleza só tô explicando aqui mais detalhado o plano M aqui ele já um pouco mais interessante por quê Porque através desse plano você consegue hospedar D sites e domínios ilimitados Ou seja você consegue adicionar vários domínios em o mesmo plano de hospedagem isso aqui é muito interessante porque geralmente quem vai criar um site online enfim seja pr pra sua empresa ou para você geralmente você nunca cria só um site
né você cria um site e dali a pouco você vai lá e cria outro e cria outro e cria outro né eu falo por experiência própria então se você já tem projeto talvez ideias aí de criar mais sites futuramente aí pros seus projetos né Eu recomendo que você escolha o plano M porque assim você vai pagar só um pouquinho a mais aqui por mês né você vê que é um valor bem simbólico mesmo bem baixo você vai pagar um pouquinho a mais e você vai ter uma hospedagem completa aqui no qual você vai conseguir hospedar
vários sites Sem falar que você consegue criar contas de e-mail ilimitadas você tem aí acesso também ao CDN que vai deixar o teu site muito mais rápido certificado SSL enfim são Várias Vários benefícios aí que a que a hostgator oferece realmente é um é um serviço completo aí para você criar o seu site e daí tem o plano Turbo né Qual que é a lógica aqui do plano Turbo você também igual o plano M que você consegue hospedar sites domínios ilimitados porém ele tem até três vezes mais performance né então o que que acontece se
você tem o projeto também de criar um site e esse site você quer anunciar ele aí para um público grande né você vai anunciar nas redes sociais e tal e esse site ele vai receber um grande volume de tráfego né Eu já recomendo você pensar em investir aqui no plano do Turbo porque daí você consegue ter uma um site com uma performance melhor tá mas isso não quer dizer que os outros planos aqui é lento ou Nada disso tá o plano Turbo Ele apenas tem uma performance melhor para sites com alto volume de tráfego beleza
sem falar também que ele tem mais armazenamento e você ganha dois domínios grátis ao invés de um domínio grátis nesse caso aqui eu vou escolher o plano m tá que é o recomendado aqui então você vai escolher o plano que vai fazer sentido para você pro seu bolso enfim pro seu negócio e pro seu projeto vou clicar aqui em ar próxima etapa aqui a gente vai escolher o ciclo de pagamento Então como que isso aqui vai funcionar Se você deixar mensal aqui você vai pagar esse valor todo mês se você deixar seis meses aqui você
vai pagar uma vez a cada 6 meses se você deixar um ano você vai pagar uma vez a cada um ano e se você deixar TR anos você vai pagar uma vez a cada 3 anos eu recomendo sempre deixar aqui um ano ou talvez 3 anos né se você já tem um projeto mais a longo prazo por quê Porque nessa opção de 1 ano e 3 anos você vai ganhar o o domínio grátis Ok então por exemplo aqui ó vou deixar um ano aqui aparece que eu vou ganhar um domínio grátis detalhe também que você
tem até 30 dias para pedir reembolso Aí caso enfim não dê certo ou você não consiga Criar o seu site então bem tranquilo vamos clicar aqui em continuar para o carrinho bom muito importante agora tem a opção aqui do domínio tá então você vai registrar o seu domínio ó eu vou colocar aqui como exemplo ó já tava salvo aqui no meu preenchimento ã site do Rodrigo vamos supor que eu vou criar o meu site e o nome do meu domínio né do meu site vai vai ser site do Rodrigo aí Aqui tem extensão site do
rodrigo.com site do rodrigo.com.br site do Rodrigo ponl site do Rodrigo P site ã tem várias outras aqui ó deixa eu ver ó tem pon net também ponto info enfim tem várias extensões aqui eu recomendo deixar pon com por quê Porque pon com é a extensão aí internacional né a mais usada do mundo ou também pc.br que é do Brasil né ã aí muita gente às vezes pergunta né Ah mas eu já tenho um domínio Como que eu posso fazer você pode vir aqui e clicar nessa opção usar um domínio que já tenho e aqui você
vai colocar o seu domínio mas o que que eu aconselho eu sempre aconselho você registrar um novo domínio por quê Porque esse domínio aqui que você vai registrar ele vai ser grátis tá então muitas vezes eu vou dizer ã dá o meu exemplo tá pessoal eu tenho o meu domínio aprendendos sites.com tá mais uma vez e também eu tenho meu domínio aprendendos sites.com.br e por que que eu tenho dois domínios justamente para não acontecer de ninguém registrar lá o domínio com.br no meu no no no nome da minha empresa e se passar por mim então
por isso é muito importante você sempre ter dois domínios o pon com e o pcom.br Claro que se você tá começando agora aqui você pode registrar apenas o que você quiser né e depois conforme aí a sua empresa vai crescendo enfim o seu negócio vai crescendo aí você pode registrar mais domínios para ficar mais seguro tá então a minha recomendação É essa mesmo que você já tenha um domínio registre um novo porque ele vai ser de graça Ok é muito importante também que um domínio ele seja único né então aqui ó sai site do rodrigo.com
eu vou clicar nessa lupinha para ver se esse domínio está disponível afinal não pode ter dois domínios iguais né pode ter sed rodrigo.com.br pnet mas não dosed rodrigo.com então aqui ó esse domínio tá disponível e você vai fazer esse processo com o seu domínio nome da sua empresa.com nome do seu projeto.com enfim seu nome.com ou a outra extensão que você quiser eu vou clicar aqui em adicionar vou deixar ativo aqui essa opção de proteção de domínio basicamente isso aqui vai proteger aí os seus dados online tá mas você pode deixar desativado aqui é um valor
bem baixo aqui por ano né enfim fica critério de cada um aqui então eu tenho as informações do meu plano tudo que ele inclui então sites ilimitados contas de e-mail grátis e ilimitadas certificado SSL CDN grátis enfim dentre outros benefícios aqui né veno mais embaixo Aqui a gente tem a opção do e-mail então você pode criar e-mails profissionais o que que seria esses e-mails profissionais seria contato @ seudominio com suporte @seed domino.com financeiro @seed domino.com Então você consegue criar várias contas de e-mails aí profissionais né até para passar mais credibilidade aí pra sua empresa tá
se você quiser contratar mais gigas aí você seleciona essa opção e aqui tem alguns adicionais que você pode estar contratando se fizer sentido para você e pro seu negócio agora vou clicar aqui em continuar para identificação basicamente nessa etapa aqui não tem mais muito mistério né você vai criar uma conta na hostgator Então você vai digitar aqui o seu e-mail vai criar uma senha aqui você pode estar lendo os termos de renovação termo de serviço política de cancelamento enfim todas essas informações tá aí você vai ser direcionado pra etapa três que é aqui onde eu
tô com meu mouse e aí você vai fazer o pagamento você vai escolher ali as formas de pagamento ã tem pix cartão de crédito boleto enfim você vai escolher a forma que faz sentido para você e você vai fazer o pagamento feito isso você vai cair nessa etapa quatro aqui da confirmação lembrando também que você vai estar recebendo vários mails aí na sua caixa de entrada dando as boas vindas dando enfim os dados de acesso a hostgator aqui dizendo que deu tudo certo e feito isso você vai fazer login aqui na hostgator tá esse link
aqui você vai receber aí no seu e-mail para você fazer login mas caso você não receba é aqui ó financeiro.hostgator.com.br tá ou até mesmo aqui no site principal da hostgator ó pode ver que aqui o desconto tá até 69% através do meu link lá tava 74% né então como eu falei através do meu link o desconto sempre vai ser maior Ó você vem aqui acha a opção aqui ó Portal hostgator clica aqui né E aí você vai cair nessa telinha de login você vai fazer login com seu e-mail e sua senha vai confirmar que não
sou um robô e vai entrar você vai cair aqui no portal do cliente aqui você pode ver que eu já tenho um plano aqui ó eu tenho esse plano turbo e tem esse domínio aqui ó canala prendados sites.com esse aqui é um domínio que eu sempre utilizo aqui pras aulas então através desse domínio aqui que a gente vai seguir com o nosso passo a passo Ok e bom esse por portal do cliente aqui da hostgator você vai ver que é bem intuitivo né então tem a aba aqui de sites que é onde a gente tá
aqui vai aparecer todos os sites né se você tiver 10 domínios aí 10 sites vão aparecer todos eles aqui listados tem a parte de e-mails então que você consegue facilmente criar e-mails aí para a sua empresa tem a parte aqui de domínios que você consegue estar contratando novos domínios e adicionando a sua hospedagem hospedagem e servidores você consegue estar fazendo toda a gestão também segurança e backup entre outras opções aqui bem interessantes também aqui tem a parte de faturas e assinaturas que você consegue fazer toda essa gestão aí os pagamentos e tal tem a aba
aqui de suportes né como eu falei isso aqui é muito útil Porque se você tiver qualquer probleminha você vem aqui no suporte e você abre aí um chat online e o pessoal tá ali 24 horas por dia para te ajudar e cara isso é realmente muito bom porque não é toda a hospedagem todo o serviço que tem um suporte tão bom assim beleza aqui você tem algumas notificações aqui o seu perfil que você pode configurar e tal bom e o que que mais interessa pra gente aqui essa opção de cpanel né então vai ter aqui
seu plano de hospedagem o seu domínio e aqui vai ter essa opção de cpanel tá então você vai procurar pela opção de cpanel e daí a gente vai cair nessa página aqui né O que que é isso isso aqui é o cpel cpel é um software de gestão de hospedagem através do cpel aqui a gente consegue fazer várias configurações avançadas enfim toda a gestão aqui da nossa hospedagem porém não precisa você se preocupar aqui com tantas inform ações e tal até porque é difícil você voltar aqui para utilizar isso aqui né a gente vai utilizar
o cpel mais para instalar WordPress Então a gente vai vir até o finalzinho aqui ó ferramenta aqui a gente tem várias ferramentas disponíveis né a gente vai utilizar WordPress que é a mais utilizada do mundo então vou clicar aqui vai abrir essa outra telinha aqui ó você vai procurar pelo pelo botão aqui de install né e agora é bem simples aqui a gente tem o nosso domínio tá canal aprend sites.com como eu falei né se você tiver sei lá 10 domínios aí adicionados na sua hospedagem vão aparecer todos os domínios aqui depois para você instalar
um WordPress separado em cada domínio e criar um site separado Ok nesse caso eu vou deixar o meu único domínio aqui que eu tenho né aqui no protocolo ó aqui tem algumas opções tá você sempre vai deixar https tá e um detalhe né uma possível mensagem aqui pode aparecer assim que Um certificado SSL confiável não foi encontrado tá isso acontece por quê porque geralmente você acabou de de registrar o domínio contratar hospedagem há poucos minutos né e o domínio ele ainda está propagando na internet né E às vezes quando você deixa https vai aparecer que
não foi encontrado Um certificado SSL confiável Mas você pode ignorar totalmente isso tá que isso aqui não vai interferir em nada tá então deixe selecionado assim o seu domínio diretório a gente vai deixar vazio porque a gente quer instalar WordPress no nosso domínio principal e aqui o WordPress ele tem várias e várias versões né ele já vai vir automaticamente aqui na última versão no meu caso aqui no momento da gravação desse vídeo versão 6.7.1 ok aqui as configurações do site então você pode dar um nome pro seu site vou deixar padrão assim my blog mesmo
mas aí você coloca aí o nome da sua empresa enfim a descrição do site também uma descrição uma descrição Zinha rápida aqui vou deixar padrão assim e aqui é muito importante pessoal conta do administrador o que que é isso isso aqui é a conta que você vai fazer login no WordPress tá detalhe que agora a gente tá instalando WordPress então WordPress é diferente da hospedagem então aqui ó você pode vir aqui e colocar um usuário vou deixar aqui ó e Rodrigo nome do usuário aqui essa senha eu vou esconder essa senha aqui vou gerar uma
nova senha e aqui e-mail do administrador aqui eu recomendo que você coloque algum e-mail seu aí que você utilize no dia a dia tá então seja o e-mail aí do Gmail do tilu ou algum outro serviço aí que você utilize com mais frequência né o seu e-mail principal porque se você perde essa senha aqui para entrar no WordPress através do e-mail você consegue recuperar facilmente Ok eu vou deixar padrão mesmo assim porque é só pra aula mesmo ok vindo mais para baixo aqui a gente tem algumas opções ó vou desmarcar essa opção aqui tá vou
deixar tudo desmarcado aqui tá pessoal eu recomendo que você deixe também tudo ã desmarcado Ó você pode est marcando aqui ficar tudo desmarcado mesmo porque a gente quer um site aí ã Zerado né WordPress aliás Zerado para mim ensinar do zero como que funciona né então se começar a instalar muito plugin aqui muito tema enfim vai acabar que vai confundir aí a gente ao invés de ajudar beleza aqui no idioma ó vou deixar português brasileiro e vou clicar em instalar processo de instalação do WordPress Ele é bem rapidinho leva apenas alguns segundos vamos aguardar um
pouco aqui e beleza a ferramenta instalada com sucesso Acho que demorou uns 15 segundos aí mais ou menos muita atenção agora aqui ó deixa eu aumentar aqui então tá o seu domínio né WordPress ele foi instalado aqui no seu domínio e aqui está o acesso ao painel da ferramenta Então esse segundo link aqui ó deixa eu copiar ele Ó esse segundo link aqui que você tem que salvar porque vai ser sempre através desse link que você vai fazer login no WordPress ó vou copiar esse link aqui eu só vou abrir aqui numa guia anônima para
explicar melhor ó então abriu aqui a tela de login do WordPress aqui eu colocaria meu nome do usuário Rodrigo né que eu acabei de colocar ali e a minha senha clico em lembrar se eu quiser ser lembrado da próxima vez e clico em Acessar Ah você perdeu a senha vem aqui em perdeu a senha coloca ali o seu e-mail né e obter nova senha né por isso que eu falei que é interessante você utilizar um e-mail seu aí de fácil acesso Ok no meu caso aqui ó como eu já estou logado aqui dentro do cpel
quando eu clicar aqui ele já vai abrir o WordPress então vou clicar aqui e beleza aqui já abriu o WordPress então só atenção para um possível segundo erro tá se você também acabou de registrar o domínio Você vai clicar aqui às vezes dá erro tá abre abre uma mensagenzinha de erro ao invés de abrir essa tela aqui que eu tô mostrando tá E essa mensagenzinha de erro ela é normal porque o Teu Domínio Ele ainda está propagando na internet né então o domínio ele geralmente demora um tempinho aí para propagar tá Então qual que é
a minha recomendação se aparecer mensagem de erro Quando você clicar aqui você aguarda e você tenta novamente mais tarde tá você vem aqui ó você fecha aqui Deixa aberto aqui essa aba e mais tarde você tenta de novo que com certeza vai dar certo tá se o erro continuar aí você pode estar entrando em contato com o suporte da hospedagem e tal mas isso aqui é bem tranquilo tá pessoal nunca tem erro aí que persiste aí por muito tempo tá ele é só temporário e isso aí vai acontecer em qualquer hospedagem né porque o domínio
ele precisa propagar ã só vou vir aqui aumentar um pouquinho esse Zoom assim acho que vai ficar melhor pra gente trabalhar tá primeira coisa que eu vou fazer aqui eu vou vir em plugins plugins instalados ã WordPress aqui ele vai vir com alguns plugins né O que que são plugins plugins são extensões aqui que adicionam funcionalidades para o nosso site eu vou desativar todos esses plugins aqui desativar esse aqui da hostgator para ficar mais fácil aqui pra gente seguir com a nossa aula Ok vou vir aqui aqui ó ações em massa excluir aplicar Ok você
repete esse mesmo processo tá deixa sem nenhum plugin aqui ó vou vir aqui no painel Ó aqui tá o painel inicial do WordPress a versão bom primeira coisa que eu vou fazer aqui eu vou vir aqui em visitar site e ó o nosso site nesse momento ele tá assim ó tá esc tá escrito o my blog né que é o nome que eu tinha dado e tem um postzinho aqui de exemplo ó tem um rodapé aqui vou clicar nesse postzinho ó então o nosso site ele tá praticamente em branco né né ele tá vazio e
agora a gente vai criar o nosso site eu vou vir aqui em aparência temas aqui já vai vir com alguns temas pré-instalados o que que são esses temas esses temas eles vão definir a aparência do site por exemplo vou vir aqui ó vou ativar esse outro tema ó tema ativado vamos visitar o site aqui ó pode ver que já mudou a aparência tá diferente vamos voltar aqui vamos ativar esse outro tema visitar site ó mais uma vez mudou a aparência tá porém esses temas aqui eles são bem genéricos né a gente não tem muito opção
então o que que eu vou fazer eu vou vir aqui em Adicionar novo tema e eu vou instalar esse tema aqui Hello elementor tá se não aparecer aqui você vem procurar temas digita e aqui tá ó hello elementor tá E que tema é esse esse aqu ele é o tema desenvolvido pela própria equipe do elementor né como eu falei lá no comecinho a gente vai utilizar o elementor para est personalizando todas as páginas aí do nosso site e tal né então vou vir aqui e eu vou instalar esse tema aqui que ele é compatível com
o ment instalado vamos ativar esse tema Ah eu posso utilizar outro tema sim se você quiser você pode utilizar qualquer um desses temas aqui e seguir com o passo a passo normal porém eu recomendo ter uma Hello justamente porque ele é por ser compatível com elementor né então o teu site ele vai provavelmente vai abrir mais rápido e vai ser propenso aí a ter menos bugs e menos problemas esses outros temas aqui eu posso estar excluindo eles porque afinal a gente não vai precisar deles então vamos excluir excluir Ok beleza vamos vir aqui em visitar
site ó nesse momento tá assim então o nosso site WordPress tá isso aqui a gente pode ignorar porque a gente vai fazer tudo mais personalizado mais bonito tudo do zero né detalhe bem importante que quando você instalar o tema Hello vai aparecer esse botãozinho aqui para você instalar o elementor então você pode clicar nesse botão ou então você vem aqui em plugins adicionar plugin vem aqui pesquisa por elementor e tá aqui o elementor então um plugin aqui que tem mais de 10 milhões de instalações as então através do elementor a gente consegue construir sites e
páginas incríveis aí sem utilizar nada de programação tudo de uma forma muito intuitiva então você pode estar clicando aqui ou aqui tanto faz ó vou clicar aqui ele vai instalar instalado clicar em ativar vai abrir uma telinha aqui pedindo para você conectar conta do elementor e tal criar uma conta né mas isso aqui não é necessário você pode só vir aqui no x ó e fechar e beleza que que a gente tem Então nesse momento a gente tem WordPress instalado a gente tem o tema aqui em aparências e a gente tem o elementor aqui que
é o plugin que é através dele que a gente vai personalizar as nossas páginas Ok e Bom agora eu vou te mostrar como que se cria as páginas do seu site então para isso você vem aqui em páginas todas as páginas por padrão WordPress já vem com duas páginas aqui ó tem essa página de exemplo vou clicar em ver ó é uma página simples aqui com textinho e tal vou voltar aqui eu vou pegar isso aqui e eu vou excluir ó vou mover pra lixeira vou vir aqui vou esvaziar a lixeira beleza ó todas as
páginas ó não tem nada aqui então o que que você vai fazer nesse momento Então você vai vir aqui em adicionar nova página e aqui você vai dar um título pra sua página no meu caso aqui eu vou adicionar a página de home que que seria home seria a página de início né a página principal do site eu vou vir aqui publicar publicar beleza página home agora está no ar uma página em branco eu vou voltar aqui pro meu WordPress só que o meu site eu vou querer que ele tenha mais páginas né então eu
vir aqui em adicionar nova página e eu vou adicionar As demais páginas no meu caso aqui vou adicionar uma página de serviços assim ó publicar publicar vou voltar aqui adicionar nova página quero também uma página de sobre publicar publicar Beleza e você vai repetir esse processo e colocar quantas páginas você quiser contato beleza ó então tô fazendo um sitezinho padrão aqui né bem genérico mesmo ã só com as páginas mais usadas né home contato serviço sobre mas aí você consegue adicionando mais páginas né página de sei lá trabalhe conosco página de portfólio galeria enfim o
site ele é seu né E você faz o que fizer sentido para o seu site OK agora vou vir aqui em configurações leitura a minha página inicial aqui né do do WordPress ela já é automaticamente configurada para exibir os posts recentes nesse caso eu quero que a minha página inicial seja uma página estática e eu quero que ela seja a página de home né então o que que eu tô informando aqui para o WordPress eu tô informando que a home é minha página inicial não a contato não a serviços e não a sobre a página
de home vai ser a minha página principal salvar alterações beleza ver como que tá aqui o nosso site ó tá assim ó página de home e tá em branco né só para você entender aqui ele tá mostrando o título do site a descrição do site a minha página de home isso aqui é um rodapé do site né como tá um site em branco não tem conteúdo não tem nada né vou voltar aqui no painel vou vir aqui em configurações e links permanentes muito importante aqui você configurar como nome do post assim ó essa opção Ok
vou vir aqui salvar alterações Beleza agora também a gente já vai criar o menu né como que a gente faz isso a gente vem em aparência menus e a gente vai criar o nosso menu do site né Que o usuário vai escolher ali para qual página ele quer navegar e tal aqui você vai dar um nome pro seu menu então isso aqui não vai interferir em nada tá você pode dar qualquer nome aleatório aqui isso aqui vai servir só para você identificar o seu menu Afinal você consegue ter vários menus aí dentro do seu site
vou vir aqui em criar menu Beleza o menu tá criado e agora eu venho aqui ó nas páginas e eu adiciono as páginas ao meu menu desse jeito assim e aqui você consegue também ordenar essas páginas né então primeiro vai aparecer home depois serviços depois sobre assim e depois contato Ó você pode inclusive adicionar posts aqui no seu menu né O que não não faz muito sentido e links personalizados por exemplo Ah você quer colocar o link de outro site enfim você consegue colocar aqui beleza categorias no caso não se aplica aqui vou deixar só
as páginas né E você faz essa mesma gestão enfim da maneira que fizer sentido para você ok vou salvar aqui esse menu daqui a pouquinho quando eu tiver criando aí enfim H personalizando o layout do site você vai ver que vai puxar esse menu aqui que eu criei Ok bom vamos começar então né Sem Muita enrolação aí com a criação né com a parte mais legal com a parte criativa né E para isso olha só eu vou vir aqui em modelos e construtor de tema né e o elemento ele tem um construtor de tema porém
ele é pago né mas como eu falei esse esse passo a passo aqui né o único custo que a gente vai ter será o de hospedagem né Então olha aqui ó através do elementor pro que é o elementor pago você consegue fazer o cabeçário e o roda pé que é o que a gente vai fazer aqui na sequência porém pra gente não precisar contratar o elementor pro aqui eu vou te ensinar uma forma alternativa para você fazer isso tá então vou vir aqui no x vou vir aqui em plugins adicionar plugin bom aqui pessoal em
outros vídeos aqui do canal eu utilizei esse plugin aqui ó deixa eu pesquisar por elementor porém vários usuários aí me reportaram erro tá deixa eu achar esse plugin aqui elementos kit elementor adom tá eu utilizei esse plugin alternativo aqui e Teoricamente através desse plugin a gente consegue criar o header e o foter né Teoricamente não na prática né vários vídeos aqui do canal eu eu já utilizei esse plugin porém muita gente reporta que dá erro né que fica uma tela em branco tá Então vou utilizar outro plugin aqui que basicamente é esse plugin aqui ó
Ultimate adom for elementor tá deixa eu dar um Ctrl C aqui ó você vem aqui ó pesquisa assim e é esse plugin aqui então feito por esse desenvolvedor através de esse plugin você vai conseguir criar o header e o futa né ou seja o cabeçalho e o rodapé aí do seu seu site utilizando o elementor sem precisar fazer essa contratação aqui do elementor pro Beleza então vou vir aqui em instalar vamos instalar esse plugin esse plugin vai quebrar um galho né e vou vir aqui também em ativar beleza plugin tá instalado e ativo aí você
vê que aqui no painel WordPress ó vai aparecer essa opção você vem aqui em header e footer builder clica aqui e agora sim você vai conseguir criar o cabeçário rodapé do seu site Lembrando que pode acontecer desse plugin D erro aí no futuro e tal Porque isso aqui muda muito rápido tá pessoal vou vir aqui em adicionar mais uma vez eu tava usando outro plugin aqui deixa eu ver se eu consigo achar ele que ele não tá mais aparecendo tá tinha outro plugin que eu usava aqui só que ele não tá mais aparecendo inclusive tinha
vídeo dele aqui no canal e Ele simplesmente sumiu né mas esse outro plugin aqui que eu tô utilizando ele funciona bem semelhante tá então se você vê esse vídeo aqui no futuro e porventura esse plugin não funcionar você vem aqui e você faz uma nova pesquisa né coloca header footer elementor e testa aqui outros plugins aí que porventura tenham essa essa opção aí de adicionar o cabeçalho e o rodapé Ok mas no momento da gravação desse vídeo esse aqui tá funcionando é um plugin aí com mais de 2 milhões de instalações ativas tá então vou
voltar aqui e olha só aqui não tem muito mistério tá você vai clicar aqui em Adicionar novo e aqui você vai adicionar então primeiro o cabeçário do site né vou colocar header aqui isso aqui não vai influenciar em nada tá é só pra gente conseguir identificar o nosso cabeçário cabeçário né tipo de modelo cabeçalho display On aqui a gente vai colocar entry site que que isso quer dizer quer dizer que esse cabeçalho ele vai aparecer em todas as páginas do nosso site e aqui os usuários Vão colocar todos os usuários tá aqui eu vou deixar
desmarcada essa opção vou vir aqui em publicar Beleza agora que tá publicado eu venho aqui em editar com elementor e agora vai est abrindo aqui então o editor do elementor vou clicar aqui no x só vou diminuir um pouquinho esse zoom aqui assim que eu acho que fica melhor pra gente trabalhar tá antes de eu de eu fazer a personalização aqui desse cabeçalho eu só vou definir aqui as cores né e as fontes né então aqui a gente tem algumas opções ó construtor de tema histórico preferências de usuário atais do teclado e sair para WordPress
eu vim nessa opção aqui ó configurações do site e o que que eu vou fazer nesse momento eu vou selecionar então a paleta de cores aqui do meu site você vai fazer isso utilizando também aí o seu logotipo a sua identidade visual e tal né nesse caso aqui como eu falei antes né eu vou utilizar essas cores aqui ó desse logotipo aqui que eu criei mesmo no canva só para ilustrar né então vou vir aqui ó vou utilizar esse tom de roxo aqui ó né aqui estão as cores ó são exatamente essas cores que eu
vou utilizar né então já copiei o roxo aqui vou vir aqui adicionar cor vou dar um cont Crol V ó tá aqui esse tom de roxo tô pegando aqui o color zilla tá pessoal para mim pegar mais rápido as cores vou utilizar esse Tonzinho aqui de Rosa aqui adicionar cor assim vou adicionar também esse outro Tonzinho aqui de azul e também o branco né E você adicionando as cores globais aqui do seu site isso aqui Vai facilitar muito o trabalho né porque daí cada elemento que você adicionar ali no seu site né Por exemplo Ah
você vai colocar um botão você vai colocar um contêiner você vai colocar enfim qualquer coisa ali um texto né você consegue puxar essa as cores aqui rapidamente né então aqui você coloca sua paleta de cores Ok Ah se você não tem uma paleta de cores definida pode talvez colocar qualquer cor aqui e depois você muda tá as cores que você mudar aqui vai mudar depois no site todo né que você tiver adicionado aí no nos elementos Ok vou salvar aqui as alterações vamos voltar aqui e as fontes né as fontes vão ser os textos aí
que vão aparecer ao longo do site nesse caso aqui vou deixar essa fonte Monte Serrat ó essa aqui que tá aparecendo aqui aqui a fonte dos títulos colocar aqui um tamanho 48 não 36 assim ó o peso vou deixar assim beleza aí você regula aí Conforme você quiser se você quiser fazer igual eu tô fazendo que também pode fazer aqui o secundário eu vou deixar Monte Serrat também tamanho 16 beleza essa aqui vai ser minha fonte primária e essa aqui minha fonte secundária e as cores então eu já configurei Ok eu vou fechar aqui vou
vir aqui no maizinho vou clicar em flexbox e vou selecionar essa estrutura aqui ó eu vou clicar nessa estrutura aqui vou vir em estilo vou vir aqui na cor ó tipo de plano de fundo e vou selecionar aqui ó a minha cor né enfim a cor que eu quiser utilizar nesse caso aqui eu vou deixar essa cor aqui aí eu vou vir aqui no maizinho e aqui eu vou colocar o logotipo ó então eu vim aqui arrastei uma imagem para cá aqui eu colocar o logotipo do meu site ainda aqui no maizinho eu vou vir
aqui acho que fo mais fácil mostrar aqui ó tem o básico aqui do elementor né Então aqui tem todos os elementos ó que você consegue est adicionando aqui da forma que você quiser né como eu falei tudo de uma forma bem intuitiva né ó texto aqui Aqui tem o pro que tá bloqueado que a gente não vai utilizar tem o geral aqui também ó itens Gerais ó caixa de imagem por exemplo tem aqui ó caixa de ícone que mais que a gente tem aqui depoimentos Ó você pode estar adicionando tudo aí e personalizando tá só
para demonstrar mesmo aqui como que funciona o elementor mas no decorrer da aula aí você vai entender bem você vai pegar bem a ideia tá ó e daí tem essa opção aqui Ultimate addons né Por que que tá aparecendo isso porque a gente instalou aquele plugin lá Ultimate addons né através esse plugin que a gente tá criando esse cabeçário né então vou achar essa opção aqui de menu ó vou vir aqui e vou arrastar para cá o menu e aqui você pode ver ó em menu que já puxou automaticamente o nosso menu né então home
serviço sobre e contato tá aqui o menuzinho vamos personalizar melhor agora isso aqui ok primeiro a imagem aqui eu vou pegar o logotipo ã vou utilizar esse essa página um aqui então vou vir aqui no canva e eu vou baixar essa página tá daí você Claro pega aí o seu logotipo aí do seu jeito né colocar aqui fundo transparente e eu quero só a página um desse jeito assim vou baixar beleza ó tá aqui o logotipo ã só um detalhe que nesse esse logotipo aqui do canva né até essa dica serve para você também que
talvez tá vai fazer seu logotipo no canva e tal ele tem essas bordas aqui em cima onde eu tô com o meu mouse ó tá vendo essas bordas para eu vou tirar essas bordas tá para isso vou vir nesse site aqui ó photopia.com em arquivo Abrir eu vou abrir aqui o logotipo ó tá aqui ele só vou aumentar e daí vou pegar e vou cortar essas bordas aqui ó se nós vão ficar aparecendo aí né não vai ficar tão legal no nosso site ó daí você vai pegar o teu logotipo também e você corta ele
né dessa maneira assim ó que ele não fique com bordas gigantes né no caso vou vir aqui ó exportar png vou deixar assim mesmo e vou salvar Beleza já baixou aqui no meu compador agora eu venho aqui ó clico na imagem selecionar arquivos tá aqui o logotipo Abrir selecionar beleza no caso esse logotipo aqui eu consigo escolher o tamanho dele né consigo colocar um link para ele antes de mais nada vou vir aqui ó eu vou alinhar ele para a esquerda e a largura eu vou colocar em pixels desse jeito assim e eu vou deixar
ele menorzinho vou deixar assim ó 140 pixels mais ou menos ó Então tá assim o nosso logotipo quando o usuário clica nesse logotipo eu vou pegar aqui o link do meu site ó canal aprend sites.com vou copiar esse link vou vir aqui em conteúdo link URL personalizado e vou colar toda vez que o usuário clicar nesse logotipo ele vai ser direcionado para a página principal do site né então por exemplo o usuário tá lá na página de contato e ele quer voltar para para a página principal né ele clica no no logotipo e retorna para
a página né principal bom esse menuzinho aqui vamos configurar ele agora tem essa opção aqui ó last menu item você pode colocar um botão ó no último elemento aqui vou deixar padrãozinho assim ó vou deixar um botãozinho e aqui em layout Então a gente tem várias opções de personalização ó assim assim nesse caso eu vou deixar horizontal mesmo eu vou alinhar aqui para a direita aqui no sub submenu ícone não se aplica tá porque a gente não tem subitens aqui aqui eu não vou mexer responsivo eu vou deixar ele padronizado assim no tablet ó daí
quando vem no tablet ele muda né e no celular ele muda já vou personalizar melhor isso aqui ok aqui você consegue alterar os ícones ó e o alinhamento vou deixar para direita assim aliás aqui ó direita direita beleza vamos ver aqui em estilo aqui a gente tem algumas opções também ó o espaçamento vou deixar assim vertical vou deixar assim e outros espaçamentos aqui aqui quando passa o mouse Ó você consegue configurar para aparecer aqui diferente né eu vou deixar em nenhum aqui essa tipografia aqui ó tenho minha tipografia primária no caso eu vou colocar minha
tipografia secundária porém vou vir aqui e eu vou aumentar um pouquinho o peso peso 600 assim vou colocar esse texto aqui também na cor que eu quiser né nesse caso aqui cor branca assim quando passa o mouse aqui ó você consegue trocar a cor né Deixa eu ver essa cor aqui aí vou deixar assim quando passa o mouse e quando fica ativo também ou seja Ah tá tá aberto na página de de serviços né você consegue deixar uma cor aqui personalizada eu vou deixar a cor branca assim e eu vou vir aqui na opção de
botão essas outras opções aqui eu já vou configurar daqui a pouquinho aqui que é no tablet e no modo celular antes vamos deixar 100% aqui no desktop né a cor do botão aqui então Ó você consegue vir aqui e alterar a cor vou deixar desse jeito assim e você consegue mudar também a tipografia aqui do botão e fazer outras configurações tá não vou mexer muito aqui né vou deixar assim aí eu só vou vi aqui no contêiner Ó você pode ver que tem dois contêiners Ó tem esse contêiner e tem esse eu vou clicar nesse
segundo aqui e eu vou justificar o conteúdo ao centro desse jeito assim ó ainda aqui nesse contêiner aliás nesse não no principal Ó tem o contêiner principal tem esse e tem esse eu tô aqui no principal ó posso vir aqui em layout e aqui você define a largura aí do seu do seu site né do do layout que que eu recomendo você fazer aqui eu vou deixar padrão 110 que é o que vem aqui no elementor tá porque daí assim não precisa a gente ficar mudando aí cada um e 1140 é uma largura legal aí
que vai abrir bem em todos os dispositivos Ok só vou pegar esse logotipo aqui e eu vou diminuir ele um pouquinho assim vou deixar uns 96 pixels bom e basicamente é isso né tá pronto aqui o header né o cabeçalho do meu site aumentar só para 110 aqui aí você vai ajustando a conforme a tua necessidade né ó aqui no no no tablet né Vamos ajustar aqui no tablet o drop Down ó que você muda a cor Deixa eu ver se eu consigo aqui ó cor do texto ó altera aqui nesse vamos deixar assim e
a cor do fundo vamos deixar assim ou assim ver é assim ficou melhor ó aí cor do texto Branco beleza e aqui você regula a distância ó Então abre assim Claro tem várias várias opções aqui ó por exemplo tirar esse divisor né Aí você vai figurando aqui da forma que você acha mais interessante né É legal você explorar aqui opção por opção para você ver o que que faz sentido e o que que não faz aqui tem o botãozinho que é esse que aparece aqui ó eu vou colocar ele na cor branca assim ó e
vou deixar ele assim então no celular ó ele já tá automaticamente aqui configurado aqui no celular muita atenção para essa configuração aqui ó vou clicar nesse com coner aqui largura porcentagem eu vou colocar 50% e eu vou clicar nesse outro aqui largura porcentagem 50% também e daí você certifica né que esse contêiner principal aqui que tô com meu mouse ele esteja com a direção assim com a direção assim ó linha horizontal daí vai aparecer o logotipo e vai aparecer aqui o menu ó Então tá sim o cabeçalho né do nosso site aqui eu acho que
eu até vou tirar esse botão aqui porque não tá muito legal não deixar ass default beleza ó assim tudo responsivel OK assim e assim publicar bom o que que eu vou fazer agora vamos vir aqui na página inicial aqui do meu site e olha só que legal já tá aparecendo aqui então o nosso header né nosso cabeçalho ó tô na página de home vou vir aqui na página de serviços ó ele continua aparec Endo na página de sobre página de contato isso aqui então vai aparecer no site inteiro Ok e agora vamos criar então o
rodapé né que é a parte que vai aparecer lá embaixo do nosso site então para fazer isso a gente segue a mesma lógica eu venho aqui ó já tenho aqui o header né isso aqui eu posso editar a qualquer momento Enfim eu posso excluir se eu quiser enfim você consegue fazer toda a gestão aqui eu vou clicar em Adicionar novo e aqui agora vou adicionar então o nosso fter né o nosso rodapé selecione a opção rodapé mais uma vez ó no site inteiro e deixar selecionado aqui todos os usuários essas opções podemos deixar todas assim
publicar beleza e agora eu vou editar aqui com o elementor vai abrir o editor do elementor Mais Uma Vez vamos fechar aqui e bom pro nosso rodapé então eu vou fazer aqui do jeito que eu acho legal né você pode estar replicando aí também olha tá em cima aqui né mas na realidade vai aparecer embaixo aí no seu site Então vou vir aqui Vamos definir aqui V colocar essa cor aqui vou vir no maisin vamos adicionar o nosso logotipo então que já tá aqui o nosso WordPress vou vir aqui pixels vou colocar 110 pixels para
ficar do mesmo tamanho do que tá lá no no no cabeçário né deixar ele alinhado para cá vou vir aqui no maizinho vou adicionar um título aqui nesse caso eu vou adicionar aqui algumas informações de contato Então vou digitar aqui ó contato vou vir aqui em estilo tipografia secundário só vou aumentar um pouquinho esse peso porque ele é um título OK e eu vou mexer na cor aqui ó vou colocar essa corzinha aqui vou vir aqui no maizinho básico pro lista de ícones ó essa opção aqui é bem interessante eita não foi aqui vamos de
novo aqui agora sim vou colocar aqui por exemplo o telefone da empresa ó tudo fictício né pessoal como eu falei né assim aí eu venho aqui nos ícones ó e eu posso pesquisar aqui por telefone Ó tem vários iconeinstagram copiar virar aqui vou dar um cont control V para colar aqui WhatsApp beleza e vamos colocar também o e-mail aí deve você digita suas informações colocar esse envelope Zinho aqui que fica legal beleza ó daí você quer ah você quer adicionar mais alguma informação você vai adicionando as informações do seu jeito ok aqui você regula o
espaçamento ã vou deixar em 10 pixels aqui tem opção de alinhamento vou deixar assim mesmo divisor o ícone aqui então você consegue escolher da forma que você quiser ajustar tamanho e tal aqui no texto eu vou deixar esse texto da cor branca né para ele contrastar aqui com o fundo e a tipografia tipografia secundário assim então Ah você quer que toda vez que o usuário clique aqui nos links abr os links né Como que você faz isso aqui no telefone Ó você vem aqui em link você coloca assim t dois pontinhos e você vai colocar
cont control c aqui cont control B você vai colocar o link o número do telefone tá lembrando que tem que ter aqui o código do do país né Por exemplo aqui no Brasil o código é é 55 né então código do país aí o código do Estado vamos supor que código do Estado é 54 Ó daí tem que ter os nove números do telefone tá então código do país código do Estado nove números do telefone quando o usuário ele clica aqui vai abrir automaticamente aí o telefone né do do celular dele aí para ele est
fazendo a ligação já com o número tá ou Whatsapp como que funciona bem parecido também ó você vem aqui w.me Barrinha e igual aqui ó o primeiro Ó tem que ter o código do país o código do Estado e os nove números aí do WhatsApp aí ó o usuário clica aqui no link do WhatsApp vai abrir lá o WhatsApp do celular dele ou se ele tiver no computador vai abrir o WhatsApp web dele para ele iniciar aí a conversa o e-mail você vai colocar assim ó mail to do p e o e-mail vou dar cont
contrl C aqui vou vir aqui cont contrl v o usuário clica aqui já vai abrir o aplicativo de e-mail dele para ele enviar um e-mail Beleza então não tem muita muito mistério nessa parte né vamos pegar isso aqui ó vamos duplicar Vamos jogar para cá e aqui eu vou colocar também redes sociais claro que daí você vai personalizando aí de acordo com a tua ideia com o teu negócio né com o que faz sentido para ti beleza vamos achar as redes sociais aqui ó ícones sociais vou arrastar para cá então aqui tem as redes sociais
ó não quero essa rede social posso vir aqui e posso pesquisar aqui por uma rede social ó aqui aqui ó daí você quer mudar né você vem aqui e altera e faz toda essa gestão aí aqui ó por exemplo Instagram você vem aqui e coloca o link do Instagram telegram vem aqui coloca o link do telegram YouTube Vem aqui coloca o link do YouTube e assim você faz a gestão né você vem aqui você adiciona mais itens você remove enfim aqui você configura a forma ó aqui as colunas eu vou deixar assim alinhamento eu vou
deixar assim e aqui no estilo eu vou colocar uma cor personalizada então a minha cor primária aqui eu vou deixar transparente desse jeito assim e a minha cor secundária eu vou deixar branco mesmo o tamanho eu consigo ajustar aqui também o preenchimento vou deixar assim o espaçamento eu vou deixar assim e quando é passar o mouse ó então você pode vir aqui e mudar ó tá vendo aí quando passa o mouse vai mudar de cor Ok V pegar isso aqui vou duplicar Vou colocar aqui ã localização aí daí você não quer colocar localização coloca outra
informação aí posso vir aqui ó adicionar Um textinho ol puxou automaticamente um texto fictício aqui vamos só reduzir um pouquinho esse texto assim beleza cor branca tipografia secundário ó tá aqui então tá pronto aí o rodapé do nosso site vamos rodar mais espaçamento aqui nesse contêiner né vou deixar a largura padrão aqui vou vir aqui ó preenchimento vou colocar 100 pixels superior e 100 pixels inferior desse jeito assim aqui no tablet olha ele abriu assim que que você pode fazer aqui no tablet Você pode vir aqui no contêiner principal e colocar tudo alinhado assim né
daí você Tem que regular aqui item por item né Por exemplo esse aqui ó vou deixar 100% vou vir aqui ó daí você faz toda essa Essa gestão ou também você pode vir aqui ó e deixar tudo alinhado ao centro vou aumentar esse logotipo aqui no tablet vou vir aqui ó em contato vou dar uma marzin superior de uns 20 em redes sociais também uma marzin de uns 20 aqui em localização também uma marzin de uns 20 né daí no tablet abriria assim então desktop assim no celular vamos regular bem isso aqui aqui no celular
eu vou deixar tá tudo alinhado aqui pro início esse logotipo assim eu vou diminuir esse tamanho também do logotipo aqui ó Já puxou automaticamente os 20 pixels superior né só esse testinho aqui eu vou dar vamos ver aqui uns 100 pixels aí para ele ficar mais para a esquerda Ok bom seria assim então no celular eu só vou vir aqui cadê Aqui o contêiner avançado aqui no preenchimento ó vou deixar 50 e 50 OK posso deixar aqui também 20 e 20 ó ficaria assim então no celular só esqueci de colocar o link aqui do logotipo
vou dar um cont control c aqui link URL personalizado colar beleza aqui ó informações de contato redes sociais localização só esse texto aqui passar o mouse vamos deixar essa cor assim ó perfeito aí ó só seguir o passo a passo que não tem erro beleza publicar vamos ver aqui na nossa página principal e olha só que legal já tá aparecendo então o nosso rodapé agora vamos fazer então a criação aqui da nossa página inicial né a personalização aliás da nossa página de home e depois das demais páginas do nosso site bom E para isso então
nós vamos voltar aqui no painel do WordPress só vou aumentar um pouquinho esse zoom aqui vou vir aqui em páginas todas as páginas aqui estão Então as páginas aqui que a gente criou antes né eu vou vir aqui na página de home que é a página principal vou vir editar e o que interessa pra gente é esse botãozinho aqui editar com elementor vou clicar aqui e vai est abrindo então o editor do elementor Agora sim ó vou diminuir um pouquinho esse Zoom beleza e primeira configuração muito importante aqui que você tem que prestar atenção você
vai achar a engrenagem de configurações aqui no elementor e aqui em layout da página já vem padrão porém a gente vai colocar elementor largura Total quando eu clicar em elementor largura Total pode ver que desapareceu a escrita de home que estava aqui né ou seja estava mostrando o título da página tá E ainda aqui você consegue fazer Essa gestão você consegue colocar por exemplo tela do elemento tela do elementor fica tudo em branco não vai aparecer cabeçário nem roda pé Isso aqui é ideal para você que quer criar uma Landing page por exemplo né nesse
caso aqui a gente quer criar uma página do nosso site aparecendo o cabeçalho e o rodapé Então a gente vai deixar selecionado desse jeito assim OK primeira coisa que eu vou fazer aqui eu vou vindo mais flexbox vou selecionar essa estrutura aqui vou clicar aqui nesse container vou vir em estilo tipo do plano de fundo aqui eu tenho algumas opções né colocar o clássico eu posso colocar um Gradiente eu posso colocar um vídeo daí você coloca o link do vídeo do YouTube aqui ou até mesmo apresentação de slides nesse caso eu vou colocar alguns slides
para passar aqui né como que eu vou fazer isso eu vou vir aqui no meu computador e eu separei essas imagens aqui ó vou abrir elas eu vou colocar essas três imagens aqui para passar como slides Tá mas antes disso O que que eu preciso fazer eu preciso dimensionar as imagens da forma correta né como que a gente faz isso você pode fazer através aí do seu seu computador mesmo posso vir aqui ó se você usa o Windows você vem aqui em editar com pint a imagem Deixa eu só reduzir aqui aí você vem aqui
ó alongar e destorcer redimensionar tá ou deixar selecionado pixels aqui horizontal você sempre vai colocar 1920 tá isso aqui falando assim de imagens aí que são para utilizar em banner né enfim imagens de fundo vou dar um ok Ó ficou desse tamanho assim a imagem pode ver que ela ainda está numa excelente qualidade né porém ela tá no tamanho certo né porque a imagem que eu baixei lá do do freepick Olha só deixa eu vir aqui nas propriedades detalhes aqui ó ela tá nessas dimensões ó 6720 por 3519 Então essa imagem ela é absurdamente pesada
e ela é absurdamente Grande para te utilizar no teu site tá então muito cuidado para você não utilizar essas imagens pesadas porque senão vai pesar muito o teu site então o ideal é sempre redimensionar as imagens daí você vem aqui no Enfim no pint né e você salva ou ainda deixa eu sair aqui você vem aqui no fotopia ó porque não é todo mundo aí que tem o p vem aqui no fotopia a arquivo Abrir tá aqui a imagem vou abrir ela beleza vou vir aqui em imagem tamanho da imagem aqui ó largura 1920 vou
clicar fora aqui beleza ó ó ficou desse tamanho assim ela tá pequeninha aqui mas a resolução dela tá excelente arquivo exportar como jpg e aqui você pode diminuir um pouquinho a qualidade que dela vai perder também o tamanho tá deixar aqui uma qualidade ó 50 pode ver que o tamanho aqui diminuiu para 94 KB ó se deixar em 100 o tamanho vai para 1.4 MB ou seja mais de 14 vezes aí maior né eu vou deixar assim ó e vou salvar Beleza já fez download aqui no meu computador agora vou fazer isso com as outras
imagens né então vou pegar essa outra imagem aqui vou vir aqui tamanho da imagem 1920 vou clicar fora aqui vou aceitar e vou exportar sempre em jpg tá pessoal porque png é são imagens aí com fundo transparente aí png sempre vai ser o seu logotipo enfim essas imagens de fundo aqui fica tranquilo em J PG Ok vamos pegar essa a outra aqui aqui mais uma vez imagem tamanho da imagem 1920 aceitar arquivo exportar como qualidade 50% beleza V voltar aqui no meu meu computador só para explicar melhor tá ó essas três imagens aqui eram as
imagens que eu baixei aí do do fpic enfim de bancos imagens ó vou vir aqui em propriedades detalhes aliás Pode ser aqui em geral mesmo ó olha aqui o tamanho Total dessas três imagens são 22 MB Tá e agora as imagens aqui dimensionadas do tamanho correto ó olha só tamanho 398 KB então é o tamanho absurdamente menor né só para você ter uma ideia cada MB equivale a 1000 KB então o tamanho que tava ali tava sei lá umas 50 vezes maior mais ou menos tá então Além de eu diminuir a resolução das imagens Eu
também Consegui diminuir o tamanho das imagens ó quando eu passo o mouse pode ver estão todas com a largura 1920 isso aqui dá para dizer que é um padrão aí para você utilizar de imagens de fundo Beleza então Independente se você vai pegar no freck ou se você tem as suas fotos você pretende seguir mais ou menos esse padrão Beleza deixa eu voltar aqui no elementor ó vou vir aqui adicionar imagens vão Enviar aqui do meu computador então é essa aqui essa aqui e essa aqui essas três imagens vou clicar em Abrir beleza cegou as
três imagens criar uma nova galeria inserir vou vir aqui em layout altura mínima eu vou deixar ã VH e vou colocar 90 VH aliás uns 80 aqui assim que que seria esses 80 VH seria a porcentagem do tamanho da tela tá então se você deixa 100 VH essa essa esse primeiro container aqui do teu site ele vai abrir 100% do tamanho da tela isso Independente se tu abrir numa tela de 14 polegadas ou numa tela de 21 polegadas tá vai abrir 100% do tamanho agora se a gente diminuir aqui por exemplo para 50 ó vai
abrir 50% do tamanho da tela tá E mais uma vez eu reitero isso independente do dispositivo que você você abrir Ok bom vou deixar uns 80% aqui assim à Não vou mexer nas demais configurações vou vir aqui no estilo aqui você consegue fazer algumas configurações né do Loop Infinito a duração o tipo de transição aqui ó você consegue ir alterando vou deixar em Fade mesmo aqui tamanho eu vou deixar cobertura posição vou deixar centro tem esse essa opção aqui efeito C burns que as imagens vão aproximando ó não sei se dá para ver direito mas
ela tá aproximando Daí você pode regular aqui se quer que ela aproxime interno ou externo desse jeito assim Beleza vou deixar assim sobreposição de fundo eu vou colocar uma cor aqui para sobrepor o fundo ó vou deixar assim mais ou menos Unos 80 ó Então seria mais ou menos assim aí a enfim primeira sessão né primeiro contêiner do nosso site que que eu vou fazer agora vou adicionar os elementos aqui dentro disso né então V aqui no maizinho e eu quero arrastar um título para cá só que antes disso eu vou vir aqui container layout
e eu quero que tudo isso aqui Fique alinhado ao centro OK agora eu vou vir aqui no meu no chat GPT aqui e eu vou pegar os textinhos né pessoal como eu falei são todos textos aqui gerados com ia aí você pega e você gera aí os seus você pode vir aqui no chat GPT pedir para ele gerar os textos com inteligência artificial para você ou você mesmo pode digitar aí os seus textos né vamos vir aqui não copiar enfim o conteúdo aí é particular de cada um pegar isso aqui deixar o centro só vou
ajustar a altura da Linha deixa eu ver Colocar assim e 1.2 tamanho 48 assim maiorzinho porque é a headline principal aqui do meu site né vou deixar a cor branca desse jeito assim ainda esse fundo aqui eu posso vir aqui eu posso sobrepor mais ainda porque daí quanto mais sobreposição eu boto mas dá para ler o texto né mais visível fica o texto Ok vou deixar desse jeito assim posso vir aqui no Mais também e adicionar um botão ó tá aqui um botão Ó tem o textinho aqui ó vamos copiar esse textinho do botão vamos
voltar aqui vamos tirar isso aqui vamos botar sua agenda e uma consulta assim aí o link do botão isso também é muito particular de cada um né você vai colocar o que vai fazer sentido pro teu negócio aí pra tua estratégia né Ah tu quer colocar um link pro pro WhatsApp vem aqui em link e coloca o linkzinho do WhatsApp igual eu tinha feito antes né coloca aqui o o wa.me daí coloca o código do país o código do Estado e os nove números do telefone ou por exemplo tu quer direcionar a pessoa para para
outra página né quer direcionar o usuário aqui pra página de contato ou quer direcionar pra página de serviços enfim é só você você pegar aqui o link da página em questão ó contato copiar endereço do link vir aqui e colar vai toda vez que usuário clica aqui ele vai pra página de contato então isso aí vai variar muito aí de acordo com a tua estratégia Ok vamos ajustar Aqui só essa tipografia colocar um pesinho 600 assim esse botão aqui deixa eu ver como é que eu vou fazer ele deixar branco e o fundo aqui posso
estar alterando assim ou até mesmo posso vir aqui ó e alterar essa outra cor ó então enfim aí você tem que brincar aí com as cores né e ver o que que vai ficar mais legal o que que vai fazer mais sentido para você deixa eu ver como é que eu vou fazer aqui acho que vou deixar assim mesmo aí vou deixar assim raio da borda você pode vir aqui ó e aumentar pode ver que o botão ele ficou Redondo n vou deixar aí uns 10 assim o raio da borda assim aqui quando passa o
mouse mas você pode estar alterando também né então por exemplo vamos inverter aqui quando passa o mouse ó vamos colocar assim ó aí você faz essa gestão aí da forma que enfim vai ficar mais interessante para você ok posso vir aqui no Mais também posso adicionar um titulo Zinho aqui ó aqui ó vamos colocar um bem-vindo aqui só que vamos colocar isso aqui menor para ficar mais bonito tipografia secundário assim peso aumentar deixa eu ver uns 600 espaçamento entre letras vou aumentar também uns 14 daí eu venho aqui e eu mudo a cor ó no
caso Esso aqui não fez muito sentido então vai ficar essa cor assim mesmo ainda aqui no contêiner ó como esse aqui ele é o primeiro contêiner ele só tem esse texto aqui que tá indo de Fora a fora eu posso vir aqui e diminuir um pouquinho ó nesse caso vou deixar assim ó para ficar mais bonito aí em duas linhas OK ainda aqui no botão também eu esqueci Ó você pode vir aqui e colocar um Icone Zinho Deixa eu pesquisar aqui por fash assim ó aí ó aí você vai ajustando conforme a tua necessidade Ok
vamos ver aqui nos outros dispositivos ó no tablet fica assim então no celular fica assim esse texto ele tá absurdamente grande aqui no no celular né Eu sempre coloco aí uns 30 de texto mais ou menos posso deixar tudo Centralizado ou se eu quiser eu posso alinhar aqui para esquerda né aliás deixa eu vir aqui no Assim fica melhor ó contêiner aí eu posso colocar aqui uns 20 na direita e uns 20 na esquerda assim então aqui ó no celular ele tá pegando também os 80 VH né ou seja 80% do tamanho da tela do
celular aí que que o usuário Abrir Ok ó então no celular você vê que tá uma visualização bem agradável bem bonita enfim aqui eu escolhi uma paleta de cores que tem bastante contraste né então é muito interessante você prestar atenção nesses detalhes né aqui ó eu posso vir aqui e posso salvar o rascunho para mim não perder daí que que acontece se você sair daqui do WordPress por exemplo e voltar outro dia para editar você consegue parar aqui da onde você começou então você tem que tomar cuidado para você não sair sem salvar né porque
às vezes você perde aí o seu Progresso ou também você pode estar publicando direto olha aqui ó cliquei em publicar posso clicar aqui ó tá assim então o nosso site já tá ganhando forma o nosso site vamos voltar aqui vamos adicionar aqui também alguns box aí com serviços né então para isso eu vem aqui no maizinho flexbox vou selecionar essa estrutura aqui vou vir aqui avançado aqui no decorrer do site pessoal sempre vou deixar 100 pels superior e 100 pixels inferior né isso em todas as enfim os contêiners aí que eu ia adicionando ao longo
do site daí aqui que vem uma grande sacada para você economizar tempo aí na sua edição né você pega um texto que tá pronto copia vem aqui e cola então aqui você já tem um texto formatado né daí eu posso vir aqui vamos pegar aqui ã deixa eu ver aqui ó benefícios copiar benefícios Vamos colocar só em letra maiúscula aqui assim posso pegar esse outro textinho copiar vir aqui colar obviamente esse aqui eu vou alterar aqui ã a cor dele assim E também o tamanho is aqui eu vou deixar padrãozinho 36 pixels para ele diferenciar
também aqui do primeiro tá deixa eu tentar ajustar Isso aqui acho que ele puxou errado aqui vamos ver aqui agora sim ó titulo Zinho aqui copiar vir aqui colar Agora eu vi no maizinho vou adicionar um contêiner vou pegar esse contêiner vou colocar ele linha horizontal e daí eu posso vir aqui ó e adicionar outros contêiners e só duplicar e duplicar e duplicar daí eu venho aqui nesse principal avançado e zero o espaçamento daí que que eu posso fazer aqui posso vir aqui no mais e posso né Eh enfim inserir o o conteúdo aqui dos
contêiners né então por exemplo vamos adicionar aqui um ícone e vamos adicionar aqui um texto ó Então vamos ver que que a ia me gerou aqui ó o textinho aqui ã planejamento estratégico vou copiar isso aqui vou vir aqui vou dar um control V assim me gerou um título Zinho aqui ó vou copiar esse título posso vir aqui ó duplicar vir aqui e colar o título esse ícone aqui posso deixar alinhado para cá assim e agora eu personalizo melhor ã isso aqui né Vamos escolher aqui um ícone que fique mais de acordo aí com o
que tá escrito Deixa eu ver aqui no início deixar um calendário aqui aí Vamos alterar a cor desse ícone posso deixar nessa cor aqui esse titulo Zinho aqui vamos colocar ele na nossa tipografia secundária o peso colocar aqui um pouquinho mais de peso e também ó posso personalizar do jeito que eu quiser e esse outro aqui vou deixar isso aqui deixa eu ver tin é uma cor preta mesmo assim desse jeito Posso reduzir um pouquinho assim ó a opacidade né enfim aqui nesse contêiner estilo Vamos colocar uma cor nele aqui quero colocar um Tonzinho de
Cinza aqui bem de leve deixa eu ver assim ó não sei se dá para diferenciar muito aí pelo vídeo né porque às vezes não aparece mas tá um Tonzinho levemente diferente aqui do branco eu venho aqui também em borda e ó coloco uma bordinha de uns 10 pixs aqui ó inha redondinha ó onde eu tô com meu mouse e aqui em avançado preenchimento de uns 40 pixels desse jeito assim Daí você pode pegar isso aqui e duplicar Ó você vem aqui exclui os outros e vai duplicando um e excluindo outro né daí você já tem
tudo que legal agora basta eu pegar isso aqui e eu alterar o conteúdo né eu alterar os textos ó deixa eu vir até embaixo aqui aí eu pedi para ele me gerar melhor aqui isso aqui né então vamos copiar ó eu nunca gosto pessoal de colocar o texto direto aqui porque aqui ele já fica formatado né então às vezes você copia um um texto formatado de outro site e você cola aqui e ele fica estranho tá então sempre gosto de vir aqui em texto e aqui olha não tem nenhuma formatação ó aqui sim eu venho
aqui e colo ok então fica essa recomendação esse outro texto aqui vou copiar vou vir aqui e vou colar eu venho aqui e eu mudo o ícone e eu faço isso com os outros ó beleza está aqui então a descrição aí do enfim dos benefícios né daí você consegue fazer Essa gestão aí e adicionar quantos benefícios aqui você quiser vamos ver aqui no tablet aqui no tablet Olha só eu vou vir aqui no navegador que vai ficar mais fácil Essa visualização Então aqui estão mostrando os contêineres Eu tenho esse contêiner aqui ó que ele é
o contêiner que ele tem todos esses outros contêiners dentro deixa eu fechar fechar e fechar aqui ó tenho um dois três quatro contêiners que é esse aqui 1 2 3 4 Eu tenho esse aqui que é o principal né e eu tenho esse outro ainda aqui que é o o o grande né o contêiner principal na verdade e esse aqui abrange esses quatro Tá eu vou pegar esse aqui ó esse contêiner aqui vou vir no layout e aqui eu vou ajustar a direção dele para baixo e aqui eu posso alinhar os itens né no caso
já está Ah ao centro e eu posso regular a largura deixa vir aqui em avançado alinhar-se aqui agora sim posso deixar aqui em porcentagem 50% ou sei lá 70% is quer dizer que 70% do tamanho do tablet vai est abrindo aqui essa opção Ok ainda aqui eu vou manter 100 superior 50 100 50 vou deixar assim mais ou menos vou voltar nesse outro aqui ó posso deixar 100% mas ele puxa os 50 pixels que eu coloquei lá então eu vou colocar aqui um 70% assim ó então ficou uma visualização bem agradável e você consegue fazer
Essa gestão aí também no seu vamos ver aqui no celular vou clicar nesse contêiner aqui aqui no celular eu vou fazer diferente tá vou colocar 50 pixels superior 20 50 e 20 desse jeito assim esse texto aqui vou vir em estilo eu vou diminuir ele para uns 25 pixels assim esse benefícios aqui 14 pixels mesmo mas poderia reduzir mais ainda se eu quisesse Ok ó tá ficando assim então a nossa página inicial vou publicar para mim não perder esse Progresso Vamos ir mais mais embaixo Aqui aqui eu vou adicionar também um coner Zinho aqui né
uma sessão falando sobre a empresa né então interessante colocar uma uma foto da empresa Um textinho e tal né então para isso vouv no maizinho flexbox vou selecionar essa estrutura aqui ó aqui desse lado esquerda onde eu tô com meu mouse eu vou colocar uma imagem e aqui desse lado direito então eu vou colocar os textos né Vamos lá então vou vir aqui adicionar uma imagem vamos pegar aqui do meu computador eu vou colocar essa imagem aqui pode ser vou vir aqui só vou reduzir o tamanho dela né porque ela tá num tamanho absurdo ó
3700 pixels então aqui como essa imagem ela não vai ser uma digamos assim uma imagem de background né de fundo ela não precisa ser um tamanho tão grande né então aqui ó em pixels pode ser sei lá uns 800 piels assim ó horizontal né vertical 1200 vou dar um ok ó ela ficou assim então posso até reduzir aqui um pouquinho mais ó posso deixar assim mais ou menos tá mas não tem assim um tamanho que seja padrão né mas é recomendado você utilizar tamanhos aí em torno de 800 pixels 900 700 600 Beleza vou salvar
aqui ok ó tá ela aqui dimensionada já então vamos subir ela aqui para WordPress vou vir aqui tá aqui ela fazendo envio ok selecionar Beleza eu vou clicar nessa imagem aqui eu vou vir em estilo aqui eu posso colocar uma borda ó deixar ela redonda nesse caso vou deixar uma bordinha aqui de uns 10 pixels para ela ficar padrão aqui com as outras bordinhas também com a bordinha aqui do botão né que tá tudo aí em 10 pixels Ok vamos vir aqui no mais aliás aqui eu posso pegar textos prontos né Vamos pegar esse aqui
ó copiar vir aqui colar vamos deixar alinhado aqui para a esquerda vamos ver qual texto que eu vou colocar aqui deixa eu achar aqui colocar esse textinho aqui aliás esse aqui nossa missão contol V Ok vou vir aqui copiar colar vou ajustar aqui pra esquerda copiar esse outro texto vir aqui vou colar esse aqui também ó tá formatados esse textinho ó vou vir aqui copiar V aqui colar e agora aqui eu vou colocar essa versão do texto aqui que tá maior né vou copiar vou vir aqui vou dar um ctrl v Ó ficou assim o
texto um texto bem grande ã detalhe que não quebrou a linha aqui né para quebrar a linha você pode estar fazendo isso aqui ó BR e BR desse jeito assim Pode ver que Agora quebrou a linha eu pego isso aqui eu copio e eu colo aqui assim aí claro né Se fizer sentido para você você coloca um texto menor ou um texto maior enfim isso vai de cada um aqui ó deixa eu ver se eu consigo regular aqui os espaçamentos Ó coloquei uns 50 pixels para não ficar tão junto ok esse textinho aqui eu vou
diminuir ele deixa eu vir aqui nesse final não vou deixar tão grande também assim e vou colocar mais um botão aqui copiar vou vir aqui vou colar o botão nesse caso aqui ó quando eu passo o mouse no botão ele fica todo branco eu posso colocar uma bordinha nele se eu quiser né venho aqui em estilo ao passar o mouse tipo de borda sólido normal a borda fica essa cor aqui e ó ao passar o mouse a borda fica dessa cor assim ó ficando desse jeito assim vamos adicionar mais Um textinho aqui Opa aqui vamos
colocar como se fosse uma uma assinatura aqui ó vamos pegar isso aqui vamos colocar ã dessa cor assim e vamos achar alguma fonte diferente aqui para ficar como se fosse uma assinatura tá ó assim mais ou menos Olha eu posso aumentar o tamanho mudar a fonte aqui no espaçamento posso colocar um pouquinho mais para cima beleza ficou assim ó esse testinho aqui Botei sem querer eu acho aí bom ficaria assim então uma sessão aí de enfim de sobre empresa né mostrando a missão o textinho uma assinaturas inha aqui botãozinho vamos ver aqui no tablet ó
vou fazer o mesmo esquema que eu fiz ali antes tá esse aqui 100% E esse outro contêiner aqui também 100% desse jeito assim porém vamos pegar isso aqui vamos deixar aqui preenchimento superior H zero direita 50 inferior 50 e esquerda 50 e essa imagem aqui também 50 e 50 eu posso vir aqui também ó e ajustar a porcentagem total né deixa eu ver o que que eu tinha colocado aqui nesse aqui vou deixar aqui 100% assim esse outro contêiner aqui de cima eu vou ajustar para ficar igual esse ó que nesse aqui na verdade ele
ficou cadê Aqui ó 5050 pegar o navegador Aqui é ess aqui ó deixar em 100 e daí aqui 5050 fica tudo padrão né no tablet no celular vamos ajustar melhor isso aqui V clicar nesse contêiner aqui no celular vai ficar só 20 pixels assim e aqui eu posso colocar zero né direita 20 inferior 50 esquerda 20 desse jeito assim esse texto aqui Vamos diminuir um pouco aí ficando assim então no celular no responsivo perfeito Vamos pegar esse contêiner aqui e eu vou adicionar 100 pixels aqui embaixo ó tá ficando assim então o nosso site beleza
vamos publicar aqui para não perder esse Progresso bom agora aqui embaixo eu vou adicionar mais umum contêiner aqui com alguns serviços né para facilitar o nosso processo eu posso pegar esse aqui que já tá Prontinho ó copiar só vir aqui e colar e agora vou personalizar ele totalmente diferente posso vir aqui em estilo Vamos colocar essa cor aqui por exemplo vamos adicionar uma bordinha aqui superior 50 direita 50 assim ó Você pode adicionar também inferior né se você quiser vou deixar só assim aí aqui ó posso deixar essa mesma cor ou até mesmo trocar a
cor acho que aqui vai combinar essa mesma cor né Vamos pegar aqui os texos os os serviços aqui ó nossos serviços vamos copiar esse textinho aqui então assim Vou deixar só serviços mesmo aí beleza vamos copiar esse outro textinho aqui vamos vir aqui vamos colar vou deixar ele na cor branca Ok e aqui ó eu posso estar alterando Então os serviços né copiar colar vou copiar esse outro aqui vou colar aí esse aqui eu posso deixar sem os [Música] [Música] [Música] iconeinstagram colocar um botãozinho vamos copiar esse botão Cadê vamos virar aqui vamos colar só
que aqui eu vou fazer diferente vou deixar esse botãozinho de uma maneira mais discreta tá aqui no link ó Aí fica o seu critério né se você quer colocar para cada um desses serviços o link direcionando para WhatsApp ou se você quer direcionar pra página de de serviços ó copiar o link aí o usuário clica o usuário vai lá paraa página de serviços e na página de serviços é mais enfim detalhado colocar aqui saiba mais assim ouin estilo eu vou deixar ele sem o plano de fundo aqui esse aqui ó vou deixar sem a borda
também e o preenchimento eu vou zerar e a cor vou deixar dessa cor assim vou passar o mouse no caso a borda aqui fica transparente né tá sem borda o fundo também e o texto pode ser assim mesmo esse outro textinho aqui eu posso aumentar um pouquinho para enfim diferenciar assim mais ou menos tamanho 22 assim aí eu venho aqui ó e eu estilo nos outros esse botãozinho na mesma coisa ó ficando desse jeito então a parte aqui de serviços no tablet ó você pode ver que Como já estava esse contêiner aqui ó ele já
tava com com os espaçamentos tudo otimizado aqui no tablet ele Já puxou também tudo bonitinho ó tudo otimizado então nem tem o que fazer aqui vamos ver se puxou do celular puxou também ó tudo aí otimizado OK vamos publicando aqui né para não perder nada Vamos visualizar uma nova guia como que tá ficando o nosso site tá desse jeito assim então aí perfeito vou adicionar mais uma enfim um contêiner aqui com uma algumas fotos né pode até servir aí como uma Talvez uma galeria de fotos né como que eu vou fazer isso então posso pegar
esse aqui copiar vir aqui colar aí eu vou excluir esses contêiners aqui vou excluir vou excluir e vou excluir Ok vou deixar esse texto mesmo aqui só para ilustrar né e aqui eu vou pesquisar por Carrossel de imagens né ou encontrar a opção ali de Carrossel de imagens daí eu vou vir aqui no meu computador e aqui eu separei algumas imagens também para colocar em Carrossel tá detalhe pessoal que essas imagens aqui ó elas estão todas no tamanho 600 por 771 tá daí Isso Aqui varia aí de acordo com o seu projeto né como eu
falei imagens para você pôr Ao decorrer do site é sempre interessante manter essas proporções né 600 pixels 700 800 900 não mais que isso justamente para não pesar demais aí no seu site Então vou selecionar essas quatro imagens as quatro estão na mesma resolução Ok vou vir aqui em criar galeria inserir galeria ó Vamos ajeitar bonitinho isso aqui resolução da imagem completo slides a mostrar posso colocar para mostrar aqui os quatro slides ou três ou dois ou deixar em quatro mesmo slides para rolar padrão esticar imagem não navegação posso deixar setas e pontos que é
aqui onde eu tô com meu mouse ó setinha e aqui tem os pontos ou deixar nenhum nesse caso vou deixar nenhum mesmo para ficar mais clean né enfim link Você pode adicionar links personalizados legenda você pode colocar uma legendinha aqui embaixo de imagem e aqui tem opções adicionais como reprodução automática pausar ao passar o mouse a velocidade a direção você consegue configurar tudo isso ok aqui em estilo ó espaçamento você vem aqui em personalizado e aqui por padrão já veio 20 pixels e você deixa um espaçamento que você acha interessante para ficar entre as imagens
Ok ainda aqui nesse coner eu posso vir aqui porcentagem e colocar em 100% né Desse modo ó as imagens ficaram 100% do tamanho aí do nosso site tá do tamanho aqui da tela que está abrindo né Vamos visualizar aqui numa nova guia ó ficando assim então ok aí no tablet Ó você ajusta também no tablet aqui por padrão vem duas dois slides né você pode estar mudando isso ou Enfim vou deixar em dois aqui e no celular a mesma coisa celular você consegue est mudando né só que aqui no celular eu vou vou zerar aqui
vou zerar aqui esse título aqui vou dar uma marinha aqui na direita ó 20 e 20 e esse outro aqui também ó 20 e 20 assim e os slides vou deixar uns 10 pixels assim beleza deixar assim no celular ok ok aqui no tablet eu posso vir aqui e fazer a mesma coisa ó assim perfeito ficando assim então no tablet assim no celular e assim do desktop colocar aqui diferente né colocar aqui nosso escritório só para ilustrar mesmo tá pessoal aí Beleza vamos publicar aqui embaixo agora eu vou adicionar também alguns depoimentos de clientes vamos
ver como que eu vou fazer isso clicar aqui em flexbox vou selecionar deixa eu ver pode ser esse aqui eu venho aqui adiciono aliás eu vou excluir esse contêiner aqui eu vou vir aqui eu vou duplicar então o que que a gente tem a gente tem três contêiners Ok eu vou vir aqui vou vir estilo eu vou colocar uma cor cinza para diferenciar colocar essa mesma corzinha aqui né essa corzinha Eu nem eu nem adicionei copiar aqui eu nem adicionei nas minhas cores globais né Poderia ter adicionado cont control V assim e vou deixar aqui
também 100 pixels superior 100 pixels inferior desse jeito assim posso pegar um Icone Zinho aqui ó esse aqui copiar colar aqui eu vou colocar essa opçãoincorreta [Música] fica muito mais rápido muito mais fácil para você tá fazendo toda enfim toda essa gestão né inclusive aproveitando a o gancho né eu vou deixar na descrição do vídeo também o link do meu pack de templates tá e basicamente isso aqui é um pacote com mais de de 40 Landing pages prontas que eu desenvolvi e eu disponibilizo tudo isso aqui por um preço simbólico tá detalhe que aqui não
é não são um site completos né igual esse aqui que eu tô mostrando né que tem várias páginas e coisas são lunching pages né ou seja páginas de venda aqui mais focadas aí na venda de determinado produto ou serviço ó então tem várias aqui e daí como que funciona na prática você adquire o pack você tem acesso a todas essas Landing pages né E quando você tiver aqui no no elementor né fazendo as edições você consegue vir aqui em modelos ó meus modelos e fazer o envio aqui dos dos modelinhos aí do modelo né em
específico que você quiser do seu computador aí que você vai baixar no PC né em poucos segundos você tem qualquer uma dessas páginas prontas aqui aí na palma da sua mão e é só você est fazendo as edições né você trocando as cores você tá trocando aliás as cores as imagens os textos enfim fazendo tudo do seu jeito e publicando Beleza então esse linkzinho aí vai est na descrição tudo feito aí com WordPress e elementor disponibilizo esse pack a por um preço simbólico então você pode estar adquirindo e detalhe que quando você compra você tem
o acesso vitalício a ele e também você tem direito a atualizações Ok então você pode estar acompanhando aí todas as informações o link vai est na descrição do vídeo Ok vamos voltar aqui no caso Vamos criar né ã o que dizem nossos clientes então eu vou vir aqui eu vou adicionar uma imagenzinha e eu vou colocar aqui como se fosse a imagem de um cliente né aqui ó Peguei umas imagens bem pequeninhas ó essa imagem ela tem 72 pixels por 72 pixels vou selecionar Ok vou deixar alinhado para a esquerda aqui em R da borda
ó posso colocar uns 50 pixels de borda e pode ver que ela já fica Redonda vou vir aqui no maizinho colocar umas estrelinhas aqui também vamos achar aqui a classificação de estrelas aqui ó classificação ó arrasto para cá tá aqui as estrelinhas você consegue fazer a gestão dessas estrelinhas aqui enfim mudar até cor né se você quiser vou deixar padrãozinho assim e aqui então embaixo Você adiciona o depoimento né Vamos pegar esse textinho formatado aqui copiar vou vir aqui vou colar vamos pegar aqui do chat GPT assim beleza vamos pegar aqui também esse outro textinho
que tá pronto vou vir aqui vou colar elear o nome da pessoa aqui ok desse jeito assim aí eu posso pegar esse esse contêiner aqui e alterar a cor dele para ele diferenciar aqui então deixar uma cor branca assim bordinha uns 10 pixels avançado preenchimento 40 eu venho aqui e eu duplico desse jeito assim aqui eu só vou vir no layout desse contêiner colocar uns 20 pixels assim depoimento aqui ó vamos copiar colar aqui o nome da pessoa e claro né se se fizer sentido para você você pode estar colocando prints do WhatsApp né fazendo
aproveitando esse esse carro celinho aqui ó em vez de colocar imagens colocar prints do WhatsApp né ou até mesmo vir aqui e adicionar sei lá um vídeo n colocar o videozinho aqui ó aí você vem aqui coloca o link do do YouTube enfim fica ao teu critério né eu vou deixar desse jeito assim aqui no tablet Vou ajustar assim vou deixar tudo alinhado ao meio 100% 100% 100% aí desse jeito assim ó pode ver que segue o padrão né as bordinhas aí tudo fica 50 pixels no tablet só aqui no celular eu vou colocar diferente
né então aqui vai ficar assim 50 20 50 e 20 ok beleza vamos publicar e beleza agora pra gente finalizar essa nossa página de home aqui eu vou adicionar uma última chamadinha para ação então para fazer isso eu vou pegar esse contêiner aqui vou copiar ele vou colar aqui vou excluir todos esses blocos aqui e vou colocar Um textinho aqui vamos ver vou pegar esse aqui mesmo copiar colar vou diminuir um pouquinho aqui para ficar em duas linhas assim aqui vou colocar entra em contato e vamos colocar o botão aqui então aliás vou pegar esse
aqui copiar colar deixar o centro aí no botão né como eu falei você vê se você quer direcionar a pessoa pro WhatsApp ou pra página de contato nesse caso aqui eu vou direcionar pessoa para a página de contato ok mas aí fica o seu critério aqui também eu posso colocar uma sobreposição zinha de fundo né Posso pegar uma imagem aqui vamos pegar essa aqui mesmo tamanho completo posição centro anexo rolar é isso aqui fixo é isso aqui eu vou deixar rolar repetir não repetir tamanho ã cobertura assim e daí você regula a opacidade Ok vou
deixar assim então ainda aqui no contêiner posso tirar essa borda aqui né porque já tem a borda lá ó deixar quadradinho assim posso vir aqui também colocar um pouquinho mais de espaçamento assim então vamos ver aqui no tablet Ok e aqui no celular vamos ajustar aqui eu vou pegar esse texto ajustar a altura da Linha aqui em 1.2 assim esse botãozinho Vamos colocar para cá e esse entra em contato para cá e aqui eu vou ter que diminuir um pouquinho o tamanho assim ó desse jeito então no celular ok vamos publicar perfeito vamos acessá aqui
é o canal aprendendos sites.com meu domínio principal aqui ó Então pode ver que tá abrindo tudo certinho né Tudo conforme eu fiz aí o carr suelzinho depoimentos chamada para ação perfeito pessoal agora vamos partir aqui para a personalização das outras páginas tá E para isso olha só deixa eu fechar isso aqui sim eu vou abrir aqui numa nova aba o meu painel do WordPress e olha só o que que eu vou fazer essa minha página de home aqui página principal eu vou editar ela com elementor e eu vou deixar em uma aba do meu navegador
ela aberta em outra aba eu vou abrir as outras páginas tá E por que que eu vou fazer isso porque vou conseguir copiar elementos prontos daqui para as outras páginas isso Vai facilitar aí muito o meu trabalho então vamos pegar aqui a página de serviços aqui que é a próxima ó editar e vamos editar com elementor beleza abriu a página aqui que que eu vou fazer agora vou vir aqui na página layout da página elementor largura Total eu posso vir aqui ó pegar por exemplo esse banner Inicial copiar posso vir aqui e posso colar e
aqui eu posso colocar o nome da página ó to página de serviços posso vir aqui e colocar serviços desse jeito assim eu posso pegar isso aqui e diminuir um pouco deixa eu ver uns 30 uns 40 assim mais ou menos ó para não ficar esse banner grandão aqui do início né ó serviços daí que que eu faço aqui eu pego eu coloco os serviços né antes disso posso colocar essa esse outro contêiner aqui ó com os benefícios e tal ó copiar vir aqui colar e aqui os serviços ó copiar V aquii colar aí eu posso
deixa eu esolir serviços de novo aqui aí vou deixar assim esses serviços Deixa eu só ver que tamanho que tá aqui ah puxou o mesmo tamanho né aí vou aumentar esse aqui para uns 60 assim e os serviços aqui também para uns 60 para ficar maior tá pessoal aí aqui nos serviços Vamos abrir o navegador aqui aqui esse contêiner ó posso vir aqui e duplicar e daí você faz isso quantas vezes você quiser né você vem aqui e e duplica né desses botõezinhos aqui ó que tá direcionando paraos serviços você pode vir aqui e Direcionar
para o WhatsApp né então wa.me barra código do país código do Estado e os nove números aí do telefone tá então você pode repetir esse processo aqui com todos os botõezinhos ou Enfim fazer da forma que você achar melhor né ficando dessa maneira então a página aí enfim de serviços né vamos ver aqui ó como eu só copiei ali os contêiners automaticamente já está tudo otimizado para aí os outros dispositivos né Deixa eu só pegar esses serviços aqui aliás aqui avançado largura 100% perfeito posso aumentar também um pouquinho esse texto aqui aí ó aí você
personalizar do jeito que você quiser né Ah você quer adicionar mais informações você quer enfim colocar mais vídeos aqui mais fotos né você vai fazendo aí conforme realmente é a tua necessidade Ok vou publicar vamos voltar aqui aliás deixa eu salvar aqui essa fontezinha que eu coloquei um pouquinho maior agora sim ó vamos voltar aqui na minha página inicial ó tá assim minha página inicial página de serviços aí inclusive essa imagem de trás aqui ó você pode mudar né minha recomendação é cada cada aba aqui do seu site você colocar uma imagem diferente né enfim
fazer uma imagem mais de acordo ou fazer uma imagem personalizada né justamente para diferenciar Ok a página de sobre vai seguir a mesma lógica ó vou clicar aqui deixa eu ver não vai abrir o editor aqui vamos voltar aqui para o painel páginas todas as páginas aqui ó página de sobra editar editar com elementor ó mesmo esquema vou vir aqui layout da página elementor largura total aí eu venho aqui ó copiar vamos excluir essas informações aqui aí ó página de sobre só vamos ajustar aqui acho foi 40 pixels né que eu coloquei aí aqui vamos
ajustar 36 aí perfeito agora vou ver os elementos que eu quero adicionar nessa página de sobre só só dar um espaço aqui preenchimento de 100 aí posso colocar esse carr selz inho aqui e assim por diante né Vamos só tirar esse espaçamento aqui aí ó a pagin fazinha de sobre vamos publicar vamos voltar aqui no início página de serviços página de sobre OK agora tem a página de contato aqui nessa página de contato vou colocar junto com você um formozinho de contato tá então vou voltar aqui para o painel do do WordPress de só aumentar
um pouquinho esse meu Zoom E qual é que é a dinâmica aqui né para você colocar um formulário de contato precisa ter O elementor pro deixa eu ver se eu consigo puxar aqui aqui ó no elementor ó tem essa opção form né que é opção bloqueada E aí Claro você precisa adquirir o elementor pro para você conseguir colocar essa opção só que como eu falei lá no início do vídeo a gente vai utilizar apenas o elementor gratuito nesse tutorial então o que que eu vou fazer assim como a gente adicionou aqui o nosso o nosso
cabeçalho do site com um plugin alternativo e o nosso rodapé do site com o plugin alternativo a gente vai adicionar também o formulário de contato utilizando um plugin alternativo beleza aqui no meu canal do YouTube se você vir aqui em playlists Olha só tem várias playlists tá e tem essa playlist em específico aqui formulários com WordPress e elemento vou clicar aqui nessa playlist e olha só acontece que não existe apenas um plugin alternativo de formulário existem vários plugins tá então tem esse vídeo aqui que eu fiz com o Mat form tem o contact form S
tem o formulário de contato do elementor pro tem esse outro vídeo aqui que eu fiz com elementos kit e deixa eu ver qual mais e tem esse aqui que eu fiz com o ã Ninja forms tá então são vários plugins diferentes de formulário tá E qual é que é a minha recomendação aqui eventualmente pode acontecer de você tentar configurar algum plugin específico e esse plugin dar erro tá isso é um pouco comum beleza Inclusive a a última vez que eu tentei utilizar esse plugin aqui desse vídeo aqui que é o Mat form né esse aqui
que eu tô com o meu mouse ó IC conzinha ali do metform esse plugin ele deu erro eu não consigo configurar beleza Porém Aqui eu vou tentar utilizar outro plugin né mas fica essa dica se eu utilizar um plugin específico nessa aula e você repetir o processo ele não funcionar para você você vem aqui nessa playlist e você tenta ver outro vídeo aqui para ver qual que vai dar certo tá E por que às vezes dá erro que não funciona justamente porque esse esses plugins assim do WordPress eles atualizam muito rapidamente né então o elementor
esses plugins e adicionais plugins de formulário eles estão atualizando toda hora né E às vezes ele sofrem alguma atualização que acaba dando bug que acaba dando erro e não dando certo ok então só para esclarecer e para ninguém ficar perdido eu vou utilizar aqui o ninja forms para essa nossa aula de hoje tá que foi um dos últimos plugins que eu utilizei aqui e eu gostei bastante do Ninja Forums Ele é bem simples para você criar formulário de contato beleza porém se você se segir aqui com o ninja fors e der erro aí você vê
outro vídeo e vê outro plugin aí que enfim você testa outro plugin para ver se vai dar certo beleza dessa maneira não precisa a gente utilizar aqui O plugin do enfim o formulário aqui do Plugin do elementor pro Ok então para isso vou vir aqui em plugins adicionar plugin aqui eu vou pesquisar por Ninja forms e é esse plugin aqui segundo plugin tem também o WP for mas particularmente eu prefiro o ninja forms achei ele mais fácil aí de de lidar Enfim vou instalar ele aqui então plugin instalado vamos ativar o plugin beleza só para
você entender então a gente tem o elemento instalado a gente tem o ultimate addons né que foi graças a esse plugin que a gente criou o cabeçalho rodapé e agora a gente tem o ninja Forums então pra gente criar o nosso formulário de contato bom com o ninja forms ativo Então você vai ver que vai aparecer ao opção aqui de ninja Forums aqui no painel do WordPress então você pode estar clicando aqui deixa eu clicar aqui agora não ó basicamente ele já vem aqui com o formularz padrão eu vou clicar aqui nesse formulario e ele
pede aqui nome e-mail mensagem e ele tem um botãozinho tá isso aqui a gente já consegue personalizar eu já vou te ensinar como que você faz isso eu vou voltar aqui é interessante ressaltar que aqui a gente tem um short code que é esse short code aqui ó então para você inserir esse formulário lá no elementor você vai copiar esse shortcode e depois você vai colocar lá no elementor Beleza vou clicar mais uma vez aqui vou clicar aqui em editar e aqui ó consigo editar Então posso colocar aqui nome e posso né pedir aqui pro
usuário se vai ser obrigatório esse campo ou não aqui em mostrar a gente tem várias opções que inclusive aqui o o placeholder né Posso colocar assim ã digite seu nome de vai aparecer não apareceu mas o Place holder é o que aparece aqui onde eu tô com o meu mouse ó nesse campinho tá nesse caso eu vou deixar assim mesmo ã texto de ajuda descrição você pode colocar várias opções aí aqui eu não vou mexer aqui tem a opção do e-mail então o usuário vai digitar o e-mail você vai deixar se é obrigatório ou não
e a mensagem né Vamos só mudar aqui para mensagem assim aí você pode vir aqui e adicionar um novo Campo né então tem vários outros Campos aqui por exemplo você pode colocar uma caixa pra pessoa selecionar Entre várias opções você pode pedir o endereço da pessoa a cidade o país primeiro nome último nome telefone vamos arrastar um campinho na prática aqui ó telefone por exemplo ó arrastei para cá já apareceu o telefone Campo obrigatório Deixa eu só ver Por que que o nome aqui aqui ó beleza tá aparecendo um espaço aqui vou clicar em feito
tem opção aqui também de e-mail e ações aqui eu recomendo você deixar todas essas informações marcadas né então você pode vir aqui ó em editar e aqui o próprio plugin ele vai dar uma explicação para você do que que significa essa ação o mais importante aqui é essa aqui ó ã e-mail de notificação vou clicar aqui que que vai que que vai acontecer aqui então você vai colocar vai deixar esse nome aqui né para você vai colocar aqui o seu e-mail tá o seu e-mail você pode deixar padrão assim que ele vai puxar o seu
e-mail aí do seu WordPress ou você pode colocar um e-mail seu para toda vez que uma pessoa ela preencher essas informações você receber essa notificação no seu e-mail Ok eu vou deixar Enem feito aqui mesmo aqui temos algumas opções avançadas Eu não vou mexer vou clicar em publicar aqui vou fechar ó Então pode ver que ele tem esse short code eu vou pegar esse short code e eu vou copiar ele e agora deixa eu abrir uma nova guia aqui eu vou vir aqui na página de contato vamos editar vamos editar com o elementor aqui beleza
antes de mais nada vamos só configurar ela aqui igual a gente fez lá nas outras assim vamos pegar aqui texto Beleza o banner aliás né contato assim perfeito deixa eu ver o que que eu posso usar aqui aí vou deixar assim mais ou menos esse aqui 50% esse outro aqui 50% vamos excluir esse textos aqui vamos pegar Um textinho aqui de contato copiar vamos vir aqui acho que eu colar aqui esse texto assim copiar esse outro aqui beleza Vamos colocar aqui uns 100 pixels superior e agora sim ó vou vir aqui no maizinho eu vou
pesquisar por short code assim ó eu vou arrastar para cá essa opção de short code e exatamente aqui você vai vir aqui você vai dar um copiar e você vai colar então o short code aí do seu formulário ó vou clicar em publicar eu vou abrir aqui numa nova guia e olha só que legal aqui puxou então automaticamente lá o nosso formulário né então o usuário ele vai vir aqui ele vai colocar o nome dele ele vai colocar o telefone ele vai colocar o e-mail e ele vai colocar aqui uma mensagem e vai clicar aqui
para enviar ó e o e-mail foi enviado com sucesso né claro que aqui O plugin ele tá aparecendo as informações em inglês né então você precisa vir aqui no plugin e fazer todas as configurações Ó você pode vir aqui em inscrições selecionar o formulário e ó já apareceu aqui ó teste o telefone o e-mail e a mensagem através dessa telinha aqui você vai ter acesso aí a todas as pessoas que mandarem mensagem para você beleza e aqui em configurações você consegue então fazer uma série de de configurações Enfim vou voltar aqui no painel de controle
nas configurações editar vou vir aqui nesse botãozinho ó e aqui no rótulo eu consigo mudar ó vou colocar aqui Enviar mensagem desse jeito assim ol aqui avançado então tem essa opção configura de exibição você clica aqui tem opção de mostrar o título do formulário eu vou deixar isso aqui desmarcado para não aparecer limpar formulário completado com sucesso eu vou deixar marcado esconder formulário completado com sucesso eu vou deixar desmarcado tá E aqui tem várias outras opções que você consegue est enfim conferindo ok aqui em restrições também você consegue fazer algumas ã configurações né como por
exemplo requerer Que o usuário esteja logado limite de envios enfim é bem completinho aqui esse formulário vou dar um feito aqui publicar beleza vamos sair aqui vamos vir aqui em contato de novo ó tá assim então né quando o usuário vir aqui e enviar o formulário não vai desaparecer igual desapareceu antes ali Ok bom Então nesse momento pessoal a gente já tem praticamente o nosso site pronto temos a página inicial todas as outras páginas o formulário então basicamente a gente tá chegando aqui no final da nossa aula né porém enfim tem uma série de vídeos
aqui no canal que podem ser úteis para você né então Ten o vídeo aqui ensinando a como colocar botão do WhatsApp aqui on tô com éu Mouse né então você consegue colocar um botãozinho do WhatsApp aqui automaticamente pra pessoa entrar em contato com você eu tenho vídeo ensinando a como instalar as tags do Google o Pixel do Facebook que é muito importante para você que vai anunciar nas redes sociais aqui no canal também como eu falei aqui tem os vídeos da da enfim dos formulários né voltando aqui a gente tem vários outros vídeos aí que
podem ser bem úteis para você tem vídeo ensinando a como fazer se ou seja como otimizar o teu site para o Google vídeo ensinando a como migrar o seu site vídeos ensinando aí a como deixar o teu site muito mais rápido aqui ó como melhorar o desempenho de sites aí com WordPress e al mentor vídeos ensinando Mais também sobre o o commerce né Como que você integra uma loja virtual no seu site então basicamente tudo que você quiser aprender sobre esse universo aí de de WordPress elementor você vai conseguir aprender aqui através do canal beleza
esse vídeo aí foi só digamos uma parte aí de tudo que você consegue aprender assistindo aqui o canal e eu peço que se você viu esse vídeo até o final não esqueça aí de deixar nos comentários que você viu o vídeo até o final e também deixar aí o seu feedback né porque isso aí ajuda muito o canal a crescer e assim eu consigo produzir cada vez mais conteúdo aqui para o YouTube Beleza então valeu e até a próxima [Música] [Aplausos]
Related Videos
Como Fazer uma LOJA VIRTUAL em 2025 com WordPress, WooCommerce e Elementor
2:30:26
Como Fazer uma LOJA VIRTUAL em 2025 com Wo...
Aprendendo Sites
11,059 views
Como Criar um SITE PARA IMOBILIÁRIA com WordPress e Elementor | Passo a Passo
1:55:13
Como Criar um SITE PARA IMOBILIÁRIA com Wo...
Aprendendo Sites
6,725 views
Como integrar um blog em um site institucional com categoria e buscas personalizadas - Elementor Pro
1:34:15
Como integrar um blog em um site instituci...
a Escola de Sites
39,154 views
Curso Completo de WordPress para Iniciantes | Atualizado 2025
1:27:56
Curso Completo de WordPress para Iniciante...
Aprendendo Sites
5,872 views
Como fazer anúncios no Meta Ads em 2025 (Tutorial Completo) | Live #314
1:07:04
Como fazer anúncios no Meta Ads em 2025 (T...
Canal Subido
77,495 views
كيفية تصميم موقع إلكتروني يجذب العملاء في 2025 🙌 # السر وراء تصميم المواقع الاحترافية
42:06
كيفية تصميم موقع إلكتروني يجذب العملاء في ...
Brandlek
214 views
Como Fazer um SITE PROFISSIONAL com WordPress + Elementor Grátis
2:50:03
Como Fazer um SITE PROFISSIONAL com WordPr...
Aprendendo Sites
134,825 views
Como Criar um SITE Completo e Profissional com WordPress + Elementor Grátis
2:57:16
Como Criar um SITE Completo e Profissional...
Aprendendo Sites
61,905 views
Como Fazer um SITE PROFISSIONAL com WordPress + Elementor Grátis (Passo a Passo)
2:18:15
Como Fazer um SITE PROFISSIONAL com WordPr...
Aprendendo Sites
112,379 views
Piperun + WhatsApp: Automação Simples e GRÁTIS! [Passo a Passo] ✨
32:15
Piperun + WhatsApp: Automação Simples e GR...
Avisa APP - Notificações Automáticas
105 views
CURSO GRÁTIS: Como criar site e faturar R$10 MIL por mês
27:17
CURSO GRÁTIS: Como criar site e faturar R$...
Eitonilda
451,149 views
Como Criar Página de BLOG e POST Individual com Elementor Free, WordPress e Royal Addons [Grátis]
28:32
Como Criar Página de BLOG e POST Individua...
Descomplicando Sites
2,672 views
Como Criar um SITE PROFISSIONAL com WordPress na HostGator | 2025
18:56
Como Criar um SITE PROFISSIONAL com WordPr...
Aprendendo Sites
2,552 views
Como criar uma LANDING PAGE no WordPress e Elementor grátis em 2025 -PÁGINA DE VENDAS alta conversão
2:15:10
Como criar uma LANDING PAGE no WordPress e...
Diogo Stein
3,745 views
Como Criar Um BLOG no WordPress, Elementor Free e Royal Addons Grátis [Passo a passo do Zero]
1:57:37
Como Criar Um BLOG no WordPress, Elementor...
Descomplicando Sites
18,231 views
Como Fazer uma LANDING PAGE PROFISSIONAL em 2024 com Wordpress + Elementor
1:32:36
Como Fazer uma LANDING PAGE PROFISSIONAL e...
Dimas Web
5,544 views
Como Criar uma Landing Page de Alta Conversão no Wix
1:52:13
Como Criar uma Landing Page de Alta Conver...
8 Book
13,347 views
CURSO DE CRIAÇÃO DE SITES PARA INICIANTES
45:28
CURSO DE CRIAÇÃO DE SITES PARA INICIANTES
Marcos Bertoleti
1,028 views
Como Criar um Menu Mobile Utilizando Wordpress e Elementor em 2024
13:13
Como Criar um Menu Mobile Utilizando Wordp...
Desenvolva Sites
1,266 views
I tried every website builder. This is the BEST
19:31
I tried every website builder. This is the...
Steve Builds Websites
248,629 views
Copyright © 2025. Made with ♥ in London by YTScribe.com