Como criar um SITE INCRÍVEL estilo ONE PAGE | WordPress Elementor

5.41k views9674 WordsCopy TextShare
Aprendendo Sites
👉 Hospedagem Hostgator com Desconto: https://www.hostgator.com.br/42850.html Este vídeo vai ser pr...
Video Transcript:
esse vídeo vai ser praticamente um curso gratuito aqui no YouTube hoje eu vou te ensinar todo o passo a passo de como criar um site profissional estilo One Page para isso vamos utilizar o WordPress que é bem tranquilo de usar e claro aqui de exemplo eu criei um site para hamburgeria Mas você seguindo o meu passo a passo você vai conseguir entender o processo de criação e aprender a criar qualquer outro site bom entes da gente começar eu só peço que você não esqueça de deixar o like no vídeo e também de se inscrever no
canal caso você ainda não seja inscrito beleza sem Muita enrolação vamos aqui pra tela do meu computador [Música] então beleza pessoal vamos lá então eu tô com o site Pronto já aqui ó e eu vou refazer esse site junto com vocês na prática tá só uma observação inha bem importante aqui o que que seria um site estilo One page seria isso aqui ó um site com apenas uma página pode ver que ele tem esse menu aqui em cima ó cardápio ó o usuário clica aqui e ele é direcionado para a própria página ó sobre é
direcionado ã avaliações ó é direcionado então isso aqui é um site One page tá coloquei aqui também um botãozinho do WhatsApp né que usuário ele pode clicar nesse botão e ser direcionado para o WhatsApp né E como eu falei ali no início da aula esse aqui é só um site aí para Hamburgueria né só um nicho aí que eu escolhi para fazer Porém você seguindo a minha aula aí seguindo todo o passo a passo você vai conseguir aprender a criar qualquer tipo de site tá aí por exemplo Ah você quer criar um site para advogado
você vai substituir essa imagem aqui de hambúrguer por uma imagem aí de advogado tá esse logotipo aqui você vai colocar o seu logotipo esses textos aqui você consegue personalizar Ah você quer um site para dentista você consegue adaptar Você quer um site para sei lá academia para engenheiro independente do nicho você consegue adaptar aqui ó tem o algumas fotos Ó que pode ser de produtos talvez se você vende algum produto ou de serviços tem os os botões aqui né Que o usuário pode estar clicando indo pro WhatsApp ou enfim depende da sua estratégia tá você
consegue personalizar tudo isso aqui 100% do seu jeito as imagens as cores ã tudo tudo tudo beleza então eu tenho certeza aí que ao final dessa aula você vai pegar bem a ideia de como que funciona e vai aprender aí a criar qualquer tipo de site aqui e e isso sem utilizar nada de programação né só com WordPress e o elementor que é bem tranquilo de usar que eu já vou mostrar na sequência tá mas antes eu separei aqui um passo a passo rapidinho aqui só para ninguém ficar perdido tá então como criar um site
One page o nosso primeiro passo aqui seria a configuração de domínio e hospedagem tá então já na sequência eu vou ensinar para você como contratar e configurar uma hospedagem profissional de site Beleza então você vai ter aí o seu site com o nome da sua empresa né enfim o nome da sua empresa P com ou seu nome.com.br enfim algo realmente profissional algo que fique online 24 horas por dia para as pessoas acessarem Beleza então a gente tando tendo feito essa configuração de domínio e hospedagem a gente vai instalar WordPress na nossa hospedagem tá WordPress se
você não conhece né se você caiu de para-quedas aqui nesse vídeo WordPress é uma ferramenta de criação de sites e para ser mais preciso é a mais utilizada no mundo então pode enfim criar aí o seu site com confiança tranquilidade porque muita gente hoje em dia cria o seu site utilizando WordPress é a plataforma número um do mundo beleza dentro do WordPress a gente vai fazer a instalação de um tema a gente vai instalar o elementor que o elementor ele é um page builder né que é através dele que a gente vai conseguir enfim deixar
tudo isso personalizado assim dessa forma né E também a gente vai fazer algumas configuraçõe inhas extras o quarto passo Então a gente vai criar o header e o footer que seria o cabeçalho e o roda pé então o cabeçalho seria essa parte aqui ó que tem o logotipo e o menu tá que isso aqui você vai conseguir colocar o seu logotipo colocar a sua cor e colocar aqui o que você quiser ó no caso aqui coloquei a cardápio sobre avaliações WhatsApp mas aí você pode colocar ã serviços contato enfim o que fizer sentido para você
tá E aqui no finzinho do site ó tem esse rodapé tá então tem aqui as redes sociais Tem Um textinho aqui ó que você pode estar colocando CNPJ da empresa enfim o que fizer sentido para você beleza e o último passo então o quinto passo seria realmente a criação do site tá enfim fazer aqui o nosso site 100% personalizado do nosso jeito beleza Lembrando que as imagens aqui ó eu já separei aqui no meu computador são todas imagens Aí como eu falei fictícias tá o logotipo Ó eu peguei aqui no canva mesmo tá eu fiz
rapidamente aqui o mod inho você pode entrar aqui no canva mesmo e tá pegando aqui ó tem vários modelos de logotipo Ó você pode est enfim explorando aí tá as imagens eu peguei aqui no freepick.com que é um banco de imagens Porém na internet se você pesquisar você vai ver que tem uma infinidade de banco de imagens então você pode estar pegando as imagens aí na internet ou até mesmo colocando suas próprias imagens tá vou te ensinar aí no decorrer da aula qual o tamanho correto das imagens Como configurar as imagens tudo bonitinho beleza os
textos Ó eu peguei nesse site aqui Lauren y.io esse aqui é um site que os designers usam né para preencher espaços né para pegar esses textos fictícios aqui para preencher espaço ó que é o que eu fiz aqui ó são todos textos em Loren Y Tá mas é claro que é só para ilustrar mesmo aqui o nosso layout né para ficar mais bonito mas aí você vai digitar os seus textos aí da maneira que você quiser Beleza então acho que os recados aí seriam esses na sequência então eu já vou ensinar para você a como
contratar e configurar domínio e hospedagem beleza vamos lá então e nesse momento então eu peço que você acesse o primeiro link da descrição desse vídeo e você vai cair nesse site aqui da hostgator tá E aqui através da hostgator você consegue ter acesso a Praticamente tudo que você precisa para ter o seu site online tá então você pode estar entrando aqui nesse link tá esse link é o link exclusivo aí com desconto Então você vai garantir através do meu link o maior desconto possível beleza e eu vou vir mais embaixo Aqui e aqui eles TM
alguns planos de enfim hospedagem tá tem o plano start plano M plano p e plano turbo tá Qual que é a diferença entre um plano e outro você pode estar vindo aqui ó e fazendo o comparativo Tá mas basicamente se você quer criar mais de um site talvez no futuro né você tem plano aí de criar vários sites é interessante já você contratar aqui o plano em que aqui você você consegue ó hospedar sites e domínios ilimitados ou o plano Turbo que você consegue hospedar sites e domínios ilimitados e ele tem uma performance melhor aqui
que os outros planos tá isso não quer dizer que os outros planos aqui sejam ruins tá muito pelo contrário plano P aqui já é super interessante para você que tá começando agora tá ou até mesmo o start tá mas eu recomendo Talvez o m ou o turbo aí né para você que vai criar mais sites né Inclusive eu vou vou vir mais embaixo Aqui ó e você pode est lendo aqui todas essas informações entendendo melhor como que funciona tá vamos mais embaixo tem alguns depoimentos aqui de clientes aqui tem um comparativo Então por que que
vale a pena você contratar a hostgator para est criando o seu site e uma das coisas que eu mais gosto aqui da hostgator sem dúvidas é o suporte 24 horas por dia 7 dias por semana então quando você fizer a contratação aqui da hostgator e se porventura você tiver algum erro na sua hospedagem algum problema enfim alguma coisa aí que você precisa de auxílio é só você entrar lá com um chat online e tem pessoas reais ali tirando as suas dúvidas e te ajudando beleza ó eu vou voltar aqui para cima nesse caso eu vou
escolher o plano m tá vou clicar aqui em começar agora nesse nessa próxima etapa aqui a gente vai escolher o nosso ciclo de pagamento Tá então aqui é bem Auto explicativo ó 3 anos 1 ano 6 meses um mês tá Eu recomendo aqui que você deixe um ano ou 3 anos porque aí você ganha também um ano de domínio grátis Tá então você vai ganhar aí o seu domínio seja P com ou com.br totalmente de graça tá nesse caso aqui eu vou deixar um ano tá E daí você vê o que mais faz sentido aí
para você beleza ó continuar para o carrinho e beleza primeiro passo aqui vamos ver então se tá disponível o nosso domínio ó busque seu novo domínio nesse caso aqui vou colocar só como exemplo ó site do ã Rodrigo aqui tem as extensões ó P com bom vamos supor então que eu queira registrar esse domínio aqui site do rodrigo.com vou clicar aqui na lupinha para ver se ele tá disponível para registro né Afinal não pode ter dois domínios iguais e ó domínio disponível vou clicar aqui em adicionar domínio e você repete esse mesmo processo você vai
Aí você coloca o domínio que você quiser registrar beleza escolhe a a extensão Então esse domínio aqui ele estaria disponível tá aqui tem as informações então do nosso plano Então olha só que legal através desse meu plano de hospedagem aqui o plano M eu consigo criar sites ilimitados eu tenho e-mail eu tenho acesso a e-mail grátis certificado SSL e mais um monte de vantagens aqui inclusive o WordPress né que é a ferramenta que a gente vai utilizar para criar o nosso site tá aqui tem opção de e-mail ó se você talvez tem uma empresa grande
aí você quer contratar mais e-mail você pode estar contratando aqui também beleza e aqui outros serviços adicionais se fizer sentido para você você contrata vou clicar aqui em continuar para identificação e agora é bem fácil aqui para você continuar você vai criar uma conta aqui na hostgator Então você vai colocar um e-mail aqui né uma senha vai concordar aqui ó com os termos de renovação automática termos de serviço política de cancelamento você pode estar lendo tudo aqui com calma feito isso aí você vai fazer o pagamento tá que é aqui na etapa três Então você
vai escolher se você quer pagar ali ã via cartão de crédito via PX via boleto via PayPal você vai realizar o pagamento eu sempre recomendo você colocar cartão de crédito ou pix porque daí já a prova na hora tá e feito isso você vai ver que você vai receber vários e-mails aí na sua caixa de entrada dando a confirmação e dando as boas-vindas beleza feito isso você vai vir aqui no site principal da hostgator hostgator.com.br aqui você pode ver que o desconto não tá tão alto né Igual tava lá através do meu link você vai
vir aqui no portal do cliente acessar você vai fazer login aqui com seu usuário e a senha aí que você criou vai clicar em entrar e aqui então é o portal do cliente aqui vai aparecer o seu site né ou seja o seu domínio par ver que aqui eu tenho esse aqui ó canal aprendendos sites.com tá esse aqui é um domínio que eu uso de testes aqui enfim para as aulas tá mas aí vai aparecer o seu tá e se você tiver qualquer dúvida você vem aqui no chatz inho online deles ó E você continua
aqui e o pessoal vai estar aí enfim ao vivo tirando as suas dúvidas Isso é muito bom Beleza você pode estar navegando aqui também pelo portal do cliente tem opção de e-mails domínios hospedagens então aqui Você faz toda a gestão aí do seu plano de hospedagem você faz o pagamento das faturas enfim vê quando que vence e tira suas dúvidas beleza e olha só aqui vai ter o seu domínio e aqui do lado vai ter a opção de cpanel você vai clicar aqui no cpanel e aqui vai est abrindo Então o cpel que basicamente é
um software de gestão de hospedagem tá você vai vir até embaixo aqui e vai procurar a opção ferramenta WordPress vamos clicar aqui no WordPress Então nesse momento O que que a gente já tem aqui tá a gente tem um domínio né que aqui ó canal aprendendos sites.com e esse domínio ele já tá conectado a uma hospedagem agora dentro dessa hospedagem a gente vai instalar aqui WordPress ó vou clicar aqui em instale agora aqui eu vou deixar selecionado essa opção aqui https tá se Você registrou o domínio há poucos minutos aqui vai aparecer uma mensagenzinha de
erro mas você pode prosseguir que é normal essa mensagem tá porque o seu domínio ele ainda tá propagando na internet tá aqui ó você vai deixar selecionado o seu domínio se você tiver mais domínios na sua hospedagem vou aparecer todos os domínios que você tem aqui diretório a gente deixa vazio e a versão do WordPress sempre a última versão tá aqui a gente vai dar um nome pro nosso site uma descrição e aqui a gente vai escolher os dados de acesso ao WordPress beleza nesse caso aqui eu vou esconder ó vou gerar uma nova senha
então meu usuário aqui de administrador posso colocar ã Rodrigo assim e aqui tá a senha aqui o e-mail do administrador Eu recomendo você colocar algum e-mail seu do dia a dia Algum e-mail que você utilize bastante aí né para caso acontecer de você perder a senha e tal você consegue recuperar facilmente beleza aqui o idioma Ó você pode deixar inglês aí se você quiser ou português vou deixar português brasileiro aqui e essas outras opções eu vou deixar todas elas desmarcadas tá só aqui no nome do site ó deixei padrão aqui daí você pode mudar Ó
você pode colocar sei lá site Burger ó deixar assim só para ilustrar mesmo colocar aqui o One page tá só para ilustrar mesmo mas daí você coloca um nome né e uma descrição inha rápida aqui aqui agora vou vir aqui e vou clicar em instalar o WordPress beleza ferramenta instalada com sucesso e muita atenção agora aqui tá ó acesso ao painel da ferramenta tem esse segundo link Tá vou pegar esse link aqui ó vou copiar pode ver que esse link ele é assim ó tem o https tá aí vai ter o seud domino.com ou.com.br enfim
bar WP tracinho admin então sempre você vai acessar o seu painel PR através desse link tá então é interessante você pegar isso aqui copiar e sei lá guardar isso aí em algum lugar para você não perder tá vou até abrir aqui numa guia anônima ó vou colar aqui vou ir ó então aqui nesse momento eu colocaria o meu endereço meu usuar aliás né o endereço de e-mail e a senha ali que eu acabei de escolher na instalação e daí eu faria login aqui no WordPress beleza mas como eu já tô aqui dentro da hospedagem olha
só é só eu clicar aqui e ele já vai abrir o WordPress tá então através do WordPress aqui que a gente vai criar o nosso site Beleza primeira coisa que a gente vai fazer aqui dentro do WordPress a gente a gente vai vir aqui em aparência temas WordPress ele já vem com alguns temas aqui pré-instalados e o que que são esses temas são a aparência do site tá deixa eu vir aqui no meu site principal na minha página inicial ó canal aprend sites.com Ó o meu site ele tá assim tá tem alguns textinhos algumas imagens
tá tudo em branco mesmo né porque é o tema tá agora eu posso vir aqui por exemplo ó e ativar esse outro tema ó vou vir aqui em visitar site ó pode ver que mudou a aparência do site muda tá então vou vir de novo aqui vou colocar esse outro aqui ó visitar site ó já mudou então o tema el é basicamente essa aparência do site no nosso caso aqui a gente não quer pegar algo engessado né a gente quer criar algo 100% personalizado tá então vou vir aqui em adicionar o novo tema e eu
vou adicionar esse tema aqui ó hello elementor tá se não aparecer você vem aqui em Pesquisar temas e pesquisas pesquisa aqui Hello elementor tá vou instalar e vou ativar esse tema aqui ó vamos vir aqui em visitar site ó tá assim o nosso site então ele está em branco tá E por que que eu instalei esse tema aqui porque esse tema ele é 100% compatível com elementor tá que é enfim o construtor de páginas aí que a gente vai utilizar para criar o nosso site ã deixa eu vir aqui em temas ó esses outros aqui
ó posso estar excluindo tá porque eu não vou utilizar esses temas beleza aí você pode estar clicando nesse botãozinho aqui ó para instalar o elementor ou senão vem aqui em plugins adicionar plugin pesquisa aqui por elementor e tá aqui o elementor vamos instalar o elementor eu já vou aproveitar também já vou instalar esse outro plugin aqui ó elementor header footer builder tá se não aparecer aqui logo de primeira igual eu você vem aqui ó você ó exatamente como ele está escrito assim Beleza vou instalar porque esse plugin aqui ele é uma extensão para o elementor
Né e através desse plugin que a gente vai conseguir fazer ali o nosso header né header e o fter Né que é o cabeçalho e o rodapé do nosso site ó então vou clicar aqui em instalar também beleza posso vir aqui em plugins instalados ó vou ativar aqui o elementor vamos fechar aqui a gente não vai precisar do elementor pro tá o elementor ele tem a versão Pro a gente vai criar só com elementor gratuito ó elementor header fter builder ó vou ativar também beleza esses outros plugins aqui eu vou excluir porque a gente não
vai utilizar ó excluir excluir beleza bom e nesse momento aqui então Ó a gente já fez o primeiro passo né a gente já configurou aí domínio hospedagem a gente já fez o segundo passo a gente já instalou WordPress a gente já fez aqui o terceiro passo aó a instalação do tema elementor e demais configurações tá que que falta fazer aqui eu vou fazer o menuzinho agora tá que é essa parte que aparece aqui ó cardápio sobre avaliações WhatsApp eu devo colocar aqui os meus textos né E você faz aí e claro você adapta a sua
necessidade tá você coloca os seus textos né Que o usuário vai clicar e vai direcionar na página Beleza então olha só vir aqui em aparência menus aqui a gente não tem nenhum menu ainda tá então você vai vir aqui ó e vai criar o menu vou colocar nome e menu mesmo porque isso aqui não interfere em nada tá é só para você reconhecer aqui o menu e vou vir aqui em links personalizados aqui ó texto do link e vou colocar então cardápio cardápio assim tá aqui na URL eu vou colocar jogo da velha cardápio assim
ó desse jeito assim tá porque daí quando o usuário ele clica aqui em cardápio ó ele vai ser direcionado para essa página aqui para essa parte Aliás a sessão no site né sobre para essa tá e depois quando eu tiver construindo lá o site eu vou mostrar para você como fazer isso na prática né como configurar esse esse menu Âncora né esse direcionamento que a gente chama tá ó Card ã sobre assim adicionar a menu avaliações adicionar ao menu e vou colocar aqui também WhatsApp WhatsApp aí pro usuário Cair lá no WhatsApp aqui na na
URL né você coloca assim ó w.me Opa fiz errado me ã barra código do país no caso meu caso aqui Brasil então 55 código do Estado no meu caso como é Rio Grande do Sul 54 e os nove números do telefone tá então 1 2 3 4 5 6 7 89 tá daí o que que acontece o usuário ele vai clicar no botão do WhatsApp e ele vai cair aqui para falar com esse número beleza 1 2 3 4 5 6 7 8 9 tá vai ser assim desse jeito então beleza ó adicionar o menu
e aqui tá o nosso menu ó então cardápio sobre avaliações e WhatsApp daí Claro você configura né você coloca sei lá produtos sobre depoimentos serviços enfim o que fizer sentido aí para você beleza você pode colocar mais aqui ou menos Enfim vou salvar aqui esse menu Beleza agora que a gente já tem aqui o nosso menu eu vou criar aqui na prática o header né que é essa parte aqui de cima ó Então como que a gente vai fazer isso tá bom e agora então a gente vai criar né o header né que é essa
parte aqui de cima ó né ou seja o cabeçalho do site como que a gente vai fazer isso a gente vai clicar aqui em elementor header e e fter builder tá vou clicar aqui ó pode ver que não tem nada ainda criado vou clicar em Adicionar novo ah aqui eu vou pular essa parte tá vou clicar aqui ó aqui ó ah adicionar título tá Vou colocar aqui cabeçalho esse título ele não vai interferir em nada beleza é é só para você reconhecer mesmo selecione uma opção cabeçalho Aqui é onde vai aparecer Então eu quero que
isso aqui apareça no meu site inteiro aí como que funcionaria a lógica tá nesse caso aqui eu vou criar um site com apenas uma página porém se você criar depois mais páginas posteriormente né Você pode então configurar ele aqui ó para ele aparecer em mais páginas aparecem todas as páginas do seu site que é o cabeçário que é essa parte aqui onde eu tô com o meu mouse beleza aqui pros usuários ó eu vou deixar para aparecer para todos os usuários ou seja usuários logados deslogado enfim isso aqui não vai não vai interferir tá vou
clicar em publicar Beleza agora vou vir aqui e vou editar com elementor e aqui vai est abrindo o editor do elementor vamos aguardar carregar beleza ó antes de mais nada só vou definir as cores globais ó Então vou vir aqui configurações do site cores globais ã Então nesse caso aqui eu vou colocar as cores da minha identidade visual ó eu vou utilizar essas cores aqui que inclusive eu separei aqui no meu computador ó são essas cores aqui ó então tem esse Tonzinho aqui de Bege ó eu vou copiar aqui o código da cor Cadê vou
vir aqui ó adicionar cor ó vou dar um control V ó então vou utilizar essa cor esse tom de laranja vou copiar vou vir aqui vou adicionar a cor e daí nesse momento então você vem aqui e você adiciona aí as cores do seu logotipo as cores da sua identidade visual da sua marca tá Ah se você não tem cores definidas ainda não precisa você adicionar agora tá você pode ir fazendo aí e depois você configura tá ó aqui são as minhas cores são as cores aqui do do logotipo e tal né então são essas
as cores que eu vou utilizar ã no decorrer aí do meu site tá e o fato de eu adicionar as cores aqui Vai facilitar bastante o meu trabalho eu vou vir aqui também as fontes ó eu vou vir aqui primário eu vou colocar aqui uma fonte que eu acho legal tá então vou colocar aqui o Monte Serrat assim Pode ver que tá aparecendo aqui ó ã Monte Serrat peso 900 tamanho 60 assim peso 900 Então essa fonte aqui ó eu vou utilizar nos títulos que é essa aqui ó e daí nos nos textos né eu
vou utilizar também mon Serrat só que daí vai ser tamanho 16 e peso 400 Então vou vir aqui no secundário ó Monte serrate e daí você vem aí e coloca a sua fonte tá então basicamente eu vou utilizar duas fontes aqui né no título essa fonte maior e nos textos essa menor Ó essas duas aqui beleza aí você faz esse mesmo esquema e coloca as fontes aí que você você acha legal ó vou fechar aqui agora sim ó vou vir aqui no maisin flexbox selecionar uma estrutura aqui ó com dois contêiners daí eu vi eu
venho aqui no primeiro ó estilo ó clico aqui no global e ó eu escolho a cor ó então por isso a ância de você selecionar as cores da sua identidade visual que agora vai ficar bem mais fácil aqui pra gente est personalizando tudo tá eu venho aqui ó vou arrastar uma imagem para cá e vou colocar aqui a imagem do meu logotipo tá que é esse logotipo aqui ó que eu já fiz o download aqui ó ele tá aqui ó ele tá sim porém quando eu fiz o download do canva ele tá com umas bordas
em volta aqui e para corrigir isso você pode estar vindo aqui nesse site ó photopia.com esse site basicamente é um Photoshop online aqui e olha só que legal eu vou arrastar meu logotipo para lá ó ele tá com essas bordas enormes tá então Ó eu só vou configurar aqui do tamanho certo porque eu sei que muita gente tem dúvida aí do tamanho tá então Ó vou deixar o logotipo assim sem bordas tá senão ele vai ficar feio daquele jeito vou vir aqui ó exportar png salvar ó já fez download ali pro meu computador voltar aqui
tá aqui ó agora eu pego o logotipo ó arrasto aqui pro WordPress ó tá aqui então o logotipo ó vou colocar ele pra esquerda tamanho em pixels sem pixels mais ou menos assim agora eu vir aqui ó aqui então tem o layout o básico aqui tem o pro Ó aqui tá tudo bloqueado como eu falei a gente não vai precisar do elementor pro aqui tem o geral ó então tem mais elementos aqui que a gente pode est iando né E tem aqui ó o menu ó vou arrastar o menu para cá e olha só que
legal automaticamente Já puxou aqui o meu menu ó cardápio sobre avaliações e WhatsApp tá então para você também vai puxar o seu menu né exatamente o menu que você criou lá vai puxar e se você tiver mais de um menu lá vai aparecer aqui ó aqui tem escrito menu né que é o nome que eu dei lá pro menu então se você tem sei lá dois três menus aí no seu WordPress vai apare aqui você pode escolher qual você quer colocar aqui ó eu posso deixar selecionada essa opção de botão que daí o último item
ele se transforma em um botão aqui agora apareceu Ó botão layout eu vou deixar para a direita aqui tem algumas opções ó vertical assim ó nesse caso vou deixar padrão aqui né horizontal aqui tem várias opções também que você pode estar enfim personalizando vou deixar aqui pra direita aqui que é no responsivo depois você pode inclusive mudar os ícones aqui ó que vai aparecer né então basicamente no tablet ó ele já vai aparecer daquele outro jeito lá tá colocar ó no tablet ele já aparece assim no celular assim e no desktop assim vamos personalizar então
ele rapidamente aqui ó ó escolhi minha tipo secundária assim só vou colocar mais peso aqui aí cor do texto deixa eu ver eu coloquei tudo vermelho ali ó cor do texto vermelho quando passa o mouse pode ficar Amarelo ó e quando tá ativo eu vou deixar vermelho igual vou vir aqui no botão tipografia secundário 700 texto cor do texto eu vou deixar deixa eu ver qual é que eu coloquei aqui coloquei branco Ó cor do texto Branco cor do fundo vermelho assim ó e aí quando o usuário passa o mouse fica amarelo e o texto
eu posso deixar vermelho ó assim bora raios vou colocar um raiozinho da borda aqui ó eu pode ver que o botão ele fica Redondo ó bom seria mais ou menos isso aqui o nosso menu né posso estar clicando aqui nesse contêiner ó e justificar o conteúdo no centro tá posso vir aqui no outro contêiner principal em layout e aqui eu vou regular a largura tá Eu recomendo que deixar padrão tá aqui vem 110 recomendo deixar padrão que fica uma visualização agradável aí em todos os dispositivos beleza posso pegar também aqui a minha página inicial ó
canal aprend sites.com copiar vi aqui na imagem URL personalizado dá um cont control V aqui ó daí toda vez que o usuário clica aqui ele sempre é direcionado para a página inicial ó no tablet abre assim e no celular Vamos só ajustar aqui no celular ó vou clicar nesse primeiro contêiner porcentagem 50% vou clicar nesse segundo porcentagem 50% só vou diminuir um pouquinho esse logotipo deixar em 60 pixels assim ó fica assim então no celular daí claro que você pode vir aqui e personalizar Ah uma configuração bem importante aqui tá pessoal cliquem aqui no menu
ven avançado e aqui no z index ó pode ver que o menu ele tá atrás ali dos elementos tá então vou colocar Z index 1 para ele ficar na frente aqui no tablet ó a mesma coisa index um para ele ficar na frente tá então Para não acontecer de você ter algum elemento e alguma imagem e ficar por cima do menu tá você sempre faz isso no z index aí por exemplo Ah se você tem uma imagem aqui embaixo e a imagem tá com z index 1 e o menu com os index z0 isso quer
dizer que a imagem vai ficar por cima do menu Então você sempre vai fazer essa gestão né Você tem uma imagem aqui a imagem pode ser zero e o z index pode ser um o menu né o z index do menu Vou atualizar vou vir aqui no navegador ó aqui você consegue fazer a gestão também ó então aqui eu tenho a imagem ó assim vamos só abrir aqui a minha página inicial ó aqui já aparece então ó tá aqui o menu tá aqui o header do site né Agora vamos vir aqui ó aparência elementor header
fter builder vamos Adicionar novo e vamos adicionar o rodapé lá embaixo ó vou dar o nome aqui rodapé rodapé no site inteiro deixar todos publicar abrir aqui o elementor ó vou adicionar aqui o maisin nesse caso aqui eu vou deixar ele dessa cor preto aqui ó ele tá aparecendo em cima aqui mas ele vai aparecer lá embaixo tá pessoal posso vir aqui Pesquisar por ícones sociais ó e arrastar ícones das redes sociais ó então Facebook YouTube Vamos adicionar aqui no Insta Ó você pode estar pesquisando aqui pela rede social né e daí qual é que
é a lógica então você vem aqui ó cola o link do Facebook aqui o link do YouTube aqui o link do Instagram quer adicionar outra rede social vem aqui e acha aqui a rede social ó telegram enfim a rede social que você quer colocar ó insere tá nesse caso aqui vamos configurar essas cores aqui cor primária eu vou deixar transparente cor secundária deixa eu ver que cor que eu coloquei lá eu coloquei Amarelo assim ó preenchimento vou deixar assim espaçamento assim ícone ao passar o mouse cor secundária assim só vou vir aqui nesse contêiner vou
deixar no 50 pixels superior 50 inferior vou vir aqui também e vou adicionar um pouquinho de texto aqui embaixo tá então esse texto que seria Sei lá o CNPJ aí da empresa ã todos os direitos reservados tá o que fizer sentido para você Beleza vou deixar aqui um tamanho 13 um 14 assim vou regular ele assim Ah beleza isso aqui seria então o rodapé aí do nosso site ó ficaria assim nos outros dispositivos tá Vou atualizar aqui vamos abrir aqui o nosso site ó e tá aqui então Ó tá aparecendo aqui o rodapé aí com
as redes sociais e tal e aqui tá o header né e agora então a gente vai para o último passo aqui que é de fato a criação do site tá então agora que eu vou criar junto com você aqui vou inserir esses textos as imagens vou inserir tudo isso aqui na prática com você beleza vou vir aqui então no meu painel WordPress vou vir aqui em páginas todas as páginas aqui vão aparecer as páginas aí do seu site tá então aqui lembrando que você consegue adicionar depois aí quantas páginas você quiser beleza aqui por padrão
já VM com duas ó vou excluir essas duas páginas aqui e eu vou adicionar uma nova página que vai ser a nossa página principal aí né vou nomear aqui como home né ou início Enfim vou clicar em publicar Beleza vou voltar aqui ó posso clicar em ver tá assim a nossa página inicial tá ela tá em branco e agora que a gente vai criar ã uma configuração bem importante aqui eu vou vir aqui em configurações leitura sua página inicial exibe uma página estática e vamos selecionar a página pág inicial Tá salvar as alterações porque por
padrão WordPress ele já vim aqui com os posts tá se você vim aqui em posts ó ele já vem com um postzinho aqui e por padrão a página inicial né no caso aqui ó canal aprendendos sites.com a página inicial já puxaria automaticamente os posts né E nesse caso aqui eu configurei pra página inicial ser a página de home tá que é a página que eu vou criar agora aqui junto com você beleza vou vir aqui nas páginas todas as aqui ó vamos clicar em editar e vamos editar com elementor Então beleza primeira configuração important ó
vir aqui na engrenagenzinha layout da página a gente tem duas opções aqui tá deixar tela do elementor isso aqui é para você que vai criar uma Landing page por exemplo tá então você não quer que apareça menu em cima tá você pode deixando essa opção ou Element lura tal que nessa opção aqui vai puxar automaticamente o nosso cabeçalho e o nosso e o nosso roda pé e essa opção aqui então que a gente quer Beleza então já vou vir aqui no maizinho temos um contêiner aqui ó vou colocar ele nessa cor preto aliás coloquei errado
aqui V de novo aqui no maizinho selecionar essa estrutura aqui ó daí desse lado esquerdo aqui eu vou colocar os textos e desse lado direito eu vou colocar uma imagem tá vou deixar padrão aqui a largura 1140 ó assim posso vir aqui ó e arrastar o texto para cá que é esse texto aqui ó ó você pode ver que esse texto aqui ele tá com duas cores tá para isso ten um código que eu até já separei aqui pra gente não se prolongar muito esse aqui ó vou copiar vou vir aqui vou dar um cont
control V ó eu vou deixar esse código aí na descrição tá daí basicamente aqui ó onde eu selecionei você vai colocar o início do se o texto daí aqui já entra o código né e aqui a continuação do texto que você quer que mude de cor tá Então nesse caso aqui ó vou vir aqui ó configurei branco e aqui já tá configurado essa cor amarela tá no na continuação do texto mas daí você pode mudar tá Ah você quer colocar o vermelho você vem aqui e troca pro vermelho ó deixa eu pegar aqui codozinho do
vermelho ó copiar vou vir aqui vou dar um cont control V ó ó mudou para vermelho tá Então nesse caso vou deixar Amarelo Então tá o código aí claro que é opcional né você tá utilizando esse código eu vou utilizar aqui porque eu acho que fica legal fica mais bonito tá vamos adicionar aqui também um pouquinho de texto ó então você pode vir aqui digitar o seu texto vem aqui embaixo também digita a descrição da maneira que você achar melhor ó deixar assim posso pegar também e vir aqui em cima ó e fazer esse mesmo
esquema ó adicionar só um pouquinho de texto ó vamos colocar assim e Vamos diminuir aqui o tamanho para um 15 assim 700 espaçamento entre letras assim aí ó só para dar um toquezinho então no design tá vou vir aqui também e vou arrastar então um botão tá aqui o botão Ó daí o que que você vai colocar nesse botão enfim vai do seu critério tá se você quer colocar esse botão pro WhatsApp se você quer colocar esse botão para uma página de pagamento enfim vai de cada nicho tá aqui no caso como é Hamburgueria né
faria sentido colocar pro iFood ou talvez algum outro aplicativo aí de delivery tá ou até pro WhatsApp beleza mas cada nicho aí isso vai variar beleza vamos pegar aqui só vou dar um CTR C nesse texto vou vir aqui vou colar aqui você coloca então o link do botão né aqui o texto enfim entra em contato WhatsApp faça sua reserva aqui o link vou deixar em branco tá pessoal vou deixar só o jogo da velha mesmo aqui para ele ficar clicável mas aí você coloca o seu link Beleza Aqui tem a opção de ícone ó
então você pode estar escolhendo algum iconz aqui para aparecer junto com o botão nesse caso vou deixar assim mesmo aqui em estilo vou deixar essa tipografia aqui secundário peso assim e aqui eu vou deixar cor vermelho el quando usuário passa o mouse a cor muda para amarelo ó desse jeito assim e esse texto aqui ele fica assim aí da borda ó posso ir para cima ó deixar redondinho assim aqui em conteúdo tem algumas opções ó não gosto de mexer aqui sempre gosto de configurar por aqui ó preenchimento ó superior eu vou deixar uns 20 pixels
inferior uns 20 na direita uns 50 e na esquerda uns 50 ó fica assim então o botão Beleza vou clicar aqui no contêiner também vou vir avançado Vou colocar aqui 100 pixels superior e 100 pixels inferior ó tá ficando mais ou menos parecido né aliás vou colocar um 150 150 e 150 e aqui ó vamos arrastar uma imagem para cá e vamos colocar uma imagem de hambúrguer tá que é essa aqui ó que eu já separei tá então essa imagem aqui ela tá no tamanho 800 por 629 Beleza então caso você queira adicionar também uma
imagem Eu recomendo você seguir mais ou menos as dimensões aqui né que que eu tô colocando que nem o logotipo ó logotipo ã 252 por 245 tá não precisa ser algo exato tá mas algo nesse sentido tá vou arrastar essa imagem para cá então ó tá aqui vou inserir ó posso clicar nela aqui deixar ela no no tamanho máximo aqui né vou deixar ao centro assim ó tá aqui então a primeira parte aqui do nosso site tá nesse nesse caso aqui eu vou clicar no contêiner vou vir em divisor de forma inferior e aqui ó
tem algumas opções aí que você pode estar explorando ó nesse caso vou deixar esse aqui de ondas ó e a altura aqui vamos ver 50 pixels é vou deixar em 50 pixels aqui ou 100 não 50 assim 50 pixels como eu coloquei 50 pixels aqui eu vou vir aqui avançado e aqui eu vou colocar mais 50 pixels tá então 150 superior e 150 inferior mais 50 200 assim vamos voltar aqui inferior ó pode escolher a cor ó nesse caso vou deixar assim mesmo para ficar mais clean vamos ver como que tá ficando aqui no tablet
tá assim no tablet vamos ajustar isso aqui melhor porcentagem 100% vou clicar nesse outro contêiner porcentagem 100% clicar aqui ó vou colocar coluna invertida desse jeito assim e agora venho aqui na imagem ó posso estar reduzindo o tamanho da imagem esse texto aqui ó posso estar centralizando todos os elementos sim moderar aqui vamos colocar 100 superior e 150 inferior Vou colocar aqui um 30 e 1 30 não 20 1 20 assim ó então no tablet abriria assim o nosso site e aqui no celular Vamos só diminuir o tamanho desse texto que ele tá tamanho absurdo
né então aqui tamanho 36 acho legal esse outro aqui ó a gente pode diminuir um pouquinho também assim ó maioria dos celulares vai abrir assim tá que é 420 para mais então seria assim o celular uma visualização bem agradável né aqui no tablet e assim no desktop eu vou atualizar Vamos só ver aqui como que tá ficando ó tá ficando assim então tá aqui a nossa página inicial Tá posso vir aqui ó editar com elementor e vai abrir o elementor tá E daí a gente continua aqui então Ó Vem aqui no maizinho vou adicionar outro
contêiner aqui aí eu vou deixar ele na mesma cor aqui ó do da divisão né vou vir aqui vou colocar outro contêiner dentro desse vou colocar a direção linha horizontal assim e vou adicionar mais contêiners aqui ó e vou duplicar e vou duplicar e vou duplicar ó e daí fica assim tá nesse caso aqui ó que que eu fiz aqui então eu fiz quatro Box né Cada boxin aqui a gente tem uma imagem uma descrição e um botão né inclusive aqui no canal tenho vários recebo vários comentários né de pessoas dizendo como que faz essa
função né Você tem algum plugin para fazer essa função mas na verdade essa função é bem fácil de você fazer aqui ó no próprio elementor ó Então vou vir aqui ó vamos adicionar aqui a imagem primeiro ó já tenho aqui a imagem beleza aqui a descrição ó Posso copiar vir aqui colar ó vou deixar a descrição Menorzinha ó colar assim ó Posso duplicar aqui assim vamos colocar aqui um peso maior e um tamanho um pouquinho maior também e aqui a cor amarelo tá eu só vou dar uma margem assim ó pegar o botão aqui ó
copiar e aqui colar ó deixa eu atualizar ó nesse caso aqui eu posso pegar esse botão e colocar ele uma cor invertida aqui para ele diferenciar desse primeiro Ó daí eu passar o mouse ele fica assim e aqui ó Vamos colocar até um pouquinho menor assim V colocar aqui um 15 e um 15 aí aí eu posso clicar aqui nesse contêiner ó e colocar um preenchimento colocar aqui uns 40 desse jeito assim esse textinho aqui eu posso diminuir um pouquinho mais também assim posso vir ainda aqui nesse contêiner ó em estilo borda e arredondar essa
bord então vou deixar aqui Unos 10 pixels desse jeito assim agora eu posso vir aqui ó e duplicar ó exclu esse outro e duplicar excluí esse outro e duplicar ó nesse caso só vamos ajustar isso aqui ó vou deixar zero aqui zero e justificado V ver se eu consigo colar os estilos aqui consigo assim e assim ó vou vir aqui no contêiner principal vou dar aqui uns 100 pixels e un 100 pixels inferior tá você pode estar repetindo esse processo aqui você coloca sei lá os seus produtos aí o que fizer sentido para você beleza
ó vou pegar os outros aqui ó vou colocar esse aqui ó nesse caso aqui eu vou diminuir um Pou assim ó vamos pegar esse outro aqui ó esse aqui é tamanho 800 por 629 esse aqui tá 800 por 826 então você pode seguir mais ou menos essa mesma lógica beleza vamos ver esse outro aqui selecionar Vamos só diminuir um pouquinho para não ficar quebrado layout né E esse último aqui então aqui beleza Vamos colocar aqui em pixels aí ó seria mais ou menos isso tá aí você vem aqui você Edita o texto e tal e
profissionaliza também o botão aí como você você achar melhor beleza vamos ver aqui no responsivo ó isso aqui eu vou mudar eu vou colocar aqui 100% esse outro aqui 100% vou colocar todos 100% e vou mudar a direção ó 100% vou clicar aqui ó direção para baixo e a largura eu posso deixar assim ó vamos só diminuir essa primeira imagem aqui beleza e vamos só ajustar esse botão aqui ó vou deixar 15 50 não 40 15 40 ó vamos copiar os estilos aqui assim e no celular ó ele Já puxou aqui automaticamente só essa imagem
vou diminuir um pouquinho no celular Vamos ver ó no celular fica assim então uma visualização aí bem legal bem agradável perfeito posso estar clicando aqui em atualizar agora eu criei aqui uma contêiner aqui né que tem uma imagem e tem mais texto também em um botão né então aqui seria legal colocar um sobre empresa Talvez né vamos vir aqui no maisinha ó vamos adicionar vamos configurar a cor aqui preenchimento sem pixels superior e sem pixels inferior para manter padrões beleza eu posso copiar aqui ó esse textinho que tá pronto ó colar elhe aqui esse outro
também ó colar ó daí você vê que no elemento quando você faz as coisas já fica muito mais fácil para você est refazendo depois ó nesse caso aqui eu vou pegar esse texto ó copiar ó esse texto tá mais extenso né aqui ó agora vem aqui arrastou a imagem essa imagem aqui deixa eu ver eu não otimizei ela de propósito tá pessoal ó vou vir aqui nas propriedades por quê Porque eu baixei ela lá do free pick e ela tá num tamanho absurdo tá olha só ela tá no tamanho 3500 por 2800 Então esse tamanho
ele é absurdo tá Então como que você corrige isso tá você pode vir aqui no próprio fotopia ó vamos ver se eu consigo abrir tá aqui a imagem ó vou abrir ela vem aqui em imagem tamanho da imagem posso colocar isso aqui 800 pixels ó vou clicar fora aqui ó ó 80000 por 640 ó ó pode ver que ela tá menor só que se aumentar a qualidade dela tá ótima tá posso vir aqui em arquivo exportar como como ela não tem fundo transparente pode ser JPEG assim jpg aliás salvar e beleza ó já baixou aqui
no meu computador então você pode tá utilizando as imagens aí nesse mesmo tamanho tá ó tá aqui a imagem nesse caso aqui a imagem que eu coloquei lá eu coloquei um pouco diferente eu cortei ela ó vou dar um cortezinho nessa aqui também mais ou menos assim ó vamos baixar de novo aqui ó vamos pegar aqui aqui agora sim ó beleza Vamos colocar aqui no centro essa imagem ó posso clicar nela colocar um raio da borda ó para deixar ela redondinha nesse caso vai ficar em 10 mesmo vou vir aqui em avançado vou dar um
pouquinho de Margem aqui de uns 30 para ela não ficar tão perto aqui do texto beleza pessoal ó ficaria assim então uma imagem e um texto esse texto aqui aliás eu posso diminuir um pouquinho ele colocar um tamanho 48 assim para diferenciar do título aqui né que tá maior beleza vamos ver aqui no responsivo ó vou fazer o mesmo esquema que eu fiz com os outros contêiners no responsivo tá detalhe que aqui ó eu vou tirar esse 30 ó tirei o 30 agora vou vir aqui porcentagem 100% porcentagem 100% vou clicar aqui no container ó
e vou deixar assim largura vou deixar assim beleza aí ó já tá otimizado para o tablet pro celular também já puxou automaticamente aqui não vou nem mexer Vou atualizar ó agora eu coloquei aqui uma um contêiner aqui com depoimentos tá vamos fazer isso então na prática aqui deixa eu ver vou pegar esse mesmo aqui ó e vou duplicar ó dupliquei eu vou excluir aqui esse aqui eu vou colocar 100% assim ó vou excluir aqui essas informações colocar um contêiner aqui dentro ó direção linha horizontal eu vou adicionar outro aqui desse jeito assim vamos centralizar tudo
aqui bonitinho beleza nesse caso aqui ó vou deixar só o testinho assim da aqui você coloca clientes avaliações o que dizem os clientes enfim que fizer sentido para você tá E aqui ó eu tenho uma imagem de fundo também ó que é essa imagem aqui ó que ela tá num tamanho absurdo ó 5760 por 3840 e agora vou mostrar para você qual que é o tamanho correto de você colocar as imagens aí de fundo tá igual essa aí que eu vou colocar ó primeiro eu vou dar um uma cortada nela aqui aí vou deixar mais
ou menos assim agora vou vir aqui em imagem tamanho da imagem Olha só largura você sempre vai colocar 1920 vou clicar fora aqui aceitar ó Então esse aqui seria o tamanho certo tá 1920 pixels Beleza vou vir aqui aqui exportar como JPEG salvar beleza ó agora vou colocar l de fundo Então vou vir aqui no contêiner estilo aqui ó vamos selecionar a imagem vamos arrastar para cá beleza selecionar resolução da imagem completo posição centro anexo rolar e fixo vou deixar rolar repetir não repetir tamanho cobertura ó vou deixar assim sobrepos de fundo vou colocar um
pouquinho aqui de sobreposição vou deixar assim ó para ela ficar bem aí de background mesmo beleza agora vou adicionar os Box aqui então Ó com depoimentos nesse caso aqui então eu fiz alguns box com depoimentos fictícios mesmo tá mas aí você pode estar colocando aí do seu jeito se você quiser colocar vídeos vem aqui ó arrasta vídeo para cá se você quer colocar imagens prints do WhatsApp enfim o que faz sentido para você beleza eu acho legal os depoimentos ali daquele jeito tá posso estar clicando aqui então Ó colocando a cor branca vamos arrastar uma
imagenzinha para cá ó e aqui na imagem Então vou colocar a foto do usuário né o foto da pessoa aí vai dar o depoimento Enfim no seu site Ó essas imagens aqui estão no tamanho 150 pixels por 150 pixels beleza nesse caso aqui eu vou reduzir ela ainda um pouco pouco mais aqui ó deixar 80 pixels e aqui em R da borda ó vou deixar Redonda desse jeito assim vou colocar aqui Deixa eu pesquisar por star aqui ó classificação ó ó as estrelinhas então você pode configurar também as estrelinhas aí da que você achar legal
aqui o depoimento então colocar aqui para baixo das Estrelas assim deixar nessa cor deixar assim e vou colocar um Itálico assim ó deixar Centralizado vou pegar aqui esse testinho que tá pronto ó vou vir aqui vou colar esse testinho no caso vai ser o nome da pessoa tá vamos só dar a margem negativa aqui aí preenchimento 40 e aqui em estilo ó borda aí da borda 10 aí daqu que eu faço agora ó eu pego isso aqui e eu duplico ó e eu venho aqui e eu duplico e eu só mudo Então as imagens né
e o nome da pessoa ali e tal depoimento aqui e aqui beleza ó daí aqui eu acho Enfim acho legal e não colocar um depoimento tão grande né então Acho interessante você colocar todos meio que parecidos né que nem aqui eu coloquei quatro linhas em cada um eu acho legal para não ficar algo muito grande Tá deixa eu só configurar essa posição aqui superior ao centro assim sobreposição Vamos diminuir um pouquinho aí ó ficaria assim então as avaliações aí dos clientes ó aqui mesmo esquema vamos ajustar aqui no tablet 100% 100% e 100% vamos clicar
nesse aqui e colocar assim ó beleza já está configurado aqui no celular também agora eu coloquei aqui um contêiner de perguntas frequentes tá Posso duplicar esse aqui ó vamos vir aqui vamos excluir Vamos tirar essa sobreposição de fundo aqui assim ó deixar na cor vermelha posso vir aqui ó pesquisar por sanfona ou alternância tá Vou colocar sfone aqui e daqu você consegue então colocar aí possíveis perguntas e respostas e tal vamos pegar aqui um pouquinho de texto dar um control V aqui ó que seria uma pergunta tá que eu não tô com o meu mouse
ó e aqui embaixo então a resposta eí você faz enfim você faz ess gestão aí né você digita aí as perguntas e as respostas ó que você pode estar duplicando ó duplicando aqui você escolhe o ícone ó deixa eu ver eu coloquei esse izinho aqui ó então é esse aqui e quando tá aberto é esse aqui ó vir aqui em estilo título Vamos colocar aqui nossa tipografia secundária sim PES 700 beleza plano de fundo aqui ó colocar um vermelho a cor do texto um branco a cor ativa um amarelo largura da borda aqui ó deixa
eu colocar transparente isso assim o ícone vou deixar aqui uma cor amarelo mesmo assim e o conteúdo tipografia secundária aqui cor preta assim nesse caso aqui ó vou vir aqui no contêiner layout e aqui eu vou colocar uns 800 pixels para ele não ficar tão largão tá ó Então acho que assim ele fica muito largo Então acho bonito com uns 800 pixels e aqui no tablet posso deixar assim mais ou menos e no celular aqui ele já tá otimizado beleza vamos atualizar e agora a última o último contêiner aqui do nosso site deixa eu achar
aqui ó vou pegar esse aqui vou copiar vou vir aqui e vou colar vou excluir esses depoimentos aqui e eu vou mudar aquela foto essa aqui ó de fundo aqui eu vou colocar essa aqui ó essa aqui já tá otimizada já tinha configurada ela antes ó vou selecionar repetir não repetir [Música] tamanho automático assim aliás personalizado vou deixar assim tá Deixa só colocar mais texto aqui assim aqui Mais Um textinho então aqui seria uma chamada para ação aí final enfim convidando o usuário para entrar em contato ó ó vou copiar aqui aqui o botão vou
vir aqui nesse contêiner sobreposição ó vou deixar bem assim mesmo aí Vou colocar aqui também um 800 de eita que que eu fiz aqui 800 de largura tá aí voltei ó assim só centralizar aqui aqui ó então aqui seria uma chamada pração final aí mudando usuário para entrar em contato para clicar Enfim no tablet tá assim e no celular está assim Vou atualizar e basicamente está pronto então o nosso site vamos vir aqui na página inicial Ah não falta um detalhe falta um detalhe que eu já vou fazer junto com você mas ó a parte
visual tá pronta ó tá aqui beleza agora o que falta é o usuário clicar aqui ele ser direcionado ó Tô clicando aqui não acontece nada ó então aqui é o cardápio sobre avaliações tá como que a gente faz isso olha só vou vir aqui no meu painel aparência menus Ó você lembra então que lá eu coloquei ó jogo da velha cardápio jogo da velha sobre jogo da velha avaliações tá eu tenho colocar exatamente igual agora aqui na minha página tá oo decorrer da página Então como que a gente vai fazer isso olha só aqui eu
vou pesquisar por Âncora do menu desse jeito assim ó vou pegar eu vou arrastar aqui para cima do car da onde eu quero que seja o cardápio tá então aqui ó eu vim aqui e vou digitar cardapio exatamente eu coloquei lá no menu tá esse outro aqui ó esse aqui seria o sobre ó mais uma vez Âncora do menu ó tá aqui em cima sobre agora as avaliações ó mais uma vez Ancora do menu vou arrastar aqui para cima jogo da velha avaliações sem acento sem nada Vou atualizar agora sim olha só vou clicar no
cardápio dire para o cardápio sobre direcionou e avaliações direcionou Beleza se você quer saber como colocar um botãozinho também do WhatsApp flutuante aqui do lado eu vou est deixando o vídeo aí na sequência para você ver beleza Muito obrigado a todo mundo que viu esse tutorial até o final se você viu até aqui não esquece de comentar porque isso é muito importante para mim beleza valeu e até a próxima i
Related Videos
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
103,783 views
Como Criar uma PÁGINA DE VENDAS de Alta Conversão | CURSO GRÁTIS
1:28:07
Como Criar uma PÁGINA DE VENDAS de Alta Co...
Aprendendo Sites
19,207 views
Como Criar LANDING PAGE p/ Gestor de Tráfego do Zero! Passo a Passo WordPress
1:20:38
Como Criar LANDING PAGE p/ Gestor de Tráfe...
Aprendendo Sites
6,340 views
Como Criar um SITE INSTITUCIONAL com WordPress + Elementor Grátis [Passo a Passo]
2:08:01
Como Criar um SITE INSTITUCIONAL com WordP...
Aprendendo Sites
21,653 views
Como Criar BLOG PARA GOOGLE ADSENSE Com Wordpress e Elementor (TUTORIAL COMPLETO)
4:26:51
Como Criar BLOG PARA GOOGLE ADSENSE Com Wo...
Sala Ninja
7,160 views
Como Criar uma LANDING PAGE Incrível em 1 hora [Atualizado 2024]
1:04:47
Como Criar uma LANDING PAGE Incrível em 1 ...
Aprendendo Sites
51,867 views
Como Criar uma LOJA VIRTUAL Profissional e Completa (WordPress)
1:23:41
Como Criar uma LOJA VIRTUAL Profissional e...
Aprendendo Sites
13,808 views
Como Criar Site Institucional para Imobiliaria com WordPress e Elementor Pro.
3:16:06
Como Criar Site Institucional para Imobili...
Fred Bueno
29,312 views
Como criar site Institucional com várias páginas no Wordpress e Elementor (Passo a Passo Completo)
2:35:50
Como criar site Institucional com várias p...
a Escola de Sites
23,209 views
Como Criar Um SITE PARA IMOBILIÁRIA no WordPress, Elementor, JetEngine/Crocoblock [Passo a Passo]
3:34:13
Como Criar Um SITE PARA IMOBILIÁRIA no Wor...
Descomplicando Sites
87,784 views
The Framer Basics No One Explains (Until Now)
16:47
The Framer Basics No One Explains (Until Now)
Framer University
45,612 views
Como Criar Uma Página de Vendas Incrível p/ Infoproduto no WordPress
1:17:59
Como Criar Uma Página de Vendas Incrível p...
Aprendendo Sites
29,833 views
Como criar uma Landing Page para Gestores de Tráfego [Passo a Passo completo]
2:26:22
Como criar uma Landing Page para Gestores ...
a Escola de Sites
37,423 views
Como Vender Sites e Encontrar Clientes TODOS OS DIAS | Estratégias que Funcionam
23:06
Como Vender Sites e Encontrar Clientes TOD...
Aprendendo Sites
9,986 views
SureCart 3: Welcome To The New Era Of WordPress Ecommerce
35:30
SureCart 3: Welcome To The New Era Of Word...
SureCart
5,880 views
Elementor Wordpress Tutorial for Beginners - 2024 Edition!
1:37:26
Elementor Wordpress Tutorial for Beginners...
Wes McDowell
320,228 views
Como criar um Site Incrível estilo ONE PAGE (com WordPress e Elementor)
1:03:58
Como criar um Site Incrível estilo ONE PAG...
Aprendendo Sites
22,404 views
Como Criar um BOTÃO DO WHATSAPP no Elementor [Sem Plugins]
11:19
Como Criar um BOTÃO DO WHATSAPP no Element...
Aprendendo Sites
7,960 views
O que é WordPress e Como Funciona? (Guia para Iniciantes)
13:56
O que é WordPress e Como Funciona? (Guia p...
Aprendendo Sites
48,724 views
Copyright © 2024. Made with ♥ in London by YTScribe.com