Como Criar um SITE INSTITUCIONAL com WordPress Elementor Grátis [Passo a Passo]

Nesse vídeo eu vou te ensinar todo o passo a passo do zero de como criar esse site institucional aqui [Música] nesse caso eu criei esse site aqui para uma empresa de tecnologia Mas você pode seguir o meu passo a passo e adaptar o site para qualquer nicho qualquer tipo de empresa tá e o legal é que a gente vai criar esse site usando apenas ferramentas gratuitas que é o WordPress E o elemento então mesmo que você não tenha nada de conhecimento sobre o assunto ao final dessa aula você terá criado o seu site profissional 100%

personalizado do seu jeito e sem usar nada de programação ou qualquer tipo de linguagem complexa pois a nossa aula aqui vai ser tudo de fácil entendimento beleza Fala pessoal tudo bem Rodrigo aqui do canal aprendendo sites e antes de começar com o nosso tutorial eu peço que você não esqueça de deixar o like Nesse vídeo e também já se inscrever no canal aí para você tá aprendendo tudo sobre WordPress sobre elemento e sobre criação de sites beleza vamos lá então beleza então pessoal antes da gente partir para a criação do nosso site Eu tenho algumas

observações rápidas aqui porém são algumas observações aí bem importantes que você veja aqui tudo com atenção para não ficar Nenhuma Dúvida tá para você entender exatamente o que eu vou te ensinar como que eu vou te Ensinar e o que você vai aprender tá então rapidamente aqui a nossa primeira observação como eu falei ali no início a gente vai estar criando no site utilizando o WordPress e o elementor tá para quem não conhece o WordPress WordPress aí é uma ferramenta de criação de sites e o elemento é um page builder ou seja um construtor de

sites também é um plugin dentro do WordPress tá então a gente vai estar utilizando os dois juntos WordPress e o elemento que são Ferramentas gratuitas tá ambos possuem aí as suas versões pagas porém a ideia é que nesse vídeo é te ensinar como criar um site gastando o mínimo possível tá para ter o site online Você vai precisar de uma hospedagem em um domínio então o que que é o domínio o domínio vai ser o seu endereço online tá o nome da sua empresa.com no meu caso aqui o meu domínio é aprendendo sites.com e daí

você vai ter o seu domínio tá para registrar esse domínio e contratar Hospedagem obviamente vai ter um custo tá mas é um custo mínimo tá só para esclarecer também a hospedagem aos servidor na internet onde o seu site ele vai ficar armazenado tá então quando a pessoa lá acessa ela acessa o seu site né ela vai acessar pelo domínio e esse domínio ele vai ser conectado ao hospedagem e daí vai exibir o seu site então hospedagem e Domínio Não tem como criar o site né Sem hospedagem e sem domínio tá isso é o mínimo para

qualquer Site online tá aqui na sequência eu já vou te ensinar como contratar domínio e hospedagem por um preço extremamente barato tá perto enfim do site profissional que você vai ter mas Vale ressaltar que esse vai ser o seu único custo tá WordPress e elementos são ferramentas gratuitas e eu vou te ensinar Isso aí até o fim aí é como fazer tudo de forma gratuita o seu site Beleza a segunda observação aqui é que todo o conteúdo do site ela é fictícia ó Então eu tô aqui com o site aberto no caso aqui eu estou

usando esses textos aqui ó em lorem Y tá esses textos eu peguei desse site aqui que são textos para preencher espaços né eu não coloquei textos reais aqui Coloquei todos os textos fictícios ó no serviço tudo aqui e daí você vai seguir meu passo a passo você vai colocar os seus textos tá os seus textos reais aí que você quer colocar enfim da sua empresa e da sua marca do seu negócio tá as Imagens também são todas imagens que eu peguei aqui no freepi ó para quem não conhece o forpic é um banco de imagens

tá então inclusive você pode pesquisar aí no Google por bancos imagens e vai ter uma infinidade de banco de imagens e você pega as imagens ó que nem a imagem desse robozinho essa imagem de fundo aqui ó essa outra imagem é tudo de banco de imagens tá E daí Vale ressaltar que esse site aqui você consegue adaptar ele a qualquer tipo de empresa a qualquer Nicho nesse caso aqui eu fiz um site para uma empresa que de tecnologia tá uma empresa de enfim Inteligência Artificial algo do tipo tá porém se você tem Ah você quer

fazer um site para academia um site para Pet Shop num site para empresa de contabilidade de advocacia enfim qualquer tipo de nicho aí imaginável você vai conseguir fazer o site aqui baseado na minha aula tá pois a estrutura aqui do site ela ela sempre vai ser parecida né porque vai mudar Aqui são as imagens os textos as cores aqui ó tem esse logotipo aqui que inclusive eu fiz no canva ele então você vai pegar tudo que eu vou te ensinar aqui e vai adaptar a sua ideia tá você pode inclusive seguir exatamente aqui a mesma

estrutura aqui que eu vou fazer tá então você pode ver que que é um site bem Completão ó tem um formulário de contato tem depoimentos Ó tem os números da empresa sobre empresa aqui ou descritivo do serviços né aqui eu tenho Outras páginas ó página de serviços sobre contato a gente vai conseguir personalizar isso aqui 100%, tá e a minha terceira observação aqui é para você ler atentamente a descrição do vídeo porque porque na descrição do vídeo eu vou estar deixando aí uma série de aulas complementares Tá ensinando você depois a fazer aí configurações extras

no seu site tá Por exemplo essa aula aqui ensinar a criar o site mas eu tenho outras aulas aqui no canal que eu Ensino você como colocar um botãozinho do WhatsApp aqui no canto a como instalar a tag do Google no seu site a como instalar o Pixel do Facebook enfim como fazer várias configurações úteis aí que você vai precisar posteriormente tá então leia atentamente a descrição os links também que eu vou citar durante a aula vamos estar na descrição Então essa aqui seria só a terceira observação tá e a quarta observação é para você

ver a aula até o Final tá e se for preciso veja mais uma vez porque o que que acontece as aulas aqui no canal algumas né como essa elas são um pouco mais Compridas porém são aulas bem explicativas tá é aula mesmo voltado aí pra pessoa aprender do zero e tem algumas pessoas que não assistem a aula inteira e depois ficam comentando aqui a dúvidas né que eu tiro durante a aula tá então principalmente se você for iniciante veja ela até o final Veja com calma se for preciso veja duas três Vezes para você se

familiarizar conteúdo tá para você ver como não é um bicho de sete cabeças a intenção ali como eu falei não é utilizar nada de programação nem linguagem complexa então mesmo assim que você for uma pessoa totalmente iniciante que nunca fez um site na vida você vai conseguir Criar o seu site aqui seguindo o meu tutorial beleza e se você já trabalha também aí com sites você já cria sites eu espero que esse vídeo aqui agregue aí na sua profissão né se você Trabalha aí prestando serviço de criação de sites né que é uma profissão aí

que tá muito em alta eu espero ter ajudado de verdade aqui com essa aula beleza sem Muita enrolação vamos aqui partir então para a nossa aula né E nesse primeiro momento então eu vou estar te ensinando como contratar a hospedagem e o domínio na sequência vamos estar instalando WordPress dentro dessa hospedagem e dentro do WordPress a gente segue aí com a criação do site tá tava quase Esquecendo aqui no meu computador ó eu separei as imagens então que eu vou utilizar tal logotipo as imagens já está tudo baixadinho aqui também ó as informações então aqui

cores que eu vou utilizar ó eu vou utilizar um tom de verde um tom de azul um preto e um branco ó que são as cores aqui do meu site tá então deixei tudo separadinho e vou criando junto com você e você pega a ideia aí e vai criando junto comigo beleza pessoal vamos lá então beleza Então pessoal nosso primeiro passo aqui vai ser a contratação dos pedágio eu vou estar deixando esse link aqui na descrição e esse aqui ele é um link exclusivo da hostgator com 50% de desconto para você estar contratando a sua

hospedagem hoje mesmo né e ainda você ganha aí um ano de domínio grátis e daí dentro dessa hospedagem a gente consegue instalar o WordPress Enfim fazer várias configurações aí necessárias aí para o nosso site ficar Online Beleza então é só você acessar o primeiro link da descrição tá a hostgator aí na minha opinião é uma das melhores empresas de hospedagem que existe então eu já utilizo aí a hospedagem deles a vários anos nunca tive nenhum problema inclusive aí o site sempre ficam online né Não tem aquela questão da indispo do seu site ficar offline ficar

fora é um servidor aí Enfim uma hospedagem bem confiável tá e com ótimo suporte também Se você tiver qualquer dúvida depois você entra ali do chat online deles e eles respondem na hora ali com pessoas reais prestando o suporte ali 24 horas por dia tá então esse link aqui tá na descrição você vai acessar vai cair nessa página aqui e basicamente eles têm três planos eles têm um plano p o plano m e o plano Turbo eu vou vir mais embaixo Aqui você pode estar acessando o site deles aqui conferindo todas as informações tá vou

vir mais embaixo aqui Porque eu quero mostrar o comparativo ó então basicamente aqui no plano P você consegue criar um site enquanto no plano M você consegue criar vários sites ou seja sites ilimitados e no plano Turbo você consegue criar site ilimitados Porém tem um desempenho melhor tá se você tá começando agora eu recomendo o plano P ele vai atender super bem tá não é só porque aqui o plano turbo tem um desempenho um pouco melhor e o plano p não tenha um bom desempenho tá Inclusive Tem um ótimo desempenho até tem outro vídeo aqui

que eu fiz o canal que eu utilizei um site ali que eu criei com o plano P né e o site estava carregando ali em questão de um ou dois segundos se eu não me engano tá então esse plano aqui é muito bom então você pode estar comparando os planos aqui e vendo o que que faz mais sentido para você tá se você pretende colocar vários sites em uma mesma hospedagem aí você vê se contrata um plano m ou o plano turbo tá E falando nisso também tem outra aula aqui no canal que a gente

ensina como colocar vários sites e uma mesma hospedagem Beleza eu vou vir mais para baixo aqui eu vou contratar o plano p vou clicar aqui encontrar até agora e aqui então a gente vai estar escolhendo o círculo de pagamento Eu recomendo que você escolhe escolhe esse aqui de um ano ó que aí você vai pagar esse valor aqui por um ano e você vai ganhar também um ano de domínio grátis então é domínio e Hospedagem válidos por um ano Por esse valor aqui tá aí se você coloca seis meses ou um mês você vai ter

que contratar o domínio separado tá então é mais vantagem você contratar um ano até três anos né porque você tem domínio e tudo junto beleza aí se você contratar por exemplo há um mês aqui você vai contratar o domínio separado o domínio se eu não me engano em torno aí de 50 reais então você vai pagar r$ 50 domínio e mais esse valor aqui no caso ó todos Os meses tá então vale mais a pena que um ano tá vou clicar aqui em continuar para o carrinho só para mostrar então para você como que funciona

aqui na prática Tá mas é bem tranquilo de fazer essa contratação ó aqui você vai colocar então o seu domínio ó vou colocar aqui por exemplo Rodrigo aprendendo sites tá vou deixar selecionado aqui.com mas eu poderia deixar também ponto com ponto br ou outras extensões eu gosto do zap.com que é enfim o mais conhecido né vou Clicar em pesquisar aqui para ver se esse domínio estaria disponível para mim registrar e você repete esse processo aí com o seu domínio tá Você coloca ali enfim o nome da sua empresa do seu negócio e pesquisa para ver

se está disponível ó nesse caso aqui apareceu domínio disponível então o domínio Rodrigo aprendo no site.com estaria disponível para mim registrar beleza ó vou para baixo aqui daí vou clicar em adicionar o domínio tá essa opção aqui Proteção do domínio eu vou deixar ela desativada se você quer você deixa ativada vindo mais para baixo aqui então tem um resumo do nosso plano tá então o nosso plano ele vai incluir um site né ou seja esse meu domínio aí Rodrigo aprendendo no site.com vou poder criar o meu site ali ao contrário do plano M que eu

poderia adicionar vários domínios tá ele vai possuir também contas de meio ilimitadas certificado SSL que é esse cadeadinho que aparece aqui no domínio ó Que eu tô com meu mouse ó que ah de conexão segura né o criador de sites da hostgator que ela é bem limitado Mas e a gente não vai utilizar ele tá a gente vai utilizar aqui o WordPress e também tem o CPN né que é o software de gestão de hospedagem é FTP limitada enfim várias opções aqui funcionalidades da hospedagem tá mas você não precisa se preocupar muito com isso aqui

que eu vou estar ensinando todo passo a passo para você tá indo mais para baixo aqui então Eu vou deixar selecionado essa opção aqui meio personalizado grátis Inclusive eu tenho outra aula aqui no canal que ensina como criar um e-mail aqui na hostgator e tá integrando esse meio aqui para usar no seu Gmail tá vou tá deixando todos os links aí todas as aulas complementares na descrição do vídeo para você conferir ou mais para baixo aqui tem uns adicionais não vou mexer e Beleza vou continuar aqui para a identificação tá então eu escolhi o Plano

P eh um ano e coloquei ali o meu domínio próximo passo Então você vai estar criando uma conta aí na hostgator Então você vai digitar aqui seu e-mail e criar uma senha e concordar aqui com os termos de serviço né e criar a conta aí o que que acontece na próxima etapa aqui vai aparecer para você colocar mais alguns dados seus como por exemplo do seu CPF ou o seu CNPJ e também o seu CEP o seu telefone celular enfim todos esses dados aí beleza próximo passo daí você Vai estar fazendo o pagamento então você

escolhe ali se você quer pagar por pics boleto cartão de crédito PayPal feito pagamento você vai receber vários e-mails aí no e-mail que você cadastrou aqui ó dando as boas-vindas a hostgator e falando aí que deu tudo certo os dados de acesso à sua conta nesse caso aqui eu não vou continuar para mim não precisar fazer uma contratação aqui tá mas é bem fácil de fazer não tenho muito mistério feito isso você vem aqui no site Principal da hostgator ó hostgator.com.br ó você vem aqui nessa opção ó portal do cliente e clica em acessar e

aqui daí você vai inserir o seu e-mail sim então vai clicar não são robô e vai clicar em entrar aqui vai estar abrindo o painel do cliente ó e aqui vai aparecer o site que você registrou tá nesse caso que eu tenho vários sites Ó mas aí você vai ter só um né se você tiver registrado agora e daí você vem aqui ó nesse caso eu vou fazer O nosso site aqui da aula nesse domínio aqui ó canal aprendendo no site.com Então vou vir aqui do ladinho dele e vou clicar em cnnion E aí vai

estar abrindo serpenio você é pneu basicamente é um software de gestão de hospedagem não precisa você se preocupar aqui com esse monte de informação tá você vai vir até aqui embaixo Aqui Agora vamos instalar o WordPress Então aí nesse nesse domínio tá vou clicar aqui em WordPress povinho instale agora e aqui ó vou deixar Selecionado então no caso canal aprendendo sites.com aí você deixa selecionado seu domínio aqui em protocolo pode deixar selecionado https tá lembrando que se você acabou de registrar o domínio a poucos minutos e já vai fazer esse procedimento aqui talvez vai aparecer

uma mensagemzinha assim Um certificado SSL não foi um certificado SSL confiável não foi encontrado Tá pode deixar essa mensagem aqui porque não tem problema Beleza caso Apareça tá porque é o tempo aí que o domínio ele demora para ele propagar na internet tá então não precisa você se preocupar com isso aqui em diretório e inversão do WordPress vamos deixar assim como tá ou mais para baixo aqui vamos dar um nome pro nosso site Então vou colocar aqui por exemplo site e institucional vamos adicionar aqui uma descrição do site vou botar por exemplo aprendendo no sites

assim Aí você coloca o nome sua descrição aqui o usuário do Administrador agora você vai escolher aqui os dados de acesso para você entrar lá no WordPress depois tá Então nesse caso aqui vou deixar em admin mesmo a senha aqui eu vou esconder e vou gerar aqui uma nova senha e aqui o e-mail do administrador eu vou deixar esse mesmo aqui tá porque é só para aula mas e você você coloca aqui um e-mail seu aí do Outlook ou do Gmail enfim um e-mail que você usa no seu dia a dia para você estar recebendo

os dados de acesso ao WordPress tá ouve mais para baixo aqui idioma vou deixar português brasileiro você pode colocar o idioma ali que você quiser e essas opções aqui eu deixo todas elas desmarcadas porque a gente vai fazer as configurações lá no WordPress depois tá agora eu vim instalar e agora vamos aguardar aqui o processo de instalação do WordPress e é bem rapidinho ó pode ver que deu alguns segundos e daí aparece essa mensagem aqui ferramenta instalada com sucesso e Para você acessar o seu painel do WordPress aí seguir com a criação do site você

clica nesse segundo link aqui e já vai estar abrindo então o WordPress Ó aqui está o painel do WordPress tá lembrando que você sempre vai acessar o painel do WordPress com essa condição Aqui ó pode ver que aqui tá o https tá aí o domínio ó canal aprendam do sites.com e aqui tem essa barra ó WP tracinho admin Então vou até copiar aqui ó vou dar um Ctrl C aqui no meu teclado Para mim copiar e vou abrir aqui numa guia anônima ó só para mostrar melhor para você ó canal aprendendo só isso.com/wp tracinho admin

vou dar um enter aqui aí quando você abrir vai abrir assim ó Aí você coloca o seu usuário ali do WordPress e a sua senha do WordPress e faz o login tá nesse caso aqui ele faz o login direto porque eu já estou conectado com os pedágio Beleza agora vou estar fechando essas outras Abas aqui do meu navegador e vai ficar Aberto só aqui então e agora sim vamos começar de fato aí a criar o nosso site Beleza primeira coisa então vamos vir aqui a aparência temas e aqui você vai ver que vai ter alguns

temas aqui tá e o tema nada mais é do que a aparência do site tá nesse caso a gente vai estar criando então o nosso site utilizando o elemento tá o elemento ele é um pulguinha aqui dentro depressa e a gente vai estar utilizando também o tema Hello e que o tema Hello Ela é 100% compatível com elemento Então aqui tem mas ó a gente vai vir Adicionar novo e a gente vai estar instalando esse tema aqui ó relo o elemento se não aparecer aqui você vem aqui em Pesquisar temas e pesquisa por Elo elemento

desse jeito aqui ó com dois L aí você clica em instalar e você clica em ativar beleza esses outros temas aqui ó a gente pode estar excluindo para eles não Ficarem ocupando espaço aí na nossa hospedagem a gente não vai precisar deles beleza assim que você instalar o tema Hello elemento vai aparecer esse botãozinho aqui para você instalar o elemento então você pode estar clicando nesse botãozinho aqui ou você vem aqui em plugins instalados antes de instalar o elemento eu vou excluir esses plugins aqui ó esse plugins aqui já vem por padrão da Hospedagem tá

ó pode ver que não tem nem plugin instalado Agora sim eu vou clicar aqui em Adicionar novo ele pode estar clicando aqui instalar o elemento ou vir aqui Pesquisar plugins e pesquisar aqui por elemento ó tá aqui o elemento Então vai estar lá o elemento e vou ativar o elemento tá vai tá abrindo essa janelinha aqui posso clicar no x lembrando aí mais uma vez que a gente não vai precisar utilizar o Elementor pro a gente vai fazer tudo com elemento gratuito tá ouvindo novamente aqui em plugins plugin instalados ó vou adicionar outro plugin aqui

e agora vou adicionar esse plugin elementos kit Vamos pesquisar aqui cadê ele ou não tá aparecendo aqui vou pesquisar por elemento que eu acho que vai aparecer ruim mais para baixo aqui Esse aqui ó era tudo junto elementos quite elementor addons então basicamente esse plugin aqui ele vai adicionar algumas funcionalidades extras ao nosso elemento tá então através dele que a gente vai conseguir criar por exemplo o hader do nosso site né que é o cabeçalho o full que é o rodapé e várias outras funções legais que ele vai estar adicionando ao elemento Então vou instalar

ele e vou clicar aqui em ativar Beleza e vou adicionar só mais um pouquinho aqui que é o plugin de formulário tá então é esse aqui ó macform esse aqui então esse plugin basicamente vai permitir que a gente crie aí formulário de contato né no nosso site vou clicar beleza ó a princípio são esses três plugins aqui que a gente vai precisar para fazer aí o desenvolvimento do nosso site Beleza próximo passo aqui então Vamos vir em páginas todas as páginas e aqui estão as páginas então do nosso site por padrão já vai vir com

essas duas páginas aqui ó nesse caso eu vou mover para lixeira essas duas páginas e vontade adicionando as páginas aqui do meu site tá lembrando que nesse primeiro momento eu vou apenas adicionar as páginas tá aí depois eu vou personalizar cada uma Então vou vir aqui em adicionar nova e eu vou colocar aqui por exemplo a Minha página de home que também é conhecida como início tá que a página principal do site vou clicar em publicar Beleza vou voltar aqui no meu WordPress e agora eu vou adicionar as outras páginas que eu quero tá Então

nesse caso eu quero colocar aqui uma página de serviços vou publicar aqui vou voltar vou adicionar uma nova eu quero adicionar também uma página de sobre aí sobre empresa né vou publicar Aqui beleza eu quero adicionar também uma página de contato e vai ter informações de contato formulário de contato dá para gente colocar o mapa enfim várias informações aí para o usuário tá vou publicar e beleza A princípio eu vou fazer esse site aqui com essas quatro páginas tá bem padrão Mas aí você adiciona quantas páginas você quiser tá é só clicar em adicionar nova

e dá o nome da página em seguida a gente vai Personalizar cada uma beleza antes da gente personalizar cada uma Vamos só configurar aqui o menu vou vir aqui em aparência menos ao site ainda não tem nenhum menu tá então vou criar aqui meu primeiro menu vou dar o nome de menu mesmo esse nome aqui não interfere em nada tá só por essa reconhecer mesmo e vou clicar aqui em criar menu que que eu vou fazer agora aqui estão as páginas criadas ó vou clicar em Selecionar todas e vou somente adicionar ao menu ó nesse

caso que eu vou colocar o home como a primeira Ó depois vem a página de serviços depois é de sobre depois ele contato vou estar salvando o menu beleza outra configuração que eu vou fazer aqui também eu vou vir elemento configurações recursos ou mais para baixo aqui e vou deixar ativado essa opção aqui do container tá ativo talvez se você tiver Vendo esse vídeo aqui no futuro essa opção já esteve já esteja ativa e você não precisa mexer nisso tá mas nesse caso aqui eu vou tá deixando ativo tá o container basicamente é um experimento

né que substitui a estrutura atual desse seção e coluna né e muda para container tá Não precisa você se preocupar muito com isso se você não tem o hábito aí de criar sites e isso talvez algo novo para você tá você vai aprendendo na prática que como que faz mas basicamente o Elemento aí é um page builder né do estilo arrasta e solta né Então você só vai arrastar os elementos ali e vai estar personalizando cada um Tá beleza vou salvar as alterações aqui então você não pode esquecer de salvar as alterações beleza que que

vamos fazer agora vamos partir então para a criação do nosso Hater tá ou seja do cabeçalho do site Deixa eu só vim aqui na minha página inicial Para ver como que está Ó a minha página inicial ela tá assim ó tá em branco tá vou voltar aqui no meu painel de prece agora vou vir nessa opção aqui ó elementos kit eu vou clicar aqui sobre ela e a primeira vez que você abrir essa opção vai aparecer uma configuraçãozinha aqui para você fazer tá então só vou clicar em próximo eu não vou alterar nada aqui tá

só para o plugin aqui poder liberar as funções Beleza beleza finalizou aqui Beleza agora vou vir nessa opção aqui ó basicamente é o cabeçario e o rodapé ó não tem nada adicionado aqui eu vou clicar e vou clicar em Adicionar novo Vou colocar aqui meu título esse título aqui é só para WordPress reconhecer tá não precisa ser nenhum título aí em específico que eu vou colocar render mesmo aqui tipo vamos deixar aqui condições Vamos colocar Entre site ou seja o nosso Hater né ele vai aparecer no site inteiro então se a pessoa abrir a home

do site vai estar aparecendo ali o hader né com logotipo e o menu aí se a pessoa trocar para página de serviços vai continuar aparecendo o hader tá E aqui vou deixar ele ativado vamos salvar as alterações Beleza agora vou vir aqui em editar e vou vir aqui em Edith olha basicamente agora vai estar abrindo então o editor do elemento Para a gente estar editando aí esse Hater vou clicar aqui em continuar beleza vamos fazer criação aqui do hader tá antes disso só vamos configurar aqui as cores e as fontes que a gente vai estar

utilizando no nosso site para isso eu vim aqui ó em configurações do site e aqui eu vou definir as cores globais ó então basicamente são essas cores aqui que vão aparecer toda vez que a gente adicionar algum elemento tá ó tem um Prévio ali vou deixar ativado nesse caso aqui eu já separei aqui no meu computador né as coisas que a gente vai utilizar Então a gente vai utilizar um tom de verde vou dar um contra você aqui para copiar ou vir aqui vou adicionar a cor eu vou colar eu vou utilizar esse tom de

verde aqui no meu site tá eu vou utilizar também um tom aqui e azul vou dar um contra você vou vir aqui vou adicionar e daí você Repete esse processo aí com as cores da sua logomarca enfim da sua identidade visual tá vou adicionar aqui o preto eu vou adicionar aqui o branco também posso arrastar para cá ó são essas aqui as cores aí da enfim da minha identidade visual aí da minha empresa fictícia tá Beleza vou clicar atualizar aqui vou voltar e também vou adicionar aqui as fontes globais tá então a minha fonte primária

que seria a fonte aí para os Títulos vai ser essa fonte aqui ó onde Vamos pesquisar aqui Ó o tamanho aqui como vai ser para título colocar um 48 peso vou deixar em 600 Tá beleza vou deixar assim qualquer coisa posso estar alterando tá e a minha fonte secundária que vai ser a fonte para ir para os textos eu vou utilizar a fonte Serrat assim ó pode ver que já mudou aqui deixar peso em 400 mesmo tamanho aqui pode deixar um 16 Beleza as outras aqui eu não vou configurar tá então essa aqui vai ser

minha fonte primária e essa aqui minha fonte secundária e daí você faz esse processo também tá lembrando que Ah se você não tem cores globais definidas não tem uma identidade visual definida uma fonte não precisa você fazer essa configuração tá mas se você fizer essa configuração isso vai otimizar bastante o teu processo de criação porque toda vez que você adiciona um texto você já Puxa automaticamente essa fonte e você já puxa automaticamente as suas cores lá então fica bem mais fácil tá vou voltar aqui Aqui tem várias outras opções também eu não vou mexer em

nada aqui e agora sim vamos criar então aqui o nosso render tá vou clicar aqui no maisinho e aqui vou selecionar essa estrutura aqui com dois containers Olha só eu vou clicar aqui Olha esses pontinhos em cima aqui em editar container vai vir em estilo tipo de Fundo e olha só aqui com um clique eu já consigo selecionar o meu fundo ó nesse caso o fundo ele vai ficar preto mesmo tá mas aqui ó poderia colocar qualquer outra cor só com clique então você vê como fica mais fácil a partir do momento que você define

as cores beleza vou vir aqui e vou arrastar uma imagem para cá antes de eu adicionar aqui mais elementos Ó você pode estar explorando Aqui o elemento então tenho básico aqui ó que você consegue adicionar título imagem texto enfim vários elementos aí tem a versão Pro do elemento que a gente não vai precisar utilizar ó pode ver que que tá com cadeado ó porque tá desbloqueado inclusive se porventura você quiser adquirir aí ou elementor pro eu vou tá deixando o link na descrição do vídeo tá se for do seu interesse talvez desbloquear alguma dessas funções

aqui o Link vai estar aí na descrição do vídeo e daí você adquire o elementor pro é bem fácil tá e você ativa aqui no painel tem um tutorial Auto explicativo ensinando fazer isso no momento que você adquire Beleza Aqui tem mais opções já que você pode estar adicionando e aqui tem a opção do elementos adicionou antes ali lembra então aqui ó ele já dá várias opções bem legais tá Então nesse caso aqui nessa imagem eu vou estar colocando o meu logotipo tá Vou vir aqui no meu computador e aqui ó eu selecionei duas versões

do meu logotipo tá essa versão aqui com fundo preto e essa outra aqui com o fundo transparente beleza que que eu vou fazer agora eu vou vir aqui nesse site ó rapidamente no fotopia.com só para mim mostrar para você como que você deve cortar o logotipo Aí caso o seu logotipo não esteja cortado beleza vamos aguardar abrir aqui Beleza eu vou pegar esse aqui com fundo transparente tá enfim logotipo fictício mesmo só para aula e ó vou jogar ele aqui tá e pode ver que ele tem essas bordas enormes aqui onde eu tô passando com

meu mouse ó que que eu quero fazer eu quero deixar ele sim essas bordas ó para ele encaixar bonitinho lá no nosso site Então vou estar fazendo isso aqui ó eu vou estar removendo essas bordas tá e se o seu logotipo tiver com essas bordas Também você faz isso tá Tô ensinando fazer esse processo Porque em vídeos passados aí o pessoal eu tinha gente comentando aí que não sabia como fazer isso tá vou vir aqui em arquivo exportar como PNG ó e vou salvar ele já baixou aqui no meu computador tá que que eu faço

agora vou vir aqui ó no meu computador ela tá aqui logotipo vou arrastar lá para o meu Wordpress Assim vou clicar aqui em selecionar e beleza ele ficou assim ó deixa eu só configurar melhor aqui esse container esse aqui eu vou colocar em 20% assim e esse outro em 80% Ó daí fica assim tá aí se você colocar aqui por exemplo o logotipo sem cortar as bordas dele Olha só como que ficaria vou arrastar aquele meu primeiro logotipo lá olha só ele fica com essas bordas ó e daí é difícil para você estar Corrigindo isso

tá então voltar para esse então você vem aqui no fotopia tá basicamente Utopia é grátis né Photoshop online aí e você faz essa ediçãozinha rápida tá vou fechar aqui vou sair Beleza vou vir aqui nos meus elementos ó vou pesquisar por menu e vou selecionar essa opção aqui ó elementos vou arrastar para cá e aqui ó select menu eu vou selecionar o Menu que eu coloquei lá em aparência que é o meu menu principal que tem aqui ó home serviços sobre contato deixa só configurar essa cor aqui desse menu aqui tem Style aqui deixa eu

colocar a cor branca assim ó vamos configurar Então esse menu vou deixar ele alinhado aqui para a direita aqui essas opções Eu não vou mexer vou deixar assim mesmo Vou vir aqui em estilo vou deixar aqui a altura dele mínimo possível tá aqui em menu e tem Style vão configurar aqui a nossa tipografia Então vou colocar o secundário o que que é o Monte Serrat tá e aqui em ou seja ao passar o mouse Vamos colocar outra cor Então posso colocar esse tom aqui olha quando a pessoa passa o mouse Ele muda de cor tá

E aqui no ativo eu vou deixar a cor branca mesmo tá que que eu vou fazer agora vou clicar aqui nesse container vou vir aqui em justificar conteúdo eu vou deixar centro para ele ficar alinhado esse outro aqui também ó vou deixar centro para ficar alinhado ó Então fica assim o cabeçalho do nosso site tá vou fazer agora também eu vou pegar aqui o meu link aqui do site principal né a home ou dar um contra você vou clicar nessa imagem ouvindo Link eu vou colocar o URL personalizado e vou colar o link aqui dentro

uma vez que a pessoa clicar aqui no logotipo ela é direcionada para home do site tá Olha você pode fazer outras configurações aqui como por exemplo a largura do conteúdo você pode deixar ele mais assim né mas compacto ou mais largo tá ou até mesmo aqui ó em largura total 100% , ó Ele ficaria assim largura Total tá lembrando que aqui eu tô gravando essa Aula aqui através de um notebook de 15 polegadas tá então aqui ele tá na largura do notebook ó 15 polegadas mas se a pessoa abrir em um desktop aí de 20

polegadas ele vai se adaptar a largura também tá nesse caso eu vou deixar em Box aqui ó eu vou deixar 1140 que é o padrão que já vem do elemento tá porque daí assim ele vai conseguir abrir Legal tanto em notebooks quanto em dispositivos maiores tá então eu prefiro deixar desse jeito Mas aí fica a sua escolha Beleza vou voltar aqui e agora vamos otimizar isso aqui para os outros dispositivos né comparar o tablet e para o celular vou otimizar primeiro aqui para o tablet ó então aqui eu posso deixar isso aqui porcentagem vou deixar

aí uns 30% assim e esse outro aqui em 70% tá que daí fecha 100%. vou clicar aqui no menu vamos vir aqui nessa opção eu só ver aqui você consegue alterar o Menu o logotipo que que vai aparecer nos dispositivos móveis né que seria tablet e celular então você pode colocar por exemplo a logotipo em outra cor aqui nesse caso eu vou deixar assim mesmo ó porque eu vou vir aqui em estilo e aqui tipo de fundo eu vou deixar na cor preta assim ó aliás aqui eu vou ter que voltar aqui vou ter que

configurar o logotipo aqui também selecionar aí porque ele não puxou logotipo vamos Ver agora do texto no tablet vamos botar aqui um branco assim ó e mais para baixo aqui aqui você tem várias opções de personalização tá então você pode estar explorando todas vamos ver aqui no hambúrguer Style que é o botãozinho ali né Como selecionar aqui esse botãozinho ó posso deixar ele na cor aqui verdinha ó ou até mesmo na cor branca Vou deixar na cor branca que eu acho mais legal assim ó pessoa clica e abre aqui só vamos configurar aqui o botão

de fechar botão de fechar aqui ó botão de fechar vamos deixar na cor branca também assim e quando passa o mouse Né ou quando a pessoa clica em cima ele muda de cor é só vir aqui tipo de fundo vou deixar transparente fundo para não ficar Aquele rosinha ali ó agora sim eu só vou voltar mais em cima aqui no botão principal do menu aqui em Rover vou vir tipo de fundo e também vou deixar transparente para não ficar Aquele rosinha lá tá e aqui quando passa o mouse em Rover Ele fica nessa cor esverdeada

vamos ver como que ficou aqui eu coloquei o contrário tipo de fundo eu quero transparência assim e a cor dele vamos ver como que fica a cor dele aqui ó a cor dele Eu quero assim aí agora deu certo assim que eu queria Ó aqui tá aparecendo esse Rosa ó esse Rosa aqui só tá aparecendo aqui agora Que eu tô desenvolvendo tá depois quando a pessoa abrir mesmo lá no tablet ou Enfim no dispositivo não vai aparecer tá já fiz os testes vamos otimizar aqui para o celular ó aqui no celular eu vou vir aqui

no container em porcentagem vou deixar aqui uns 30% acho que mais 40 você deixa aqui Quantos por cento ficar legal tá tem 40 e esse outro aqui eu vou deixar em 60 Aí como eu otimi lá no tablet ele já otimiza automaticamente para o celular Tá Fica assim então no celular só vim aqui nesse menu que eu abri ele aqui aqui item espaço em você pode alterar o espaçamento que dos itens tá deixar assim ó em 20 e tem margem você consegue alterar também vou deixar Zerado vou vir aqui ó na opção do logo ó

posso colocar aqui uma margem também Assim ó enfim você configura que os espaçamentos aí como você achar melhor tá nesse caso vou deixar assim Lembrando que a maioria dos celulares abre nessa resolução aqui ó 420 Então vai abrir assim na maioria do celular tá pode ver que é uma visualização bem bem agradável tá então fica bem legal aí para visitante Tá acessando vai ficar assim então nosso render ou Seja nosso cabeçario vou clicar aqui atualizar Vamos só vir aqui na nossa home mais uma vez olha só já apareceu aqui então Ó que tô na página

de home o serviço sobre ó se eu vim para outra página a página de serviços ó o Heider sempre vai continuar no site beleza vamos fazer criação do fulter agora do rodapé ou vem aqui no painel ou vir mais uma vez aqui em alimentos então a gente já tem aqui o nosso Hater E agora vamos adicionar o fulter vou vir aqui não tem nada criado vou clicar aqui Adicionar novo aqui em título vou deixar outra mesmo você pode colocar qualquer título aqui não vai interferir em nada aqui não esqueça não esqueça de deixar selecionado a

opção inteiro e deixa aqui ativado vamos salvar beleza Tá aqui o nosso futuro vamos editar e vamos abrir mais uma vez o Elemento aqui a gente contente e vamos fazer criação desse ó vou vir aqui vou clicar no maisinho nesse caso aqui vou selecionar uma estrutura aqui com quatro containers ó eu quero colocar aqui o logotipo outra eu quero colocar o menorzinho e outra aqui informações e contato olha Lembrando que ele tá aparecendo em cima ó mas ele vai aparecer lá no final do site tá aqui eu vou deixar padrão 1140 em estilo aqui vou

deixar na cor preta Mesmo assim beleza vamos dar uma imagem para cá vamos escolher aqui o nosso logotipo essa outra que eu vou excluir porque eu coloquei só para mostrar então colocar essa sim a beleza mas uma vez eu copiar aqui o link da minha home eu vou dar um control c e aqui em URL personalizado ó eu coloco o link toda vez que a pessoa clica aqui é direcionado para home vou adicionar também aqui Uma pequena descrição Vou colocar aqui na cor branca e na fonte secundária Então seria uma pequena descrição sobre a empresa

tá posso até diminuir um pouco esse tamanho colocar um tamanho 15 vamos ver como fica uma foto uma peso 300 assim ó aí para deixar mais clean mesmo tá beleza aqui do lado ó que que eu posso fazer posso pegar esse Textinho aqui que já tá pronto ó copiar eu vim aqui e colo ele aí aqui do lado vou colocar os itens do menu vou vir aqui em estilo aqui como vai ser um tipo um título Zinho né acho que fica legal colocar minha fonte primária assim só Vamos diminuir um pouco aqui para um tamanho

20 o peso Vamos diminuir Aí vou deixar assim ó para ficar Aparecidinha com logotipo tá eu posso colocar até Uma cor assim ó beleza vou deixar alinhado para esquerda aqui e agora vou colocar aqui os itens do meu menu tá para isso só fica legal fazer desse jeito ó vou adicionar um botão aqui copiar mais uma vez aqui não control c aí no link desse botão aqui que eu faço esse aqui vai ser a Roma então Rome assim mesmo estilo eu vim aqui embaixo o pedem eu deixo zerado A cor do fundo eu deixo transparente

assim a tipografia que eu boto secundário o texto aqui ele fica branco mesmo mas quando passa o mouse ele vai mudar de cor ó fica assim então que que eu faço eu duplico isso aqui ó homem daí a outra página Então seria ser vistos Como que é o seu link da página de serviços eu venho aqui ó aqui ó serviços ó copiar endereço do Link aí vem aqui coloca o link de serviços página sobre copiar endereço do link colar vamos duplicar página de contato eu venho aqui copiar endereço do link e colar e você repete

esse processo aí com as páginas que você quer colocar aqui tá aí já vou alterar também aqui os Espaçamentos Olha que tá meio estranho Deixa eu só fazer mais opções aqui menu aqui eu vou colocar contato tá então eu posso vir aqui ó pesquisar por lista de ícones assim eu coloco aqui por exemplo eu quero colocar o e-mail eu venho aqui ó pesquisa pelo ícone do e-mail pode ser esse aqui ó seria e aqui eu Coloco então o meu e-mail aí posso vir nesse outro aqui ó quero colocar o WhatsApp pesquisa aqui por WhatsApp Assim

é que no texto coloca então WhatsApp aqui você pode estar adicionando mais tá nesse caso vou deixar o e-mail WhatsApp mesmo de contato vamos ver aqui em estilo vão deixar o espaçamento aqui Em 10 pixels assim o ícone aqui ó aí posso até aumentar um pouquinho o tamanho para uns 20 pixels o texto Vamos colocar no secundário que é a fonte Monte Serrat e a cor na cor branca ó Vamos só regular melhor isso aqui aliás eu já vou regular eu vou adicionar mais alguns elementos aqui Posso vir aqui também é colocar as redes sociais

assim daí eu venho aqui e pesquisa por ícones sociais Nossa tá para cá assim vou deixar alinhado aqui para esquerda e aqui se você quer colocar por exemplo ao Facebook deixa selecionado que Facebook e aqui coloca o link do Facebook aqui ó Twitter ah não quer tal coisa vem aqui e remove aqui o YouTube ó quer adicionar mais outra rede social vem aqui e Adiciona vou botar o telegram por exemplo ó então aqui as letras é bem fácil aqui para você tá editando tá vou vir aqui em estilo eu gosto de deixar personalizada e eu

não gosto de deixar essa cor oficial porque eu acho que fica muito poluído tá esse monte de cores aqui então isso acaba fugindo da identidade visual do seu site então aqui a cor secundária eu vou deixar em branco mesmo e a cor Primária eu vou deixar transparente assim ó aqui o tamanho vamos deixar os 20 pixels e aqui o pedem que é o espaçamento eu vou deixar assim aí ó vem aqui ícone ao passar o mouse a cor secundária eu mudo aí fica desse jeito assim posso adicionar alguma animação também ó deixar essa grow aqui

ó você pode ver quando eu passo o mouse ele aumenta de tamanho tá Beleza vou ajustar melhor isso aqui Agora tá meio feio mas tá mais para cá essas informações ó contato um pouquinho mais para cá redes sociais mais para cá e você tem que deixar tudo alinhadinho Tá tudo bonitinho ó esse container aqui eu vim avançado margem colocar uma margem direita aqui não vou vir aqui em estilo largura pixels essa imagem que Vamos diminuir um pouco assim Esse texto aqui ó agora sim eu vou vir aqui na margem ó Fica assim então nosso full

esses elementos aqui eu posso deixar eles mais perto um do outro ó como é que eu faço isso vem aqui e diminui um pouquinho espaçamento ó coloco menos 10 ó ele vem aqui copio vem aqui cola o estilo e nesse aqui e cola o estilo Eu só vi se eu consigo visualizar aqui numa nova guia ó tá assim o nosso útero só esses textos aqui eu vou diminuir coloquei muito grande colocar um 16 assim esse aqui também um 16 e esse aqui também um 16 para não ficar um tamanho muito grande tá ó é que

esse contato ó tá aparecendo um Pouquinho pelo lado em relação ao sobre Ó mas ali quando atualiza ele aparece normal tá e você faz toda personalização aqui como você achar melhor beleza vou clicar aqui no mais vou adicionar mais um container aqui ó vou deixar ele na cor preta mesmo posso pegar esse texto aqui copiar vem aqui colar esse aqui seria Um textinho de todos os direitos reservados tá que é bem padrão então você vem aqui ó você coloca todos os direitos reservados Sei Lá o CNPJ da empresa essas informações tá vamos deixar um tamanho

bem pequeno aqui então tamanho 13 assim só vou clicar nele ou alguém avançado aqui ó te lembra que aqui eu coloquei uma margem direita sem pixels É nesse aqui ele puxou a margem direita também então vou vir aqui e vou zerar essa margem e vou colocar uma margem inferior aqui porque por algum motivo esse texto ele Está um pouco para cima Deixa eu só mudar de cor aqui para você ver melhor olha só ele tá para cima ó ele tá com espaço aqui embaixo Então vou tirar esse espaço embaixo Olha só ó agora sim ele

tá alinhado corretamente assim ó vamos voltar aqui para a cor preta assim beleza posso vir aqui também ó nesse contêiner embora tipo de borda sólido Superior vou deixar em um aqui eu coloco alguma coisa aqui ó vamos ver como que fica ó fica uma bordinha separando ainda nesse container posso me avançado zerar aqui colocar um 20 e um 20 olha Fica assim então eu vou estar adicionando aqui um botão voltar ao topo tá que quando a pessoa clica ela volta lá no topo para fazer isso a bem fácil Vou Pesquisar aqui por ícone vou arrastar

um ícone para cá vou deixar esse ícone alinhado para a direita aqui em link eu vou colocar isso aqui ó jogo da velha Só isso pessoal vai clicar e vai voltar para o topo e aqui vou pesquisar por flecha né E aí vou escolher alguma opção aqui ó começa aqui por exemplo vou inserir Ó e agora vamos estar personalizando esse Botão aqui posso deixar ele na cor branca mesmo ou uma pessoa passa o mouse ele muda de cor é que o tamanho vamos deixar uns 20 pixels mesmo aí beleza só vamos colocar ele para cima

né assim que eu vim aqui vou zerar beleza ó fica assim então tá vamos otimizar tudo isso aqui agora para Os outros dispositivos aqui vamos começar pelo tablet o tablet eu vou zerar essa margem aqui ó vou deixar assim ó que eu posso arrumar manualmente então ó para ficar tudo bonitinho as informações beleza ó abriria assim então em um tablet tá vamos ajustar aqui vou deixar um 20 e 20 e 20 assim ó vamos ver aqui no celular Que que eu vou fazer aqui no celular aqui você pode deixar tudo alinhado ao meio tá ou

tudo alinhado à esquerda nesse caso Vou deixar tudo alinhado para esquerda mesmo beleza vou vir aqui ó nesse container avançado Vou colocar aqui uns 50 superior 50 inferior 20 na direita 20 na esquerda vai ficar assim aqui no menu ó vou clicar aqui no menu vou colocar um espaçamento aqui para ele ficar mais Perto assim ó [Música] aqui no contato vamos fazer o mesmo esquema ó vou adicionar uma margem para ficar um pouquinho longe ali e aqui uma inferior eu venho aqui ó copiar vem aqui e cola o estilo das redes sociais também pode ver

então que as informações elas ficam bem Claras ou bem distribuídas né então tem um espaço entre essa Informação e essa outra informação e aí tem um espaço entre o contato e as redes sociais né que são aí enfim informações diferentes tá ficar assim então aqui esse textinho posso vir aqui nele pode deixar alinhado para esquerda dá para ele não sobrepor aqui o botão mas caso ele vai sobrepor então o que que eu faço eu clico no textinho para que que eu tô no ícone deixa eu achar o textinho aqui eu vim Aqui no navegador texto

tá tocando selecionado tá eu vim aqui avançado vou manter aqui ó esse 15 inferior vou colocar uma margemzinha direita aqui de uns 30 40 assim vamos ver como que ele abre é em celulares menores ó com resolução 360 ele vai abrir assim dessa maneira em celulares maiores ele vai abrir assim então pode ver que Fica uma visualização agradável Em ambos tá e no tablet assim não vou mexer e no desktop assim também não vou mexer vou clicar vamos lá para home do nosso site para ver como que ficou então e aqui ó Agora sim a

gente vai poder construir Então a nossa página inicial Aqui ó pode ver que tá em branco né e depois As demais páginas beleza só uma coisa que eu esqueci de fazer aqui eu não Configurei umas Maresias aqui nesse fullter tá Eu só vim rapidamente de novo aqui para mim editar isso que fica visualmente mais agradável tá ó vou vir aqui nele ó no container tava me avançado o zerava colocar uns 50 e uns 50 igual eu coloquei lá no celular tá ele fica mais grandão assim ele não fica tão espremido tá vamos ver que no

tablet lá no tablet que vai puxar também tá E no celular já tá configurado Daquele jeito a minha atualizar vamos ver aqui na home aí ó ficou mais agradável assim tá aí você segue esse mesmo passo a passo aí seguindo toda essa mesma lógica para o seu rodapé aqui Você pode adicionar mais informações também então você pode adicionar horário de funcionamento telefones enfim o que fizer sentido para o seu estilo de negócio beleza vamos vir aqui No nosso painel dor de press próxima configuração que eu vou fazer eu vim aqui em configurações leitura sua página

inicial exibe aqui não tá configurado ainda a página home Então nesse caso vou selecionar uma página estática e vou selecionar home vou clicar em salvar alterações e agora sim vai aparecer a página home aqui ó que essa aqui ó com página principal tá agora vamos lá vamos ir lá em páginas todas as páginas tá aqui a página de home avanços E vamos clicar em editar com elemento e agora vai estar abrindo aqui o editor do elemento Beleza vou abrir aqui numa nova guia o site aqui do Lar em Y para mim tá pegando aí todos

os textinhos fictícios tá do nosso site e daí você segue o passo a passo aí e preenche com seus textos tá configuração importante ó vim aqui na engrenagenzinha Léo tira a página você sempre vai deixar selecionado essa opção aqui ó elemento largura total para assumir esse título Aqui aí agora sim vamos lá então primeira coisa vou clicar no maizinho e vou selecionar essa estrutura aqui ó um dois containers tá vou clicar aqui vou deixar a largura padrão a 1140 vou vir aqui estilo tipo de fundo e eu vou adicionar uma imagem aqui de fundo Então

nesse caso vou adicionar essa imagem aqui de background né ou seja de fundo essa aqui é uma imagem que eu peguei lá no freepik em banco de imagens Tá então você pode estar enfim pesquisando aí na internet os bancos de margens que você quer pegar as imagens também aqui no próprio elemento Ó tem opção de você gerar imagem com inteligência artificial tá eu não vou estar ensinando a fazer como como fazer isso aqui senão vai ficar uma aula muito longa mas eu tenho outros vídeos aqui no canal que ensina como você faz para gerar as

imagens aqui com inteligência artificial do elemento tá E também e Também você consegue estar gerando os textos utilizando Inteligência Artificial do elemento tá então vou estar deixando esses dois vídeos complementares na descrição se você quiser tá conferindo depois beleza vamos lá então vou vir aqui ó em imagem nesse caso eu vou colocar essa imagem aqui porém essa imagem aqui quando eu baixei ela lá no forpic ela veio desse tamanho Aqui ó 2.800 por mil e alguma coisa eu vou clicar nela aqui eu vou editar ela no Paint mesmo tá aí você edita aí as suas

imagens aí em qualquer aplicativo aí que tiver no seu computador aí Independente se você usar o Windows ou Mac ou outro sistema operacional tá vou vir aqui em redimensionar ó pixels e a resolução ideal é essa aqui ó 1920 por mil e alguma coisa eu vou dar um ok ó pode ver que ela diminuiu mas a qualidade dela Ainda tá boa porque ela tá em tamanho grande Tá eu vou vir aqui e vou salvar ela beleza e aqui eu diminui o tamanho dela tá deixa eu só atualizar a página aqui ó pode ver quando eu

passo o mouse ó 1920 por 1.279 Então essa é uma resolução ideal para você tá utilizando as imagens de fundo do seu site Tá vou pegar ela aqui ó vou arrastar Para cá e vou inserir entendeu você coloca a imagem que você quiser sentido para você tá tamanho da imagem sempre deixa completo posição Centralizado anexo tem rolagem fixo já vou mostrar como funciona a repetir não repetir o tamanho da tela preenchimento completo tá que eu vou fazer agora vou vir aqui no container eu vou vir aqui em avançado e aqui você pode estar configurando o

espaçamentos então colocar um senso superior e um sem Inferior só para mim conseguir colocar melhor aqui os elementos tá postar um título para cá pode ver que já puxou automaticamente a nossa fonte primária e daí vou vir aqui em Y eu vou pegar uns textinhos aqui só para a gente tá ilustrando tá copiar Beleza vou vir aqui vou colar vou deixar aqui numa cor branca assim vamos adicionar também uma descrição assim vamos configurar aqui com a nossa fonte nossas cores a Nossa fonte grafia secundária beleza eu dar um espaçamento inferior aqui também aí posso vir

aqui adicionar outro título colocar um título menor aqui vou dar um copiar vou vir aqui vou colar vou deixar ele assim ó transformação maiúsculas Aqui no tamanho Vamos diminuir deixar um 18 espaçamento das Letras vamos deixar assim ó só para ficar uns animais diferentão tá aí vamos adicionar também aqui um botão aqui ou então esse botão você pode colocar por exemplo a entre em contato ver serviços um botão direcionando por WhatsApp enfim fica a seu critério tá Vou colocar aqui entre em contato ela vai ser direcionada lá para página de contato tá mas aí fica

o seu Critério aí como que você quer fazer vou dar um control c aqui vou vir aqui vou colar contato aqui ó canal aprendendo no site ponto com barra contato que o tamanho do botão você configura Vou deixar um tamanho grande vou colocar um ícone aqui vou botar uma flechinha aqui nele assim ó mais para cima aqui tipografia vou deixar tipografia primária só que daí eu vou Diminuir o tamanho né assim posso te diminuir um pouquinho mais Aí achei legal assim tá aqui tipo de fundo posso colocar um degradê Ó depois colocar essa cor aqui

e essa outra cor aqui e aqui eu regulo o ângulo e aqui na cor do texto posso colocar uma cor preta assim então aqui no Hover posso colocar uma animação Ó Entre várias que tem aqui assim e posso adicionar também é uma borda tá bem mais para baixo aqui aqui é arredondamento você pode colocar algum valor aqui em pixels de ficar Redonda nesse caso aqui eu vou deixar padrão aqui é 5 pixels é uns 5 10 pixels eu vou deixar assim mesmo para ele ficar meio quadradinho tá só esse texto que eu vou diminuir um

Pouco ele eu tô achando ele muito grande aí esse aqui eu vou mexer um pouquinho aqui na altura da Linha dele aí beleza beleza que que eu vou fazer agora eu vim aqui Opa cliquei errado eu vim aqui no container mais uma vez estilo fundo aqui que eu falei que eu vou mostrar para você ó anexo fixo o fundo ele fica fixo assim ó a imagem lá no fundo tá e rolagem vai rolar junto nesse caso eu vou deixar rolagem tá E Aqui sobreposição de fundo eu vou adicionar aqui uma cor preta e aqui você

regula a opacidade tá ó vou deixar assim que é para ficar bem de fundo mesmo que não é para chamar tanta atenção tá agora que que eu vou estar fazendo aqui eu vou tá inserindo esse robô aqui ó essa imagem aqui eu vou mostrar para você na prática como que faz tá vou vir aqui mais uma vez no Paint mesmo o que que eu vou fazer aqui eu vou Primeira coisa sempre é cortar as bordas da imagem tá deixa eu dimensionar ela aqui também já tá de mencionei aqui detalhe que ela continua grande tá ó

ainda está em tamanho grande porque quando a gente baixa aí algumas imagens de banco de imagens elas vêm em um tamanho muito grande Tá então é sempre legal tá dimensionando vou vir aqui vou inverter aqui assim aqui também imagem tá vou Salvar ela aí beleza agora vou vir nesse site aqui ó remove ponto BG esse site vai remover o fundo da imagem tá E daí você pode estar repetindo esse processo aí com qualquer outra imagem que você tem e você quer remover o fundo beleza vamos aguardar um pouquinho ó remover o fundo da imagem vou

baixar Beleza tô usando um gerenciador de downloads aqui onde eu vim aqui ó imagem esta imagem para cá Enviar arquivos vamos ver se baixou aqui ó baixo ela no meu computador sem o fundo vou clicar nessa imagem vou enviar ela e ó fica assim que que eu faço agora eu posso clicar aqui nesse container e tirar o inferior ao seu inferior para imagem ficar juntinho tá posso clicar nesse outro container aqui vim avançado Olha só vou baixar para você ver melhor você ver que tem um espacinho aqui ó daí Você zera esse espacinho tá ó

fica desse jeito assim então tá que que eu acho legal fazer aqui tocar nesse texto aqui adicionar uma margemzinha nele para ele não ficar tão perto aqui da imagem e aqui eu posso configurar no centro né esse conteúdo só que daí como eu adicionei sem Pixel superior e embaixo tá zerado ele vai ficar meio estranho ó vai ficar esse Espaço em cima tá então o que que eu posso fazer vamos ver se tirar esse espaço aqui não não fica legal eu vou deixar esse espaço aqui em aliás sem assim e esse container aqui eu vou

deixar ele em cima vou vir avançado eu vou colocar só o espaçamento superior aqui vamos ver uns 30 assim ó porque o que acontece Você tá vendo aqui eu não tô passando Mouse ó esse espaço aqui esse espaçamento aqui ele é o mesmo desse espaçamento aqui tá porque eu configurei esse 30 aqui ó Porque se deixar Zerado esse espaçamento de baixo ele vai ser bem maior do que esse espaçamento de cima tá então é legal bater padrões aí no site a gente tentar deixar tudo alinhadinho e tudo bonito tá então tá ficando assim beleza vamos

otimizar aqui Para o responsivo para ver que aqui tá todo desconfigurado clicar aqui nesse texto e vou diminuir esse texto primeiro Vou deixar um tamanho 36 assim vou regular aqui a altura da Linha também ó vou diminuir um pouquinho a altura da Linha assim beleza esse texto aqui Vou tirar aquela margem lá que eu coloquei nele tá E aqui eu posso adicionar vamos ver um sem superior eu acho que dá sim superior aí se container aqui ó eu coloco ele mais para cima assim ó fica assim no tablet então vamos ver no celular aqui como

que fica ó já tá até meio que configurado aqui no celular não só fazer aqui alguns ajustes vamos manter senha aqui eu só ajeitar aqui sem Deixar um 20 na direita na esquerda esse título aqui eu vou diminuir no celular vou deixar um 30 assim ó dispositivos maiores vai abrir assim tá e essa imagem que eu vou diminuir também no celular vou colocar em pixels aqui e vou deixar assim ó eu vou adicionar aqui uma imagem superior assim ó então ficaria assim no celular tá aqui No celular também você pode vir aqui no container em

estilo e aqui alterar a posição da imagem tá na imagem de fundo achei legal ficaria assim então no celular beleza vou clicar você pode vir aqui ó ver alterações uma nova guia como que tá ficando tá ficando assim então nosso site álcool na pessoa clica aqui no botão voltar ao Topo aqui antes eu não consegui mostrar como que fica ela vem para cima tá beleza agora na segunda sessão aqui do nosso site eu vou querer adicionar um vídeo tá então vou mostrar para você como que faz isso vou selecionar essa estrutura aqui vamos clicar sobre

ela vim avançado vou manter aqui sem superior sem superior vamos ver esse padrão aqui no meu site tá e aqui vamos colocar um título posso Pegar esse título aqui que já tá pronto copiar ele vem aqui colar e só alterar a cor assim ó nesse caso eu vou diminuir para 36 eu vou mexer aqui na altura da Linha tá esse outro também vou colocar aqui ó beleza e agora eu quero adicionar um vídeo aqui na minha no meu site tá vou clicar aqui no vídeo ó vou mostrar para cá e daí você pode colocar o

link Aqui do vídeo no YouTube tá do vídeo enfim apresentando sua empresa ou sua ideia tá você coloca lá no YouTube e você cola o link do vídeo aqui tá tem outras opções aqui ó de colocar em outras plataformas de vídeo ou de colocar o vídeo alto hospedado tá no caso para colocar o vídeo auto hospedado você faz envio dele aqui para o próprio WordPress tá só que eu recomendo colocar ele no YouTube para não pesar e atuar hospedagem tá então aqui ficaria o link Do vídeo no YouTube aqui você consegue fazer algumas configurações ó

como a área de início a hora de término reproduzir automaticamente porque eu recomendo você deixar desativado tá porque produzir o vídeo automaticamente aí não vai dar uma experiência de usuário legal tá para enfim para pessoa que tiver no seu site você pode deixar ele mudo repetir enfim tem várias opções aqui que você pode estar alterando tá nesse caso aqui ó vem Sobreposição de imagem eu vou deixar ativado essa opção ó e daí eu vou colocar uma imagem que sobreposta em cima para ele ficar mais bonito tá ó vou vir aqui ó vou botar essa imagem

aqui por exemplo Tá eu vou editar ela para ver que ela tá num tamanho absurdo ó 13 MB vou editar ela aqui resolução até 5.000 por 3.000 e alguma coisa vou dimensionar aqui aqui para o vídeo pode ser uma resolução Vou colocar em mil aqui tá ficar bem bom assim e vou salvar beleza ó já dimensionei já diminui o tamanho da imagem tá vou vir aqui então mas tá a imagem aqui só colocar enviar arquivos e beleza já apareceu a imagem aqui tá só vou vir aqui estilo e aqui você escolhe a proporção do vídeo

tá Aliás a proporção da tela então você pode estar mudando eu vou deixar essa proporção aqui tá Sendo que o padrão é 16 por 9 tá aí que você pode fazer você pode vir aqui no container e reduzir para o vídeo não ficar tão grande tá se você quiser ó deixando o vídeo menor tá nesse caso aqui eu vou deixar 1140 mesmo vou vir aqui no vídeo e vou colocar 21 por 9 assim vou clicar aqui no vídeo aqui na sobreposição de imagem ou você consegue mudar a cor aqui do íconezinho tá nesse caso vou

deixar branco mesmo E o tamanho também desse íconezinho tá aqui em avançado você pode vir embora e adicionar aqui um arredondamento para a borda aí do seu vídeo nesse caso vou deixar aqui em cinco mesmo que é o mesmo arredondamento lá do botão tá aí fica tudo bem beleza só vou clicar nessa informação aqui vou deixar alinhado ao centro assim beleza tá ficando assim então no site Vamos ver aqui no tablet ó fica assim no tablet aqui no tablet ou em avançado eu vou colocar 51 50 deixa eu ajustar melhor isso aqui vou colocar em

porcentagem 60% e esse outro vai vir aqui tá ó ficar assim então no tablet no celular Vou vir aqui no container vou manter 50 e 50 Vou colocar aqui um 20 na direita um 20 na esquerda Então fica assim esse texto aqui eu posso diminuir um pouquinho ele ó colocar um tamanho 25 tá para ele diferenciar aqui do texto principal que é tamanho 30 beleza esse vídeozinho aqui vamos ver proporção vou deixar assim mesmo e aqui vou reduzir o ícone tá Ó Então fica assim não responsivo Vou atualizar vamos ver aqui como que tá ficando

uma nova guia ó tá ficando assim então nosso site beleza agora vou vir aqui no vou adicionar um container vamos configurar aqui sem vou colocar na cor preta mesmo tá assim Opa coloquei errado aqui assim inferior assim vamos adicionar um título então Posso pegar esse aqui ó copiar posso vir aqui posso colar centralizar e vou colocar aqui na cor branca né assim aí posso pegar esse outro textinho aqui também copiar vem aqui vou colar e aqui seria um descritivo do serviço tá então Ó vou colocar para cima aqui ó e aqui você poderia escrever por

exemplo ah serviços e aqui embaixo conheça nosso serviço tá vou adicionar o container aqui ó vou Clicar nesse container vou selecionar a direção horizontal vou vir aqui vou adicionar outro container e voltar duplicando ele olha só ele encara container você vai adicionar aqui um box com um serviço aí em específico tá deixa eu só vim aqui vou pesquisar por Box porque tem essa opção aqui ó do próprio elemento skate ó que é e com Box vamos arrastar para cá ó então ele dá já esses Box prontos aqui Tá você só pesquisa por Box tá então

aqui ó tem várias opções Ó você vem aqui aí você escolhe o ícone que você quer e que você coloca o título do teu serviço tá serviço tal e aqui a descrição aqui tem opção de habilitar um botão ler mais nesse caso eu vou deixar sem o botão aliás posso deixar que Global o link eu venho aqui Ó e coloca o link da página de serviços tá assim a pessoa clica é direcionada lá para a página de serviços onde pode ter mais serviços enfim mais informações tá aqui tem várias opções Ó você pode estar configurando

essa aqui que eu não acho legal vamos ver o que mais essa outra aqui ó habilitar uma enfim essa tagzinha em cima aqui se você achar legal você pode deixar Aqui fica legal para você colocar sei lá categoria do serviço talvez vou deixar até habilitado porque eu achei legal aqui vamos vir aqui em estilo é que vão personalizar então aqui o fundo eu posso deixar ele branco ou posso deixar ele preto acho que fica legal eu deixar aqui no fundo da cor preta assim ó vamos ver se a gente consegue configurar Aqui quando passa o

mouse para ficar um degradê ó assim e não mais para baixo aqui tem os espaçamentos já pré configurados aqui teria o Shadow né que seria a sombra nesse caso eu vou deixar assim sombra mesmo tipo de borda aqui na borda fica legal colocar essa cor aqui ó assim vou colocar aqui uma largura [Música] dois assim vamos configurar aqui o conteúdo agora então o título eu quero o título da cor branca assim ó e a cor quando passa o mouse ele fica da cor preta tipografia Vamos colocar aqui tipografia primária só que vamos estar reduzindo então

vamos deixar aqui um 20 assim aqui na descrição a cor da descrição Quero branca e a Coral passar o mouse eu vou querer na cor preta assim é tipografia é tipografia secundária que é o nosso Monte Serrat ó fica assim então posso até diminuir um pouco colocar uns 15 assim Beleza Aqui tá o ícone então ícone eu quero deixar ele na cor nessa coisinha verde aqui e quando passa o mouse ele fica na cor Preta assim beleza aqui você regula o tamanho do ícone roda para rodada para fazer enfim várias configurações aí tá em background

não vou mexer aqui nessa tagzinha a cor vamos deixar a cor do fundo aqui eu quero colocar um degradê assim e assim É que regula o ângulo e a cor eu vou deixar na cor preta assim tipografia vou deixar secundário só vou reduzir aqui Assim fica mais bonitinho assim beleza legal legal é que você pode fazer ó deixa eu só vendo responsivo primeiro como que ficou aqui ó Nem tenho que fazer já tá configuradinho tá aqui no tablet beleza não vou mexer no tablet [Música] aliás aqui no tablet deixa eu ver aqui impedir aqui ó

colocar um pé de 40 superior 40 inferior ela espera eu posso colocar uns 60 assim tá beleza no celular ficar assim mesmo no computador você vem aqui você cola e aqui você cola tá E daí você vem aqui Ó e você altera os textos de cada um enfim você altera aqui as informações enfim você vai colocando aí o que que faz sentido para enfim para que ele tem um modelo ali de negócio tá os íconezinhos os textos né como eu falei eu não vou alterar porque é tudo fictício tá então a ideia de ensinar a

como fazer né ó fica assim então eu posso vir aqui ó nesse container aqui E tá duplicando ele ó e fazendo mais ícone É só colocar isso aqui um pouquinho para cima assim beleza Vamos alterar outros ícones aqui vou colocar esse aqui beleza vamos atualizar e vamos abrir aqui numa nova guia para ver como que tá ficando ó tá ficando assim então o nosso site Vamos só ver aqui no tablet Como que ficou ficou assim então no tablet Deixa eu só ajeitar aqui vamos ver esse aqui ele tá no tamanho 36 Então esse aqui é

também 36 também só vou reduzir aqui eu vou colocar uns 50 em 50 beleza vamos ver aqui no celular vou clicar aqui no celular eu vou manter aqui ó 50 50 aliás eu vou colocar 60 e 60 no celular tá porque eu tinha Zerado antes ali o container e o container já vem por 10 tá E aqui eu vou colocar 20 e 20 assim ó ficando assim então não responsivo na maioria dos celulares vai abrir exatamente assim Beleza vou clicar em atualizar aqui vamos parar a próxima sessão aqui então do nosso site essa sessão aqui

vou colocar sobre empresa tá então vou selecionar essa Estrutura aqui vou vir aqui avançado Vamos colocar aqui sem superior sem inferior aqui desse lado eu quero colocar uma imagem assim ó vou vir aqui vou pegar essa imagem mesmo aqui só vou editar ela quero colocar ela mais na retangular assim ó Beleza vou salvar aqui essa imagem beleza eu vim aqui enviar arquivos essa imagem aqui ela tá no tamanho pequeno então 544 por 720 tá só para você ter uma noção aí da resolução das imagens tá para você tá utilizando beleza posso vir aqui ó pegar

esse textinho aqui copiar posso vir aqui posso colar é que eu botaria por exemplo sobre vou pegar esse outro aqui ó já tá na cor preta né já tá também alinhado para esquerda beleza vou pegar um pouquinho mais de texto Posso pegar esse aqui ó copiar posso vir aqui e posso colar eu vou pesquisar aqui também por caixa de ícone deixa eu achar aqui É esse aqui na verdade ó está como ícone mas tá para cá aqui eu vou colocar tipo uma missão visão e valor está que é bem enfim é bem comum aí nas

empresas tá então missão e daí o outro visão e o outro valores tá Vamos escolher aqui um ícone aos ícones tem esses aqui padrão do elemento ele tem esses outros aqui mais diferenciados aí que é do elemento skate tá botar isso aqui mesmo só para ilustrar vou vir aqui estilo vou deixar alinhada assim ó assim beleza esse ícone aqui vou deixar ele nessa cor aqui em conteúdo a cor do título Vamos ver se fica legal um verde eu vou deixar esse tom de verde aí ou o azul não sei que cor é essa vou vir

aqui primário aqui eu vou deixar um 20 assim e a descrição aqui vou deixar na cor preta na tipografia secundária assim aqui você regula o espaçamento e o ícone aqui ó tamanho do ícone eu espaçamento tá Eu só vim aqui nesse título É espaçamento ficar assim o ícone é vou deixar assim tá deve ser configura aí da forma que você quiser beleza é só vir aqui ó e tá duplicando E aqui e duplicar também ó então aqui por exemplo eu poderia colocar a visão e nesse outro aqui valores assim então pode ver que fica bem

apresentável aí para o usuário tá ó uma visualização bem agradável Vamos alterar esses ícones aqui para não Ficarem todos iguais aí beleza só para ilustrar mesmo tá posso colocar um botãozinho aqui também então ó pegar esse botão aqui já tá pronto copiar vou vir aqui e vou colar esse botão é quando a pessoa clica nesse botão A ideia é direcionar ela para a página de sobre tá então vou colocar aqui saiba mais Ó aqui tá na parte de contato ó vou Colocar aqui o Slug da página de sobre aí beleza essa imagem aqui eu vou

adicionar aqui uma bordinha direita e um 50 assim para ela não ficar tão próxima ao conteúdo tá eu posso adicionar aqui uma arredondamento também aqui arredondamento ó colocar uns 5 assim dessa maneira tá vamos ver não responsivo Beleza no tablet ficar assim aqui no celular ó eu vou tirar essa margem que eu coloquei assim ó só deixar padrãozinho aqui o container esses elementos aqui vou deixar alinhados para a esquerda como é que ele não colou o estilo vou ter que alinhar assim esse outro aqui também beleza botãozinho aqui ó Aí fica assim então essa sessão

vamos ver aqui um dispositivos maiores ficar assim então vamos atualizar e qualquer dúvida que você tiver durante a aula pode tá deixando nos comentários tá inclusive é muito importante o teu comentário aí para enfim para mim saber o que eu devo melhorar na próxima vez o que eu devo ensinar o que não devo tá então ajuda muito aí o seu feedback beleza vamos adicionar mais uma sessão aqui vou Deixar nessa cor aqui ó quatro containers Aliás na cor preta e aqui eu vou colocar alguns números da empresa olha só que legal eu vou pesquisar aqui

por contador só ajustar primeiro aqui vou deixar 50 e 50 assim Mas se você quiser pode deixar mais sem e sem eu acho que vou deixar em 100 aí aqui então você pode colocar por exemplo aqui ó tá sem número legal né Por exemplo pode ser tanto número de Clientes atendidos tal número de pedidos feitos tantos anos de experiência enfim essas números aqui os números da empresa tá então vou deixar em 100 mesmo mas você pode colocar aqui quantos números quiser tá Então nesse primeiro aqui eu poderia contar colocar aliás por exemplo 10 anos 10

né E aqui em número legal anos de experiência tá então você segue essa mesma lógica e faz aqui tá nesse caso vou deixar em 100 aqui e número Legal mesmo porque é só para ilustrar Mas aí você configura como você achar melhor beleza Vamos aumentar um pouquinho essa fonte aí o título aqui ó deixar ele na cor branca de tipografia secundário beleza agora é só copiar e colar aí Vou atualizar vamos ver aqui no responsivo lá no tablet e no celular Aqui no celular eu só vou deixar aqui 50 assim ó próxima sessão Vamos colocar

aqui alguns depoimentos que é bem importante ter aí no site tá posso pegar aqui ó essa sessão contêiner aliás que está pronto copiar vir aqui e colar para cima aqui eu vou excluir essas informações aqui Aqui é aqui e daí eu só vou inverter as cores aqui ó vou deixar esse container aqui na cor branca informação aqui ó na cor preta ó e tá pronto aqui mais uma sessão praticamente tá mais um container que que eu vou fazer agora então vou adicionar aqui alguns depoimentos de clientes tá como que eu vou fazer isso eu vou

adicionar a fotinha da pessoa em baixo o depoimento Ó vou puxar a imagem para cá vou vir aqui no meu computador ó separei essas imagens aqui são todas imagens aqui que estão em tamanho pequeno beleza vou deixar bem pequeno essa imagem vou deixar aqui 90 pixels assim e vou deixar ela redonda vou adicionar um arredondamento vou pegar esse títulozinho aqui vou colar ele aí é que seria por exemplo ao nome da pessoa ó vamos reduzir aqui Para o tamanho 16 assim eu vou pegar esse textinho aqui que seria o depoimento da pessoa por exemplo tá

e você segue a mesma lógica aí no seu site só vou colocar aqui em estilo itálico assim ó o peso posso colocar uns 300 não vou deixar 400 tamanho vou reduzir aqui para uns 15 deixar Centralizado e vou tirar aqui Essa margemzinha aqui na direita esse aqui também ó vou tirar essa margenzinha na direita aqui eu vou colocar mais para cima o nome da pessoa tá assim posso adicionar também uma classificação de estrelas gosta de deixar assim posso estar aumentando aqui o tamanho beleza posso estar clicando aqui no container vindo aqui em estilo Borda e

colocar uma sombra olha dessa maneira assim aí eu só vou deixar uma arredondamento aqui em cinco vou vir aqui impedem colocar um pede aqui também de uns 40 ó Aí fica dessa maneira então o depoimento aí da pessoa tá aqui que eu faço agora eu duplico aqui esse container e troco as informações como adicionar outra imagem para cá então você pode estar fazendo isso né Pedindo depoimentos aí dos seus clientes tá só não fica legal enfim colocar depoimento fake tá eu não recomendo fazer isso acaba não passando confiança né várias pessoas então se você não

tem depoimentos ainda deixa assim depoimento né não coloca aí do seu negócio né deixa para colocar quando tiver enfim os depoimentos reais tá assim então essa parte ele depoimentos vamos ver aqui No tablet beleza vamos só reduzir aqui esses textos assim aí vamos ver aqui no celular como que fica celular aqui vou reduzir também vamos colar os estilos aqui e vamos colar o estilo aqui ó por algum motivo Sumiu os textos aqui acho que é minha internet aqui que tá deve ter caído o sinal e daí sumiu aqui Só vou recarregar essa página aqui para

a gente abrir novamente tá Então até se acontecer qualquer bug no teu elemento aí interessante de vez em quando dá uma recarregada na página tá aqui no editor do elemento para tá abrindo aí tudo certinho beleza ó vamos ver se agora apareceu aqui Agora sim ó tá aí os textos beleza qual que vai ser a próxima sessão agora eu vou colocar uma chamada para ação tá como que eu vou fazer isso Posso tá pegando essa aqui ó que já está pronta e configurada copiar vem mais embaixo aqui e colar aí como eu não quero esses

Box aqui ó eu vou estar excluindo eles mais uma vez assim colocando um texto aqui embaixo Então posso pegar um texto aqui copiar ou vir aqui vou colar esse texto vamos colocá-lo na cor branca e vamos pegar Um textinho aqui maior Vou centralizar Vamos colocar um botão aqui também pode ser o botão dentro do contato mesmo vou copiar vou vir aqui vou colar centralizar esse botão ó aqui tem uns 50 que eu vou tirar vou tirar esse 15 vou diminuir um pouco aqui essa largura assim Pode ver que ficou mais agradável a visualização Tá eu

vou colocar uma imagem aqui sobreposta no fundo Para ficar mais bonito tá vou colocar essa imagem aqui ó ela já tá no tamanho legal não precisa eu mudar Beleza só vou mexer aqui a mãe dela na cidade assim então vamos ver aqui [Música] ó só que no tablet vamos ajustar que não tá legal colocar aqui Um 21 20 e aqui eu vou tirar assim Beleza fica assim no tablet aí no celular ficar assim é que como esse contêiner aqui ele é uma chamada para ação posso até aumentar um pouco o tamanho aqui ó colocar um

120 um 120 tá por ser diferente dos outros tá bom aí dos outros mantém um padrão de 50 pixels 50 pixels inferior beleza e agora que vamos adicionar então nosso formulário de contato aí enfim Para o usuário tá enviando mensagem e a gente tá recebendo essa mensagem no nosso e-mail ou no WordPress beleza posso pegar esse container aqui ó vou vir aqui embaixo vou colar aqui eu vou inverter eu não sei se eu vou conseguir inverter não se eu voltar aqui eu vou excluir esse aqui ó aí daí eu venho aqui e adiciono um novo

container tá aí que que eu faço esse aqui 50% E esse outro aqui 50 por cento Vou excluir essas informações aqui ó e aqui eu colocaria por exemplo ainda em contato preencha o formulário ao lado entre em contato enfim essas coisas tá Vou atualizar aqui e olha só eu vou voltar aqui no meu painel do WordPress para ensinar para você como que cria os formulários Ó tem essa opção net forma vamos clicar aqui informes e esse plugin ele é parecido com o elemento tá então a primeira vez que você abrir ele vai pedir para você

Fazer algumas configurações aqui ó é só clicar em próximo para deixar tudo certo tá E daí você vem aqui informes é que você consegue criar formulários de contato tá então vou vir aqui em Adicionar novo e vamos criar aqui um formulário de contato tá vou deixar Forme o nome mesmo aqui ó eu vou clicar em Edition e olha só que legal vai abrir aqui o editor do elemento e a gente consegue criar o nosso formulário e daí a gente consegue pedir ele para Pessoa inserir o nome dela é a mensagem telefone e-mail enfim as informações

que a gente quiser tá vou vir aqui no texto vou arrastar Um textinho para cá ó vou deixar desativado essa opção de leigo aqui que aquela parte ali que aparece em cima ó que seria o Field né que eles chamam que a camada né Aliás o campo ou mais para baixo aqui em Place holder eu vou colocar digite seu nome assim Aqui em setting eu vou deixar ativado essa opção ó que é obrigatório a pessoa preencher vou vir aqui em estilo aqui no Bolt vamos ver mais para baixo aqui tipografia secundário assim e aqui no

place holder tipografia secundário então digite seu nome e a pessoa vai digitar beleza aqui na cor ó vou deixar essa cor mesmo assim [Música] e aqui no embut também eu só vou colocar uma borda aqui ó borda sólido cor vamos deixar a cozinha assim ó e border raios vamos deixar em cinco tá então aqui a pessoa colocaria o nome que que eu posso fazer agora eu venho aqui é que você explora você quer pedir sei lá para pessoa inserir o telefone o e-mail outras opções aqui é só você Arrastar para cá então eu vou pedir

no caso aqui o nome o telefone da pessoa ó vou desativar o labor aqui aqui vou colocar digite seu telefone assim e aqui em sétimos vou deixar obrigatório tá E que que eu faço eu clico aqui nesse primeiro ó copio vem aqui cola o estilo Beleza então o nome telefone eu quero que a pessoa coloque também o E-mail Vamos repetir aqui o mesmo esquema ó [Música] aqui digite seu e-mail lembrando pessoal que eu tenho uma aula aqui no canal específica para esse formulário de contato tá então se porventura você tiver alguma dúvida aqui enfim de

como funciona aqui enfim das configurações eu vou tá deixando também esse link aí dessa aula complementar na Descrição do vídeo tá para você tá enfim conferindo depois caso tenha alguma dúvida Tá mas é bem tranquilo é só seguir o que eu tô fazendo aqui ó aqui sua mensagem assim eu vou deixar obrigatório também tá aí vou vir aqui ó vou copiar vou vir aqui vou colar o estilo e agora vamos adicionar o botão né senão não tem como a pessoa enviar mensagem sem o botão Então vou colocar aqui por exemplo enviar mensagem assim vou adicionar

um Ícone igual tem lá no outro botão que eu fiz então um ícone de flechinha assim beleza uns personalizar esse botão o grafia eu coloquei se eu não me engano foi primário e tamanho 18 e o peso eu coloquei uns 200 não sei se é isso que eu coloquei mas aí você configura tá o botão igual você Configurou lá na página inicial para ficar tudo padrão beleza aqui o tipo de fundo eu sei que eu fiz o degradê assim e a cor aqui a cor branca assim a que se regula o ângulo desse degradê tá

beleza mais para baixo aqui vamos ver se eu consigo trocar a cor do ícone deixar na cor preta aqui vou deixar Centralizado mesmo Vou vir aqui em conteúdo vou deixar o botão alinhado assim é só uma configurei o Rover aqui nesse botão aqui o Hover o texto ele permanece preto e o ícone ele permanece Preto assim então detalhe que esse formulário aqui ele já é automaticamente otimizado aqui para os outros dispositivos tá vou clicar e Beleza vou salvar e fechar e o que que Acontece agora a gente já tem aqui Um formulário de contato então

criado no nosso WordPress tá E daí você pode estar criando outros formulários de contato tá então isso é bem útil para se por exemplo lá você quer colocar na home do site um formulário de contato mas esse aqui que irá outra página por exemplo lá você quer criar uma página ali trabalho conosco em outra página separado tá então você criar outro formulário de contato e aqui você faz a gestão dos Formulários tá todos os contatos que você tiver recebendo dos formulários vão vir parar nessa abinha aqui dentro está e nessa aqui de settings você tem

várias configurações para fazer Tá eu já vou mostrar melhor ali como que funciona beleza vamos voltar aqui nas minhas páginas na minha home aliás vamos clicar em editar com o elemento e vamos aguardar o editor carregar aqui mais uma vez beleza carregou aqui a página inicial Ou vir mais para baixo mais para baixo alguém aqui no fim ó e vou pesquisar aqui por macform que daí como você tem o instalado vai aparecer a opção macform eu vou arrastar para cá vou clicar aqui ó forme esse aqui é o nome que eu dei para o formulário

que eu criei tá eu clique em Edite então aqui se tiver mais alguma alteração que você queira fazer você pode revisar aqui nesse caso eu vou salvar e fechar vou clicar em atualizar Aqui Vamos só ver aqui antes de mais nada aqui como no tablet ficou legal e no celular aqui ficou legal também não vou mexer ó fica assim então Vamos abrir aqui então numa nova guia ó então o pessoal vai vir aqui no seu site vai navegar vai vir aqui no final e vai colocar então aqui o nome o telefone Ó aqui eu esqueci

de configurar a mensagem de erro ó um e-mail aqui assim e uma mensagem tá clicar em enviar mensagem ó thank you deve aparecer em inglês né que o formulário foi enviado com sucesso é para você ter acesso a isso você vem aqui no painel né como eu falei vem aqui em Endres e Aqui ó pode ver que já apareceu uma opção o que eu acabei de enviar tá aqui as informações que eu acabei de Enviar e aqui vão aparecer todas as informações tá deixa eu só vi mais uma vez aqui informes ouvindo nesse aqui editar

aqui ó você consegue personalizar Então essa mensagem tá então que você pode trocar você pode botar Obrigado formulário enviado com sucesso e mais embaixo Aqui você pode direcionar a pessoa para onde você quiser tá então Ah você quer que a pessoa depois que preencher o formulário Vá para outra página em específico você pode criar página no WordPress né e colocar o link da página aqui ou colocar até um link de enfim para a pessoa ser direcionado por WhatsApp enfim vai de cada um tá aqui tem essa opção se você quer receber a confirmação no seu

e-mail tá então você deixa ativado aqui configura aqui se você quer notificar o administrador do WordPress ou seja se você quer receber uma confirmação no seu e-mail ali que você Cadastrou do WordPress e aqui você pode fazer integração com algumas ferramentas de e-mail marketing Como por exemplo o meio chip que é bastante usado tá então é bem fácil para estar configurando aqui o meio chip e daí você só basicamente vai colocar a pi lá do Meio chip aqui ó e vai fazer integração tá E daí você consegue fazer campanhas de e-mail marketing beleza vou vir

aqui nesse forme e vou editar com elemento só para mim mudar Aquela parte vermelha ali grande que apareceu tá vamos aguardar carregar aqui e daí feito isso a gente vai partir para a criação das outras páginas beleza ó tá aqui o formulário ó essa opção aqui eu vou deixar a fonte secundário e daí eu vou clicar aqui e vou copiar e vou vir aqui vou colar e aqui eu vou colar e aqui eu vou colar também e eu vou atualizar e ouvir mais uma vez aqui na Home do meu site e você vai ver que

não vai ter que não vai estar mais daquele jeito ó ó apareceu assim tá então você faz as configurações como você achar melhor beleza ó então aqui nessa aba eu estou com a parte que de a página de home aberta tá e eu vou manter ela aberta aqui deixa eu fechar essas outras Abas aqui aqui nessa outra aba eu vou fazer a edição das outras páginas tá então vou vir aqui no Meu painel páginas todas as páginas E por que que eu vou deixar a página de home aberta aqui porque eu vou conseguir copiar vários

elementos prontos aqui da home e só colar lá nas outras páginas tá então posso vir aqui na página de serviços vou clicar aqui em editar E mais uma vez vou abrir o editor do elemento tá vamos aguardar carregar e vários elementos lá prontos eu já posso colar aqui e daí você vê que Fica sei lá 90% mais fácil para você fazer dessa maneira tá vou vir aqui Léo aqui da página sempre colocar elemento com largura total e aqui no serviços eu posso pegar por exemplo aqui ó esse banner principal eu posso vir aqui eu posso

colar vou excluir esse botão aqui e aqui eu posso colocar por exemplo nosso serviços conheça nosso serviços essa nossa página de serviços enfim diversas informações aqui que você pode Estar personalizando tá você pode inclusive mudar a imagem então na home você vai deixar uma imagem aí quando a pessoa vai para página de serviços e daí você vem aqui ó no serviços copia vem aqui e cola ó e daí personaliza e se você quer por exemplo a adicionar mais serviços você consegue adicionar também tá nesse caso aqui ó vou adicionar essa parte aqui do vídeozinho Ó

que eu acho Legal ó então o pessoal clicou no serviço usar vai ver o vídeozinho ali aqui tem outra imagem diferente tem um fundo diferente e aqui tem quantos serviços aqui enfim você quiser colocar tá é você quer mais serviços ó vem aqui e duplica ó e coloca mais serviços tá coloca enfim as informações e que você quiser beleza outra coisa legal também é colocar o formulário aqui né nessa página de serviço né para ser a Pessoa quiser entrar em contato lembrando também que você pode colocar por exemplo lá um botãozinho do WhatsApp aqui ó

no canto inferior direito tá eu tenho outro vídeo aqui no canal que ensina como colocar esse botãozinho do WhatsApp Beleza então é bem tranquilo vamos ver aqui no WP de mim páginas todas as páginas agora vamos editar a página de contato vamos editar aqui com elemento e vamos fazer esse mesmo esquema tá Vamos colocar aqui na engrenagenzinha aqui em configurações layout da página elemento largura total E mais uma vez eu posso vir aqui ó e pegar essa sessão copiar eu venho aqui eu colo vou tirar o botão obviamente né porque a gente já tá na

parte de contato você configura aqui um texto diferente uma imagem diferente e aqui ó pega o formulário Lembrando que esse formulário aqui Quando você editar ele lá no fórum né no macform lá ele altera em todas as páginas tá Então não precisa você editar ele de uma em uma página de contato aí você quer adicionar o Google Maps por exemplo vem aqui ó pesquisa por Maps arrasta para cá coloca aqui o endereço só que vai aparecer certinho o endereço aqui é só vir aqui vamos zerar aqui ó o Espaçamentos nesse contêiner e colocar em largura

total e 100% olha só ele abre assim então o Google Maps vamos atualizar e vamos editar também agora a página de sobre páginas todas as páginas página de sobre vamos editar editar com elemento eu peço que você ainda não saia do vídeo tá porque eu tenho mais algumas observações aqui algumas configurações finais para a gente fazer Aí para o nosso site ficar assim por cento tá lembrando mais uma vez aqui na descrição do vídeo eu vou deixar aí uma playlist completa e com várias aulas complementares tá então peço também que você veja com calma a

descrição do vídeo né você ler e para você ter acesso a tudo que você precisa aí para complementar aí o seu site ó vamos pegar aqui essa parte sobre ó copiar Vou vir aqui e colar Tá lembrando pessoal que eu tô fazendo dessa maneira assim mais rápido essas outras páginas para não ficar um tutorial muito longo tá então tipo eu não vou adicionar adicionar mais informações a ideia é te mostrar mesmo como que faz tá e daí você personaliza cada página como você bem entender beleza Vamos abrir aqui a nossa home ó Fica assim então

a home do nosso site aí Aqui a página de serviços ó ficaria assim então a página aqui de sobre e a página de contato beleza pessoal configurações finais Então vamos ver aqui no painel configurações links permanentes aqui eu sempre deixo selecionado essa opção aqui nome do post tá recomendo que você deixe também vamos salvar as alterações Outra coisa importante vão vir aqui em aparência personalizar posso fechar aqui a minha home agora a identidade do site e aqui a gente consegue selecionar o ícone do site tá então a gente pode pegar essa imagem aqui por exemplo

ó selecionar o ícone do site é esse íconezinho ó que aparece aqui onde eu tô com meu mouse ó na aba do navegador tá que é chamado de Fave favicon também então você pode vir aqui ó tá alterando ó recortar a imagem e ó Pode ver que já mudou ali já apareceu Ó daqui você muda mais uma vez o título se você quiser e a descrição tá vou clicar em publicar e Beleza pode ver que vai ficar assim o site de agora em diante tá pessoal Então a nossa aula de hoje era isso eu espero

ter ajudado deixa aí nos comentários se deu certo para você se der algum probleminha deixa também que eu tento auxiliar todo mundo beleza mais uma vez eu reitero na descrição do vídeo vai até vai ter aí todas as aulas Complementares eu espero aí que essa aula de verdade tenha até ajudado tenha agregado de alguma forma na sua vida tá valeu e até a próxima