fala pessoal Rodrigo aqui do canal aprendendo sites e nessa aula completa eu vou te ensinar todo o passo a passo de como criar uma loja virtual da forma mais profissional possível sem limitações e do seu jeito para isso nós vamos utilizar o WordPress o ecommerce e o elementor e mesmo que você não tenha muito conhecimento no assunto pode ficar tranquilo pois eu vou ensinar tudo do absoluto zero esse vídeo vai ser praticamente um curso gratuito e antes de mais nada eu só peço que você não esqueça de deixar o like nesse vídeo e também de
se inscrever no canal pois assim você retribui esse conteúdo gratuito aqui no YouTube beleza sem Muita enrolação vamos lá então beleza pessoal vamos lá então estou aqui na tela do meu computador e antes de mais nada eu separei algumas observações importantes aqui pra nossa aula e eu peço que você não pule essa parte porque é muito importante para você entender o que exatamente eu vou te ensinar como que vai funcionar aqui toda a nossa aula enfim todo o nosso passo a passo de como criar uma loja virtual Beleza então minha primeira observação aqui é que
você não precisa ter experiência para seguir este tutorial E se for necessário Veja a aula mais de uma vez Ok então assim se você for Total iniciante se você nunca criou uma loja virtual antes se você nunca criou um site antes você não tem conhecimento ali sobre as ferramentas sobre como que funciona o processo pode ficar bem tranquilo porque vai ser uma aula bem passo a passo bem detalhada eu garanto que vai ser de fácil entendimento para qualquer é pessoa beleza inclusive uma coisa que eu recomendo você fazer é sempre ver a aula mais de
uma vez né Então veja a aula agora do início ao fim né eu sei que vai dar uma aula aí um pouco comprida né com algumas horas de duração mas enfim é conteúdo de curso pago né o que eu tô ensinando aqui Então veja a aula aí do início ao fim para você se familiarizar com as ferramentas e para você entender o que que eu vou fazer em cada etapa beleza E daí depois sim Veja a aula pela segunda vez e daí vai dando pausa ali no vídeo e vai fazendo aí no seu computador Beleza
segunda observação aqui é que todos os tópicos da aula estão detalhados na descrição do vídeo Beleza então aqui é só você acessar a descrição do vídeo vai ter todos os tópicos vai ter ali introdução aí eu vou instalar WordPress vou fazer configurações vou instalar ucommerce lá no commerce a gente vai cadastrar métodos de entrega pra nossa loja virtual a gente vai cadastrar métodos de pagamento a gente vai cadastrar os produtos a gente vai personalizar página por página vai ser uma loja virtual totalmente profissional sem Lim ações sem limitações de produtos Então o que eu vou
te ensinar nessa aula realmente é enfim aí o mais profissional possível aí de uma loja virtual que você vai conseguir fazer beleza terceiro aqui né todo o conteúdo da nossa loja virtual Ele É fictício de modo que ele pode ser adaptado de acordo com a sua ideia tá então o que que acontece aqui no meu caso eu vou criar uma loja virtual aqui para o nicho aí de eletrônicos enfim de games de computadores porém é só um nicho né que eu escolhi para mim criar a loja virtual se você quer criar uma loja virtual por
por exemplo aí sei lá de roupas uma loja virtual de móveis uma loja virtual de calçados de enfim do que você quiser você vai conseguir criar beleza A lógica é a mesma tá então você pode adaptar Aqui de acordo com a tua ideia tá inclusive aqui no meu computador eu já separei todas as imagens que eu vou utilizar na loja virtual Então são todas imagens aqui de produtos aí que eu vou usar só como exemplo mesmo né separei o logotipo aqui separei os banners Enfim no decorrer da aula aí eu vou te dar toda a
instrução aí do tamanho certo das imagens dos banners do logotipo enfim para você fazer algo do zero mesmo beleza também os textos eu gerei aqui com inteligência artificial tá então eu vim aqui no chat GPT caso você não conheça aí é só acessar aí chat gpt.com né E você vai cair nesse chatz inho aqui enfim você faz login aí e aqui você pede então pra Inteligência Artificial gerar os textos para você né então eu coloquei aqui ó me Gere a headline a descrição para o início de um site de loja de games e computadores tá
aqui então a inteligência artificial me gerou ó equipamentos de ponta para gamers apaixonados descubra uma seleção incrível enfim gerou toda a descrição pedi para gerar a descrição aqui de um produto tá então os textos que eu vou utilizar eles são todos textos também aí gerados com inteligência artificial aí é só como exemplo tá então tanto aí as imagens da sua loja virtual Quanto os seus textos quanto as suas cores aí que você vai utilizar fica tudo ao seu critério Beleza você assistindo essa aula aqui do início ao fim você com certeza vai aprender a criar
qualquer loja virtual Ok quarta observação aqui siga o passo a passo exatamente como eu mostro e pessoal eu falo isso porque tem muita gente aqui no canal que segue o passo a passo diferente tá então às vezes a pessoa ela começa a ver o vídeo e ela pula lá paraa metade do vídeo e daí lá ela vê que deu alguma coisa errada tá Então siga exatamente como eu mostro desde o início todo o passo a passo certinho que não tem erro beleza e a minha quinta e última observação aqui é que o único custo que
teremos será de hospedagem e também tambm de elementor pro Tá eu já adianto que esse esses custos aqui que a gente vai ter eles são custos básicos e custos baixíssimos aí enfim acessíveis para qualquer pessoa que quer ter uma loja virtual beleza eu coloquei um parêntese aqui também ó domínio WordPress e ecommerce serão gratuitos tá E caso você seja Total iniciante você tá perdido nesses termos eu pedi aqui pro chat GPT fazer um resuminho tá Então olha só domínio o domínio ele vai ser o endereço do seu site na internet exemplo www site.com então eu
vou te ensinar como ter um domínio aí gratuito e personalizado com o nome da sua loja enfim o nome da da sua empresa o nome que você quiser beleza hospedagem hospedagem é o espaço e um servidor que armazena os arquivos do seu site tornando acessível online então a hospedagem é o local na internet aonde a sua loja virtual ou o seu site ou o seu blog ou a sua Landing page ou a sua página enfim qualquer projeto sempre vai precisar de uma hospedagem para ficar online né paraas pessoas conseguirem acessar Então vou te ensinar como
fazer a configuração de uma hospedagem aí super rápida e ao mesmo tempo barata beleza WordPress então WordPress é uma plataforma de criação de sites usada para gerenciar conteúdo e personalizar o design então basicamente a gente vai ter um domínio esse domínio ele vai est dentro de uma hospedagem aqui ó ele vai est conectado com a hospedagem na hospedagem a gente vai instalar WordPress que é uma plataforma de criação de sites e um detalhe que o WordPress ele é mais voltado assim para site institucional para blog pô aí que entra sacada a gente vai instalar o
ecommerce dentro do WordPress e ucommerce ele é um plugin dentro do WordPress que vai transformar WordPress em uma loja virtual tá então ele vai dar toda a estrutura pronta já pra gente criar a nossa loja virtual a gente vai conseguir cadastrar como eu falei ali produtos ilimitados produtos simples produtos variáveis a gente vai conseguir Enfim fazer uma série de configurações dentro do comerce tá é uma loja virtual completa beleza e entra aqui por último o elementor que também é o outro plugin que a gente vai instalar e o elemento basicamente a gente vai utilizar aí
para personalizar as páginas tá então a página inicial aí da nossa loja virtual a gente vai personalizar com o elementor a página de produtos enfim a página aí de de checkout todas as páginas da nossa loja virtual vão ser personalizadas com o elementor e tudo isso sem utilizar nada de programação sem utilizar nenhuma linha de código tá por isso que eu falei que esse tutorial ele vai ser de fácil entendimento para todo mundo beleza também se você ficar alguma dúvida aqui quanto termos e tal você pode estar deixando aí enfim nos comentários aí comentando que
eu sempre tento responder todo mundo beleza basicamente essas seriam nossas observações e agora então a gente vai pro primeiro passo aqui importante da nossa aula que é domínio e hospedagem tá então na sequência eu vou te ensinar como configurar domínio e hospedagem e daí a gente vai seguir com o passo a passo né como eu falei os tópicos da aula estão detalhados na descrição do vídeo Ok vamos lá então bom nesse momento então eu peço que você Clique no primeiro link da descrição desse vídeo e você vai cair nesse site aqui esse aqui ele é
o site da hostgator E como eu falei a gente vai precisar ali de domínio hospedagem do WordPress infim de todas as ferramentas e através da hostgator aqui você vai conseguir ter tudo isso aí com poucos cliques de uma forma bem simples Beleza então você pode Tá acessando o link aqui vindo mais para baixo Lembrando que através desse meu link também você vai garantir o máximo de desconto possível tá E também se você adquire hospedagem através do meu link você ajuda o canal a crescer cada vez mais beleza então aqui eles têm vários planos de hospedagem
aqui né tem o plano start plano P plano M plano Turbo se você acessar esse site aqui no futuro né pode ser que esteja um pouco diferente mas no geral é isso tá eles vão ter aqui os planos de hospedagem beleza Qual que é a diferença entre esses planos o plano start o plano p é para você que quer hospedar apenas um domínio ou seja www.sal lojavirtual.com tá você tem só um domínio aí o plano m e o plano Turbo Eles já são recomendados para quem quer hospedar dá mais de um domínio tá inclusive se
você tem projeto de criar mais sites de Enfim fazer mais Lojas Virtuais no futuro eu já recomendo que você contrata aqui o plano m é o plano Turbo porque daí você consegue hospedar vários domínios tá você consegue ter lá sua lojavirtual.com seu site.com seu blog.com sua pagina.com beleza e se aprofundando um pouco mais aqui o plano Turbo ele tem mais performance tá então se você vai fazer uma loja virtual por exemplo e você vai anunciar bastante essa loja virtual enfim a sua lja virtual vai receber bastante acessos Eu recomendo também você contratar o plano Turbo
porque assim você vai ter mais performance mais desempenho Beleza ainda aqui no site da hostgator só vou vir mais para baixo aqui ó você pode estar lendo aqui todas as informações enfim para você entender melhor como que funciona né eles TM ã e-mail profissional gratuito também né então muito importante você ter um e-mail personalizado né você consegue criar facilmente ali no no portal do cliente tá tem mais algumas informações aqui umas explicações depoimentos tem um comparativo aqui porque que vale a pena contratar a hostgator vindo mais embaixo aqui uma coisa muito legal também da hostgator
é a questão do suporte então se você tiver qualquer probleminha você entra ali no chat online do portal do cliente e enfim tem pessoas reais ali trabalhando 24 horas por dia para resolver os seus problemas enfim tirar as suas dúvidas Então isso é muito bom Beleza eu vou vir até em cima aqui nesse exemplo eu vou contratar o plano m tá que é o recomendado aqui mas você pode contratar qualquer um aqui lembrando que aqui no plano start né você vai ganhar um domínio só que ele é a extensão ponto online tá então seria assim
sua loj virtual pon online tá já que nos outros seria o domínio pcom né que enfim o domino.com El é o mais utilizado no mundo tá que é o domínio internacional aí mais usado então eu recomendaria pelo menos a partir aqui do plano P em diante tá mas se você quiser o start também vai suprir a sua necessidade tranquilamente Ok vou clicar aqui em começar agora então no plano M próxima etapa aqui você vai escolher o ciclo de pagamento aqui é bem ao explicativo 1 mês 6 meses 1 ano e 3 anos então se você
escolher por exemplo 3 anos você só vai pagar hospedagem agora e você só vai voltar a pagar daqui a 3 anos ok detalhe que aqui ó um ano você vai ganhar também o domínio grátis e 3 anos também então recomendo que você marque 1 ano ou 3 anos tá se meses aqui um mês você não tem o domínio grátis Então você teria que contratar o domínio separado e acaba que não compensa tanto Ok vou deixar selecionado aqui por exemplo um ano e você seleciona enfim o que fizer sentido para você beleza vou clicar aqui em
continuar para o carrinho essa próxima etapa aqui é bem importante tá você vai vir aqui e você vai registrar o seu novo domínio Então vou vir aqui e eu vou colocar por exemplo loja do Rodrigo tá vamos supor que eu queira registrar esse domínio aqui www.lj do Rodrigo aqui eu vou deixar a extensão pcom Mas eu posso colocar pcom.br também vou deixar pon com aqui vou clicar na lupinha nesse momento o sistema vai bu buscar se esse domínio aqui ele tá disponível para você registrar ó Então esse domínio aqui ele estaria disponível ó vou clicar
aqui em adicionar e você repete esse mesmo processo você vai colocar o seu domínio que você quer ganhar grátis né que ele vai ser gratuito e você clica ali para ver se ele tá disponível e daí você adiciona esse domínio beleza Lembrando que não pode existir dois domínios iguais né então por exemplo se já existisse aqui uma loja do rodrigo.com Eu não conseguiria registrar Ok tem a proteção de domínio aqui para enfim ninguém ter acesso aos seus dados tá se você quiser você deixa ativado sen não você deixa desativado fica ao seu critério Eu recomendo
deixar ativado ok aqui vai ter as informações do seu plano aqui o e-mail vindo para baixo você tem direito a contratar mais alguns serviços aqui e daí você enfim você lê aí você vê se faz sentido para você pro seu negócio pro seu bolso beleza mas basicamente seria isso aqui a gente tem a hospedagem e a gente tem o nosso domínio vou clicar aqui em continuar para identificação nessa próxima etapa então não tem muito mistério tá você vai criar uma conta aqui na hostgator Então você vai colocar um e-mail uma senha aqui você pode estar
lendo os termos de renovação termos de serviço política de cancelamento né E criando a conta tá também Eles vão pedir aí os seus dados né como CPF seu endereço enfim isso é padrão para qualquer serviço né E daí você vai fazer o pagamento que é aqui nessa etapa três né então ali você pode pagar via cartão boleto PayPal enfim você escolhe ali qual o método de pagamento você quer fazer né Eu recomendo colocar se tiver disponível o pix ou cartão de crédito porque assim vai liberar na hora tá se você paga via boleto aí geralmente
pode demorar de Dois a três dias aí para liberar o acesso e aqui na etapa quatro Então vai ser a confirmação daí no e-mail aqui que você cadastrar aí na sua caixa de entrada você vai estar recebendo várias mensagens vários e-mails dizendo que deu certo dando as boas-vindas dando enfim todas as informações de acesso a hospedagem beleza feito isso você pode vir aqui no site principal da hostgator ó hostgator.com PBR você pode ver que aqui o desconto ele tá menor do que tava lá através do meu link né então como eu falei independente da época
através do meu link você sempre vai ter o máximo de desconto possível você vem aqui ó no portal hostgator aqui no portal do cliente aí você vai fazer login aqui com seu usuário e senha vai clicar em não sou um robô e vai clicar em entrar e daí você vai cair aqui no portal do cliente nesse meu caso eu vou criar aqui a nossa loja virtual nesse domínio aqui ó canala prendendo sites.com beleza esse aqui é um domínio que eu uso para sempre estar criando sites aqui das aulas do canal Ok então através aqui do
portal do cliente você consegue estar explorando aqui ó e-mails domínios hospedagens enfim tem várias informações aqui você consegue est se familiarizando mais aqui Aqui tem essa guia de faturas e assinaturas ã suporte tem o chatz inho aqui né então aqui não tem muito mistério é uma interface bem fácil aqui ã de você mexer né e um detalhe bem importante é que recentemente a rost gator lançou uma novidade que é justamente essa aqui ó desde seu site mais rápido e seguro com a CDN da Cloud flare né né como que funciona então aqui dentro da hostgator
você consegue ativar a CDN no seu domínio com apenas um clique tá e o que que seria essa CDN seria um um serviço aí para deixar o teu site muito mais rápido tá então é um grande diferencial aí que a hostgator lançou recentemente inclusive aqui no canal tem um vídeo específico sobre isso eu vou estar deixando no card do vídeo nesse momento você pode estar conferindo depois ok mas basicamente como que funciona você vai vir aqui em desempenho de sites e aqui vai ter essa opçãoincorreta V CDN você vai marcar como ativo e o teu
domínio aí enfim o teu site ele já vai ficar muito mais rápido e também seguro Ok nesse caso eu vou deixar para fazer isso aqui depois aí enfim que tiver com a minha loja virtual pronta mas fica o seu critério também se você quiser fazer antes eu vou deixar para fazer depois porque eu acho que fica mais fácil né Sempre criar o site primeiro e deixar para otimizar depois ok mas fica essa recomendação Então não esquece aí de ativar a CDN Ok voltando aqui ó para sites ó fechar aqui tá aqui meu domínio principal né
então você vai vir aqui em cpanel tá procura aqui pela opção de cpanel e clica aqui no cpanel e você vai estar caindo aqui no cpanel o que que seria o cpanel o cpanel é um software de gestão de hospedagem tá tem várias informações aqui enfim não precisa você ficar assustado com tudo isso tá você vai vir até o final aqui e você vai encontrar por essa opção aqui ó WordPress aqui tem várias ferramentas né a gente vai utilizar WordPress que é enfim a plataforma mais usada do mundo tá vou clicar aqui em instale agora
e beleza nesse momento a gente já tem um domínio a gente já tem uma hospedagem e a gente vai instalar WordPress dentro dessa hospedagem né e depois que a gente instalar WordPress a gente vai seguir aqui com o passo a passo lá dentro do WordPress Beleza então aqui ó primeira configuração importante aqui que a gente vai fazer é sempre deixar selecionado o nosso domínio no meu caso aqui canal aprendendos sites.com Se eu tivesse mais domínios aqui na minha hospedagem né que no caso eu tô usando o plano M eu poderia ter vários domínios aqui iria
aparecer todos os domínios Beleza o resto aqui aqui ó você pode deixar tudo padrão tá https diretório vazio e aqui a última versão do WordPress então WordPress aí de tempo em tempo tá se atualizando né Você sempre vai deixar a última versão aqui ok detalhe bem importante que se você acabou de registrar o domínio há poucos minutos atrás e você vai fazer esse processo aqui ó vai dar uma mensagenzinha dizendo que não foi encontrado Um certificado SSL isso é normal pessoal isso acontece porque quando você registra um domínio geralmente ele demora algumas horas para propagar
na internet ou seja para ficar online tá então aqui você pode deixar selecionado https e se porventura aparecer qualquer probleminha aí qualquer mensagem pode ignorar essa mensagem e continuar aqui com o passo a passo igual eu tô fazendo tá nome do site Vamos colocar aqui um nome então loja do Rodrigo só para ilustrar mesmo tá aqui a descrição do site você vai colocar uma rápida descrição colocar aqui só como exemplo mesmo produtos originais enfim coloque o que faz sentido para você tá mas é um breve nome e uma breve descrição aqui essa parte de conta
do administrador é muito importante tá o que que acontece aqui então você vai definir um usuário para você acessar o WordPress no caso aqui eu vou colocar o meu nome ó Rodrigo aqui a senha você vai definir uma senha eu recomendo que aqui você coloque alguma senha sua aí que você utilize no seu dia a dia enfim alguma senha que você vai lembrar né Para não acontecer de você esquecer aqui dessa senha que eles geram automaticamente tá nesse caso que eu vou esconder essa senha e vou gerar aqui uma nova senha beleza Tá gerado aqui
uma nova senha não vou salvar porque é só paraa aula né então não vou precisar usar depois e aqui em e-mail do administrador já vai vir por padrão aqui ó admin @ seud domínio aqui eu recomendo que você substitua também por um e-mail talvez do Gmail do tilu enfim um e-mail que você tenha fácil acesso Porque caso você vira esquecer da senha você consegue recuperar facilmente a senha através desse e-mail beleza e também através desse e-mail ali depois na nossa loja virtual que você vai estar recebendo ali os pedidos os e-mails Enfim tudo que você
precisa paraa sua loja virtual Ok vindo mais para baixo aqui vou escolher o idioma aqui ele já vem por padrão português e Portugal vou colocar português brasileiro mas enfim se você quiser deixar inglês ou outro idioma aí você pode deixar essas opções aqui ó de plugins eu vou deixar todas elas desativadas tá também recomendo que você faça isso porque eu gosto de ativar lá no painel do WordPress depois vou vir mais embaixo e beleza vamos instalar o WordPress no nosso domínio vou clicar aqui em instalar o processo de instalação aqui pessoal é bem rapidinho tá
é alguns segundos Então vamos aguardar e beleza ferramenta instalada com sucesso daí nesse momento você vai pegar esse segundo link Aqui ó pode ver então que no meu caso aqui só aumentar um pouquinho é o https né que vai ser padrão aqui né Lembrando que para acessar o site não vai ser preciso digitar ali https tá isso aqui é só o que vai aparecer no navegador né no caso para acessar o meu site que seria só canal aprendend site.com beleza só isso então vai ter o seu domínio e esse sufixo aqui ó bar WP tracinho
admin tá e muita atenção a esse link Então você pega esse segundo link aqui e você adiciona os favoritos ou você salva em algum lugar porque sempre vai ser desse link que você vai acessar o WordPress Olha só vou pegar isso aqui eu vou copiar eu vou abrir aqui numa guia anônima eu vou colar só para mostrar para você como que apareceria tá ó aqui apareceu um painelzinho de login tá Então nesse painel aqui seria o login do WordPress então aqui eu colocaria meu nome de usuário né que é Rodrigo a minha senha que eu
gerei lá e eu clicaria em acessar nesse caso aqui como a gente já está aqui no no cpen aqui aberto né se você clicar aqui ele vai direcionar para o painel do WordPress ó então vou clicar aqui e aqui beleza já abriu o painel do WordPress Lembrando que nesse momento aqui em alguns casos acontece da pessoa clicar aqui e dá um erro tá Dá uma mensagem de erro isso é normal porque como eu falei o domínio ele ainda pode estar propagando tá então se der uma mensagenzinha de erro Eu recomendo você aguardar aí um tempo
né e depois tentar novamente que com certeza vai dar certo tá pessoal não tem muito mistério Ok deixa eu só aumentar esse zoom aqui assim que daí fica melhor pra gente trabalhar beleza aqui no painel do WordPress então eu vou fazer algumas configurações iniciais aqui tá primeira coisa vou vir aqui em plugins plugins instalados eu vou excluir todos esses plugins aqui vou desativar esse plugin aqui beleza Tá desativando vou selecionar todos aqui ações em massa excluir aplicar ok e por que que eu tô fazendo isso porque eu quero te ensinar do zero tá ó vou
atualizar aqui ó não ten nenhum plugin posso vir aqui também posts todos os posts tem um postzinho padrão aqui que eu vou excluir também aqui em páginas todas as páginas Olha já vem com algumas páginas aqui eu vou excluir isso aqui também Enfim vou limpar aqui para ficar tudo zeradinho pra gente fazer realmente do zero tá aqui vou vir em configurações links permanentes aqui vou colocar nome do post e eu vou salvar as alterações Ok vamos voltar aqui pro painel Então tá aqui o nosso painel do WordPress e antes que eu me esqueça também você
vai vir aqui em configurações geral você vai encontrar ess essa opção aqui embaixo ó De Cash level você vai deixar isso aqui desativado beleza porque isso aqui vai permitir aí que a gente faça as alterações do nosso site e elas apareçam né então se às vezes tá ativado Aqui Acontece de você fazer alteração aí na sua loja virtual no seu site e você atualizar a página lá e ainda não aparecer tá porque o cche ele é feito para enfim deixar aí o teu site mais rápido tá então essa opção de Cash aqui eu recomendo você
desativar ela né e depois quando a sua loja virtual estiver pronta aí você vem aqui você ativa essa opção aqui tá então vou deixar off e vou salvar as alterações Ok vou voltar aqui no início então né só para você entender então vou vir aqui em visitar site ó e nesse momento o nosso site ele tá desse jeito assim tá tem alguns textos fictícios algumas imagens fictícias isso aqui se dá ao tema do site tá então vou vir aqui no painel do WordPress aparência temas tá WordPress por padrão ele já vem com alguns temas aqui
pré-instalados ó vou vir nesse outro aqui por exemplo vou ativar visitar site ó pode ver que mudou a aparência tá nesse caso aqui vamos vir de novo vou vir aqui em Adicionar novo e eu vou instalar esse tema aqui Hello elementor tá porque como a gente vai construir o nosso enfim a nossa loja virtual com elementor a gente também vai utilizar o tema feito pelo elementor tá então se não aparecer aqui você vem aqui e pesquisa aqui pelo nome do tema vou clicar em ativar ó o tema ele está ativo vou clicar aqui em visitar
site ó nesse momento o nosso site enfim a nossa loja virtual tá assim totalmente em branco beleza voltando aqui esses outros temas você pode estar excluindo todos eles porque a gente não vai precisar ok aqui vou excluir vou dar um OK beleza a gente tem o tema Hello elementor quando você instalar aqui o tema do elementor vai aparecer esse botãozinho aqui para você instalar o elementor tá então você clica aqui nesse botãozinho para você fazer a instalação do elementor caso não aparecer esse botãozinho aqui você vem em plugins adicionar plugin e aqui pesquisa por elementor
desse jeito assim ó daí você pode estar instalando o elementor por aqui ou por aqui beleza vou instalar por aqui ó caso não apareça né a instalação aqui é bem rapidinha vou clicar em ativar Beleza se abrir alguma janelinha aqui você pode estar clicando no X para fechar beleza porque geralmente quando você instala o elementor ele vai abrir alguma janelinha ali para você criar uma conta e tal mas não precisa fazer nada beleza só seguir o passo a passo aqui igual eu tô mostrando OK agora então vamos ativar aqui o elementor pro né só para
você entender melhor quando você instala aqui o elementor ó tem essa opçãoincorreta tá É nesse construtor de tema que a gente vai criar grande parte da nossa loja virtual vou clicar aqui por exemplo ó então aqui a gente consegue criar o cabeçalho o roda pé as páginas né no caso aqui o os produtos enfim a gente consegue criar tudo aqui pelo elementor pro aqui tá bloqueado tá E daí pede pra gente atualizar beleza para você adquirir o elementor pro eu vou est deixando na descrição do vídeo aqui o link da full a fullu é uma
empresa aqui que facilita o acesso aí a plugins e temas Premium para WordPress e aqui você consegue adquirir o elementor pro por um preço muito barato e detalhe que é o elementor pro original tá então eu vou vir mais embaixo Aqui ó você vai vir aqui você vai deixar selecionada a opção elementor e aqui você vai escolher então para um site aqui já vai suprir a tua necessidade beleza Só para deixar bem claro aqui qual é que é a dinâmica o elementor pro ele é vendido em dólar né direto lá do site oficial tá e
uma licença aí custa se eu não me engano aí 9 algo desse tipo que dá mais ou menos uns R 300 tá porém o pessoal aqui da full eles compram um pacote com 1000 licenças né que sai muito mais barato e da eles revendem aqui as licenças originais aqui para os clientes aqui da full tá então é tudo 100% original tudo bem Tranquilo Beleza se você tiver qualquer dúvida também referente a esse processo você pode chamar eles aqui no WhatsApp que eles têm um excelente suporte Ok eu vou clicar aqui em comprar agora e aqui
então você vai fazer uma compra aqui normalmente tá vou vir aqui em finalizar compra nesse momento aqui você vai colocar o seu seus dados aqui de contato vai preencher aqui a etapa dois e na etapa três você vai fazer o pagamento beleza é bem tranquilo de fazer esse processo feito isso você ter feito a compra aí recomendo você fazer via pxs ou cartão de crédito porque daí já libera na hora tá você pode estar voltando aqui pro pro site principal aqui da full né Lembrando que você vai receber também vários e-mails aí na sua enfim
caixa de entrada tá dizendo que deu tudo certo você vem aqui em acessar meu painel isso depois que você fazer a compra beleza aqui no p você vai colocar o seu endereço de e-mail ali então que você cadastrou a sua senha e você vai clicar em acessar e beleza Vai est abrindo esse painel aqui deixa eu só fechar Bom basicamente aqui mostra então Ó que eu comprei né uma licença do do elementor pro porém ainda eu não utilizei ela né Então a primeira coisa que a gente vai fazer aqui vamos só aumentar esse zoom a
gente vai vir aqui em conectar site ó Então você clica aqui ou aqui conectar site aqui você vai colocar a URL do seu site ou seja o link do seu site Então vou vir aqui o link do meu site site é aqui ó canal aprendendos sites.com vou dar um cont Crol C aqui no meu teclado vou voltar aqui vou dar um Crol V desse jeito assim e a URL do login ao painel administrativo Então você vai dar mais um cont control V aqui e você vai colocar o WP admin WP admin desse jeito assim né
Igual eu tinha mostrado antes ali na parte de como acessar WordPress você sempre vai acessar WordPress com o seu domínio bar WP tracinho admin Você vai clicar aqui que concorda com os termos de uso da full isso aqui é bem tranquilo tá pessoal e vou clicar aqui em conectar site vai aparecer essa telinha aqui eu vou dar um ok nesse momento olha só é importante que você esteja logado aí no seu WordPress no mesmo navegador Porque daí vai abrir aqui o painel já do WordPress né E você clica em sim eu aprovo esta conexão e
beleza vai direcionar aqui dizendo que deu tudo certo lembrando mais uma vez que se você tiver qualquer dúvida ou erro aqui nesse processo eles mesmos aqui fornecem um enfim uns tutoriais mais completos aqui e também tem o suporte via WhatsApp então bem tranquilo tá pessoal agora a gente já tem então um site conectado aqui na full agora nós vamos ativar então o nosso plugin que é o elementor pro então você vem aqui em ativar plugin tá aqui o elementor pro prosseguir prosseguir e solicitar ativação agora é só aguardar alguns instantes né que ativação vai ser
feita automaticamente e o nosso elementor aí enfim o nosso WordPress ele vai ser conectado lá direto com o site oficial do elementor tá e beleza eu aguardei aqui eu acho que foi 1 Minuto 2 minutos né e deu aqui então que o plugin foi instalado com sucesso vou clicar aqui em fechar aqui não precisa mais você mexer Tá lembrando que o elementor pro ele é renovado anualmente tá então se daqui um ano você quiser você pode estar renovando essa licença né pelo mesmo valor ou também tem a opção de você não renovar tá só que
daí se você não renova a licença vai acontecer a do seu site ele não receber novas atualizações beleza mas ele vai continuar funcionando normalmente ok então fica ao seu critério eu vou voltar aqui no meu painel do WordPress aqui nos plugins ó vamos atualizar isso aqui ó clicar de novo e ó Beleza pode ver que agora tem o elementor E tem também o elementor pro aqui tem o plugin da full Tá então não precisa também você mexer aqui se tiver algum plugin desatualizado você pode estar clicando aqui para fazer a atualização ó elementor pro atualizado
né aqui nos plugins é sempre interessante você manter tudo atualizado tá então de tempos em tempos aí quando você visitar o o painel do WordPress você vê que tem plugin aqui desatualizado você sempre clica em atualizar Ok próximo passo agora a gente vai instalar o Plugin do woocommerce tá deixa eu só fechar essas Abas aqui do meu navegador para ficar mais organizado aqui beleza eu vou deixar aberto aqui só o o chat GPT aqui com os textos tá o canva aqui com o logotipo e tal ó então aqui no canva eu criei o o logotipo
aqui da minha loja virtual né você pode fazer o mesmo aqui e os banners também daqui a pouco eu falo mais sobre isso ok vamos voltar aqui então ã vou vir aqui em adicionar plugin Vou pesquisar aqui por ucommerce desse jeito assim tá aqui o ecommerce Então e o commerce basicamente como eu falei lá no início ele vai transformar aqui o nosso WordPress numa loja virtual então vou clicar aqui em instalar e vou clicar em ativar Beleza vai est abrindo um assistente aqui nesse caso eu vou fechar isso aqui tá eu só vou selecionar aqui
o meu país né então no caso seria o país aqui onde está a sua loja virtual deixa eu ver colocar aqui Brasil e o estado tá no meu caso Vou colocar aqui Rio Grande do Sul tá beleza vamos aguardar elhe fazer aqui algumas furações zinhas perfeito aqui o próprio ucommerce ele vai dar um passo a passo aqui pra gente tá criando a nossa loja virtual né porém eu vou ensinar aqui de uma forma mais personalizada e até mais fácil aí para você entender ó então a gente adicionou aqui O plugin do ucommerce né você pode
ver que aqui do ladinho ó agora tem essa aba de produtos todos os produtos a gente consegue adicionar produtos na nossa loja virtual categorias tem análises marketing então tem todas essas Abas aqui e através dessas Abas a gente consegue fazer toda a gestão aqui da nossa loja virtual muito muito importante também eu vou vir aqui em páginas todas as páginas ó nesse momento também você vê que automaticamente aqui o woocommerce criou a página de carrinho página de finalização de compra página de loja página de minha conta página de política de reembolso e devoluções Então realmente
né como eu falei o ecommerce ele transforma o teu WordPress numa loja virtual tá você viê que antes não tinha toda essa estrutura de loja virtual E agora tem ainda aqui nas páginas eu vou adicionar duas novas páginas aqui vou fechar aqui que que vai ser a página de home ou seja página de início aqui que vai ser a principal página do meu enfim da minha loja virtual Ok vou clicar aqui em publicar Você pode repetir esse mesmo processo vou voltar aqui vou adicionar mais outra página aqui então adicionar nova página vou colocar também uma
página de contato e vou clicar em publicar depois a gente vai personalizar uma a uma essas páginas Ok com o elementor Lembrando que aqui você pode criar quantas páginas você quiser então por exemplo Ah você quer criar uma página de sobre você pode estar criando aqui uma página de termos de uso uma página Sei lá o tipo de página que você quiser uma página de trabalhe conosco enfim o que você quiser tá no decorrer da aula aqui você vai pegar bem a ideia aí de como que funciona OK outra configuração bem importante aqui que eu
vou fazer também eu vou vir em configurações leitura sua página inicial exibe eu vou selecionar essa opção uma página estática e eu vou selecionar qual que vai ser a minha página principal né que vai ser essa página aqui de home ou início tá aqu ela vai ser a página inicial da minha loja virtual né Ou seja quando a pessoa acessar ali canal aprendend sites.com já vai abrir essa página aqui ó vou salvar as alterações beleza outra coisa que eu vou fazer aqui também ó já vou criar o menu da minha loja virtual agora pessoal nesse
momento tô fazendo só a parte mais chata assim né a parte mais lógica daqui a pouco a gente vai começar aí enfim personalizar e fazer a parte mais legal tá vou vir aqui em aparência menus e aqui eu vou criar um menu Vou colocar aqui menu mesmo criar menu e agora vou escolher as páginas que eu quero adicionar aqui nesse menu Então nesse meu menu aqui deixa eu clicar aqui em ver tudo vai a página de home a página de contato e a página de minha conta Ahí a página de loja também que é a
página de produtos tá vou clicar aqui em adicionar o menu ó então página de home aqui eu posso ordenar ó colocar do jeito que eu quiser né que é aquele menu que vai aparecer bem em cima ali da nossa loja virtual e claro você organiza da maneira que você quiser e você coloca aqui do jeito que você quiser beleza você adiciona novas páginas você exclui Enfim vou salvar aqui esse menu Beleza agora eu vou vir aqui em woocommerce e aqui você consegue fazer toda a gestão eu vou vir na aba mais importante aqui que é
de configurações vamos clicar aqui então e aqui então o que que você vai fazer você vai preencher todas as informações você vai colocar aqui o endereço aí da sua da sua loja virtual a cidade no caso país o estado já tá aqui né o CP aqui você tem várias configurações né se você quer vender para os países ou vender para países específicos né então você pode colocar aqui ó vender para países específicos daí você vem aqui e coloca Ah sei lá você vai vender só pro Brasil coloca o Brasil tá você faz toda essa gestão
aqui locais entrega você consegue selecionar aqui também localização padrão do cliente você consegue configurar né então recomendo você colocar aqui região país da loja né que é enfim Onde você tá vendendo aqui temos outras configurações você pode ativar cupons aqui você vai escolher a moeda Beleza vou deixar padrãozinho assim vou salvar e daí o que que você vai fazer então você vai passar aba por aba aqui ó vou vir em produtos ó página da loja recomendo deixar deixar padrão aqui as unidades né em quilo centímetro aqui as avaliações né então se você quer ativar avaliações
do produto você deixa ativo se você não quer você deixa desativo enfim você vai marcando aqui tudo que faz sentido para você ó tem opção de estoque ativar gestão de estoque né que enfim isso aqui é para mostrar quantos quantas unidades aí de um determinado produto estão disponíveis né para isso aí aparecer para o público né se você não quer isso é só desmarcar aqui bem importante também né você tá colocando o e-mail aqui nesse meu caso tá o e-mail padrão ali do WordPress né mas aqui vai aparecer o seu e-mail aí que você usa
ali no dia a dia e tal que você cadastrou tá então você vai fazer aqui ó Tem a parte de entrega que a gente já vai ver mais a fundo também e a parte de pagamentos que a gente já vai ver mais a fundo aqui temos contas e cidade e-mails aqui então você vai configurar todos os e-mails toda vez que tiver um novo pedido né você vai receber um e-mail Daí você pode vir aqui em gerenciar e configurar exatamente o que você vai receber nesse pedido recomendo deixar padrão aqui tá vou voltar ó toda vez
que tiver um pedido cancelado ou mal sucedido você também recebe um e-mail e aqui os e-mails que os clientes vão receber né então pedido eh aguardando processando pedido pedido concluído pedido reembolsado enfim você vai fazer toda essa gestão aqui né ã notas do cliente redefinir 100 a nova conta aí todas todas essas etapas aqui ó você vem em gerenciar e aqui ó você vem e você coloca o texto que você quiser você coloca o título aqui que que você quiser tá se você deixar padrão assim ele já fica padrãozinho né mas você pode estar alterando
né então você faz aí de acordo com a tua necessidade né De acordo com a tua loja enfim aqui integração à Não vou mexer aqui não vai ser preciso aqui em visibilidade do site o nosso site aqui ele não tá Ah digamos assim online ainda tá eu já vou marcar essa opção de Live aqui para ele ficar ã online tá eu vou salvar as alterações Ok então muito importante também você não esquecer essa configuração uma configuração muito importante e aqui a gente tem uma aba avançada também que tem várias outras opções recomendo deixar tudo padrão
tá pessoal e enfim só passar aqui aba por aba e para encher aí o que faz sentido para você né Não tem não é nenhum Bicho de Sete Cabeças não tem muito mistério Ok ah vamos fazer então uma das partes mais importantes aqui que é o método de pagamento da nossa loja virtual tá na sequência eu vou te ensinar como configurar um método de pagamento Afinal isso é muito importante pra gente conseguir receber os pagamentos da nossa loja virtual das nossas vendas e também eu vou te ensinar como configurar um método de entrega né que
isso é crucial você vai ter que ter um método de pagamento e um método de entrega tá depois disso a gente vai partir então aqui pras aqui para os produtos né a gente vai adicionar categorias a gente vai adicionar os produtos e depois partir aí pra personalização da loja virtual e aproveitando também deixa aí nos comentários O que que você tá achando desse passo a passo enfim se as informações estão Claras se tá te ajudando eu diria que a parte mais assim burocrática mais complicadinha do nosso passo a passo já passou daqui paraa frente não
é assim mais tão difícil tá a gente já tem toda a nossa estrutura Beleza eu vou vir aqui então em métodos de pagamentos aqui por padrão o próprio ecommerce ele já dá alguns métodos porém eu não vou fazer por aqui tá eu vou fazer através de um plugin né vou vir aqui em plugins adicionar plugin E qual é que é a dinâmica aqui então quando a gente fala de receber pagamento e uma loja virtual isso é muito particular de cada um que que eu quero dizer vai ter pessoas que vão preferir por exemplo utilizar o
Mercado Pago vai ter pessoas que vão preferir utilizar o PayPal o Pag Seguro Sei lá o picpay outras plataformas tá então isso realmente é muito par particular de cada um aqui nessa aula eu não vou conseguir te ensinar como integrar aí sei lá 10 20 métodos de de pagamento Diferentes né porque senão vai ficar uma aula extremamente grande nesse meu caso aqui eu vou integrar com o método de pagamento o Mercado Pago que que eu vou fazer então vou vir aqui em plugins eu vou pesquisar por Mercado Pago porém é só só um exemplo de
um dos métodos de pagamento tá Então nesse momento Aí talvez se você Ah não quero integrar o Mercado Pago você dá um Google aí né você pesquisa como integrar tal método de pagamento ao woocommerce que enfim praticamente todos os métodos de pagamento dá para você integrar aí que você enfim quiser então aqui ó vou fazer o Mercado Pago mas por exemplo Ah eu quero o Pag Seguro vem aqui e pesquisa Pag Seguro ó e aqui tem então os plugins aqui para você integrar né o Pag Seguro no ucommerce Ah eu quero o PayPal Vou pesquisar
aqui por PayPal e aqui ó tem o Plugin do PayPal e daí você faz a instalação do Plugin após você fazer a instalação do Plugin você faz a configuração do Plugin né mas como eu falei em alguns casos Você vai precisar dar um Google aí né conforme o método de pagamento eu vou usar o mercado pago aqui porque Particularmente eu gosto do mercado pago e é um plugin bem fácil aqui de configurar então vou clicar em instalar o mercado Pag pago instalado vou clicar em ativar beleza nesse momento Então olha só vir aqui em ucommerce
né E nesse momento já apareceu a opção de mercado pago então se você tivesse instalado ali o Pag Seguro o PayPal ou qualquer outro plugin né provavelmente vai aparecer o nome do Plugin que você instalou aqui então você pode estar clicando aqui em mercado pago né Para você fazer as configurações ou vindo aqui nos plugins instalados ó mercado pago aqui ó configurar plugin daí Lembrando que claro você já tem que ter uma conta aí no no mercado pago né para você receber os pagamentos da sua loja ou né se você fazer através de outro plugin
aí você tem que ter a conta né sei lá no pack seguro no Paypal onde você vai fazer OK eu vou vir aqui ó e é bem fácil da gente configurar primeiro ele vai pedir aqui para você inserir a chave pública aqui e o token de acesso né que são enfim dois códigos aqui né que são as credenciais que você vai colar aqui e através dessas credenciais você vai conseguir fazer essa integração então lá da sua conta do mercado p aqui para o ecommerce aqui para o WordPress tá então você pode estar clicando nesse link
aqui ó e ele vai direcionar você aqui para o Mercado Pago nesse caso aqui eu vou fazer login aqui na minha conta beleza pessoal pulei aqui um pouquinho o vídeo né então quando você clicar nesse link aqui ó você vai fazer login na sua conta do Mercado Pago tá ã e daí vai ter essa opção aqui ó credenciais de produção vai ter também essa aqui para teste né Você pode configurar tanto uma quant quanto outra a diferença é que produção aqui a sua loja virtual ela já vai estar funcionando e teste ela não vai est
funcionando é só teste mesmo para você testar os métodos de pagamento Eu recomendo você já colocar produção porque daí é só uma vez que você faz essa configuração não precisa você estar fazendo de novo vou vir aqui então em credenciais de produção e aqui a gente tem essa Public ke ó eu vou vir aqui vou copiar vou vir aqui e vou colar e tem essa esse access token vou vir aqui vou copiar vou vir aqui e vou colar vou salvar e continuar e beleza Beleza vai aparecer essa mensagenzinha aqui sua loja saiu do modo teste
e está fazendo vendas reais no modo produção vou fechar aqui essa etapa um aqui e vou vir na etapa dois ó personalize as informações da sua loja então aqui você vai colocar o nome da sua loja tá colocar aqui só como exemplo mesmo a loja do Rodrigo aqui você consegue colocar uma identificação tá então você coloca aqui do jeito que você quiser Ok e aqui a categoria da loja você selecione a categoria da sua loja clica aqui em salvar e continuar agora nessa terceira etapa aqui ó você vai ativar os métodos de pagamento né então
por exemplo eu quero o cartão de crédito e débito vou vir aqui em configurar ó vou ativar aqui essa opção para ativar o checkout cartão de crédito e débito aqui se você quiser você ativa a conversão de moeda enfim vai depender aí do seu negócio e vai deixar ativo essa opção aqui vou salvar as alterações beleza aqui já tá ativo vou voltar aqui no mercado pago ã quero configurar o pix por exemplo ó configurar ativar aqui tem vencimento pro pix enfim converter moedas se você quiser salvar alterações beleza vamos voltar aqui pro mercado pago ó
nesse momento então eu já configurei aqui cartão de crédito e débito e pix tá daí se você quiser você configura outras formas de pagamento aqui né ou como eu falei configura outro plugin o Mercado Pago você viu que ele é bem Hã enfim tranquilo aqui de mexer ok tem essa opção aqui então Eh teste sua loja antes de começar a vender aqui já tá no modo de vendas vou salvar as mudanças Vamos só recarregar essa página aqui ó você pode ver que aqui ó já tem todos os cheques né então já tá tudo feito ou
seja nesse momento a gente já tem um método de pagamento integrado na nossa loja virtual toda vez que a pessoal fazer uma compra na nossa loja virtual eu vou est recebendo valor lá na minha conta do Mercado Pago Beleza agora olha só vamos integrar também o m método de entrega para isso eu vou vir aqui no ucommerce configurações entrega e a primeira coisa que eu vou fazer aqui é adicionar uma área de entrega Como que vai funcionar essa parte aqui então é bem simples tá ã por exemplo vou dar um nome aqui para uma área
de entrega tá vou colocar por exemplo Sul tá vamos supor assim que eu tenho uma loja virtual e essa loja virtual eu envio para todo o Brasil né e eu vou nomear as áreas de entrega Então vou colocar Sul né E aqui ó deixa eu selecionar aqui Brasil o sul eu vou colocar aqui o Paraná o Rio Grande do Sul e Santa Catarina beleza ó e aqui eu vou adicionar um método de entrega então eu posso escolher né se por exemplo pro sul do país né para para esses estados aí que eu selecionei vai ter
frete grátis ou eu posso colocar uma taxa fixa nesse caso aqui eu vou colocar taxa fixa vou clicar aqui em continuar aqui vai ficar taxa Fixa aqui eu vou deixar selecionado tributável e o custo aí você vai colocar o custo tá então sei lá você tem a sua loja virtual tá em São Paulo tá aí quanto que você vai cobrar para enviar para o sul você vai colocar aqui né vou colocar sei lá ã r$ 1 tá só como exemplo tá pessoal vou clicar aqui em Criar e salvar e beleza nesse momento Então olha só
eu adicionei a área Sul né e toda vez que um usuário ele comprar na minha loja virtual e ele digitar o ceps aqui em quadrados no no Sul vai aparecer o valor de r$ 1 para ele tá fazendo o pagamento Beleza vou voltar aqui em áreas de entrega ó Então já tem o sul e aqui você pode fazer toda essa gestão né Você pode adicionar Outra área por exemplo vou clicar aqui em adicionar área vamos adicionar aqui como exemplo o Sudeste vamos adicionar aqui as regiões vamos colocar aqui no sudeste ah Espírito Santo Rio de
Janeiro São Paulo e acho que Minas Gerais também enfim Desculpa se tiver errado mas enfim Aqui tá o Sudeste aqui estão as cidades do Sudeste e aqui eu vou adicionar então um método de entrega vou colocar por exemplo uma taxa fixa mais eu poderia colocar um frete grátis por exemplo pro Sudeste seria frete grátis Tá vou clicar aqui em continuar aqui no frete grátis Ó você pode inclusive configurar aqui um PED um valor mínimo e tal né vou clicar em Criar e salvar Beleza vou voltar aqui nas áreas de entrega né então eu tenho aqui
o sul do país que eu cobro uma taxa fixa de r$ 1 eu tenho o sudeste que é frete grátis e daí você pode fazer toda essa gestão e adicionando mais lugares Ah você quer adicionar o o Nordeste quer cobrar uma taxa geralmente é um pouquinho maior né pro Nordeste quer cobrar uma taxa de r$ 0 R 40 enfim você faz toda essa gestão ou inclusive fazer Essa gestão com cidades aliás estados né você quer colocar lá Estado de São Paulo você vai colocar tal valor aí o estado do Rio de Janeiro vai ser outro
valor enfim cada estado um valor diferente você pode estar fazendo essa gestão aqui tá essa aqui ela é a forma Nativa aqui do ucommerce de você tá configurando a entrega porém Vale ressaltar tá também que a gente tem algumas formas mais avançadas tá por exemplo vou vir aqui em plugins adicionar plugin posso pesquisar aqui por correios e você pode estar utilizando aqui O plugin dos Correios tá um dos mais usados é esse aqui ó Cláudio Sanchez correios para o commerce tá com esse plugin aqui você faz a integração entre os correios e o woocommerce tá
Porém isso aqui é só mais um método de entrega né Tem vários outros né você quer por exemplo integrar aí com alguma transportadora ou outro método de entrega né então como eu falei lá o método de pagamento da tua loja virtual ele é algo muito particular teu né do teu negócio o método de entrega também tá Então nesse momento né tanto o pagamento quanto a entrega em alguns casos aí você vai ter que dar um Google aí para ver como que você vai fazer tá porém ensinei duas formas básicas aqui que creio que para muita
gente já vai ser útil e vai ajudar beleza bom próximo passo agora eu vou adicionar as categorias da minha loja virtual para em produtos categorias aqui por padrão já vem essa 100 categoria aqui e aqui então você vai colocar todas as categorias aí que vão fazer sentido enfim pro seu nicho tá pro seu site pra sua loja tá no meu caso aqui né como eu falei eu tô criando uma loja aí mais voltada para produtos eletrônicos para ã game notebook né então vou colocar aqui as minhas categorias né Vou colocar aqui ã consoles aqui embaixo
ó não vou mais mexer em nenhuma opção eu vou só clicar em adicionar categoria vou colocar aqui também notebooks assim adicionar nova categoria Vou colocar aqui headsets ou seja fones de ouvidos né vou clicar aqui em adicionar e vou colocar aqui também joysticks será que tá certo joysticks Deixa eu só ver aqui no Google legal Tá certo vou adicionar essa categoria Beleza vou deixar essas categorias aqui tá pessoal quatro categorias de produtos aí só para enfim exemplificar aí como é que vai Ok mas aí você adiciona aí todas as categorias da sua loja virtual que
você quiser Ok próxima configuração que que eu vou fazer eu vou adicionar atributos tá E você já vai entender o que que são atributos atributos vão ser bem importantes aí para toda vez que você adicionar um produto variável na sua loja virtual Então como que vai funcionar na prática eu vou adicionar aqui por exemplo um atributo de cor desse jeito assim tá vou adicionar o atributo beleza e agora eu venho aqui aqui em configurar termos tá E aqui eu vou colocar todas as cores que eu vou ter de um determinado produto tá então vou colocar
aqui por exemplo Preto vou adicionar essa cor Vou colocar aqui vermelho vou adicionar essa cor Vou colocar aqui Azul vou adicionar essa cor enfim aí vai depender do do tipo de produto que você vende né só tô fazendo aqui como exemplo tá quando eu tiver adicionando ali os produtos né eu vou adicionar um produto variável aí você vai ver que eu vou conseguir puxar essas informações aqui n e configurar preços diferentes vou voltar aqui em atributos ó então eu já tenho um atributo de cor e os termos dessa cor são azul preto vermelho posso adicionar
outro atributo aqui de armazenamento por exemplo ó desse jeito assim vou clicar aqui em adicionar atributo vou configurar os termos né E vou colocar aqui por exemplo um Tab Isso aqui é uma unidade de armazenamento tá vou clicar em adicionar Vou colocar aqui 2 tb vou adicionar vou botar aqui nos atributos e aqui você vai adicionar então quantos atributos você quiser por exemplo Dando um exemplo assim mais prático tá você vai vender uma uma camisa né Essa camisa ela tá disponível lá nos tamanhos p m e g tá você vai vir aqui você vai adicionar
um atributo de tamanho tamanho aí nos termos desse atributo você vai configurar pmg você tem por exemplo um tênis tá esse tênis ele vai ter vários tamanhos né você vai adicionar aqui um atributo de tamanho aí aí você vai colocar aqui nos termos tamanho lá 37 38 39 40 enfim quantos tamanhos tiver e depois quando você cadastrar lá os produtos aí você consegue selecionar esses atributos Beleza então por exemplo num tênis você vai conseguir configurar depois atributo de cor atributo de tamanho e fazer toda a configuração ali toda a a variação dos produtos né inclusive
colocar preços diferentes por exemplo ah você tem um tênis preto tamanho 36 é tal valor aí um tênis azul tamanho 38 é outro valor você consegue fazer toda essa gestão beleza por aqui pelos atributos tá então aqui vai depender muito também da tua necessidade aí do teu negócio enfim da tua loja virtual tá na sequência você já vai entender melhor como que funciona essa questão aqui dos atributos porque agora então eu vou adicionar aqui então o primeiro produto na nossa loja virtual e eu vou adicionar aqui um produto simples primeiro e depois eu vou adicionar
um produto variável então eu venho aqui em todos os produtos Ó você pode ver que ainda eu não tenho nenhum produto Então vamos criar um produto aqui vamos adicionar nosso primeiro produto primeira coisa você vai colocar o título aqui do seu produto no meu caso aqui vou colocar um Playstation 5 só para mostrar mesmo tá pessoal tá então coloquei aqui o título do meu produto você vai colocar o seu aqui na descrição né como eu falei ali antes eu pedi aqui para pro chat GPT me gerar a A headline tá então deixa eu pegar aqui
isso aqui vou copiar vou vir aqui vou dar um cont control V vou colar Vamos só tirar aqui deixa eu tirar esses asteriscos aqui também e aqui então você consegue digitar aí colocar sua descrição do jeito que você quiser dando aqui o máximo de de informações e tal ó posso colocar em aqui ã Itálico Enfim fazer aqui do jeito que eu quiser cada produto que você adicionar aqui né vai puxar automaticamente lá na loja depois o nome e a descrição desse produto Ok ele vai ser um produto Simples então o preço desse produto né né
Vou colocar aqui sei lá só como exemplo r$ 5000 preço promocional Vamos colocar R 4.000 aqui em stoque então você pode marcar essa opção aqui ó a gestão de estoque e colocar quantos desses produtos você tem disponível Então vou colocar aqui sei lá tenho 20 desse desse produto disponível aqui você coloca se você quer permitir encomenda né Ou seja quando o estoque zera né e limar de estoque abaixo você pode colocar um valor aqui por exemplo dois né Toda vez que você coloca esse valor aqui né tem a explicação S aqui você vai ser notificado
por e-mail né que esse produto ali tá baixo então sei lá vou colocar aqui dois né Tenho 20 no estoque coloquei dois quando chega dois eu já vou receber uma notificação que esse produto ele está abaixo tá então enfim o que fizer sentido para você aqui você pode limitar Apenas Um item por pedido fica o seu critério aqui pera aí antes da breve descrição vamos selecionar aqui entrega aqui muito importante você colocar as dimensões desse produto Então vamos colocar peso aqui por exemplo 4 kg dimensões comprimento 40 largura 40 altura 10 tá tô colocando só
enfim fictício aqui tá pessoal ã produtos relacionados como eu ainda não tenho nenhum produto adicionado aqui na minha loja eu não consigo colocar aqui produtos relacionados Mas você pode estar colocando aqui produtos aí para aparecer na descrição atributos ó nesse caso aqui eu não vou colocar atributo porque ele vai ser um produto simples beleza eu já vou botar o atributo ali depois no produto variável que eu vou adicionar aqui em avanç AD você pode colocar uma nota aqui pra compra enfim se configurar da maneira que você quiser aqui em breve descrição do produto eu vou
pegar isso aqui ó vou dar um control c vou vir aqui vou dar um CRL V é uma breve descrição desse produto agora a parte mais importante aqui é a imagem do produto Então vou vir aqui em definir imagem do produto e eu vou pegar lá no meu computador a imagem desse produto vou clicar aqui em selecionar arquivos tá aqui ó tá aqui as imagens do meu computador então por exemplo Ah vou pegar essa imagem aqui ó e vou abrir vai fazer o envio aqui da imagem definir imagem do produto muito importante também aqui ó
galeria de imagens do produto aqui você pegar as outras imagens do produto então eu vou vir aqui ó vou pegar essa outra imagem essas três aqui eu vou pegar vou clicar aqui em Abrir Enquanto carrega aqui um detalhe bem importante pessoal as imagens aqui da minha loja virtual elas estão desse tamanho aqui ó 800 pixels por 800 pixels Eu gosto de trabalhar aqui com imagens quadradas porque eu acho que fica melhor tá fica Enfim uma visualização mais agradável tanto no computador quanto no no celular no tablet então eu recomendo você sempre manter padrões na sua
loja virtual pode ver que todas as imagens aqui ó eu tô utilizando esse tamanho ó 800 por 800 800 por 800 e 800 por 800 beleza ah como que você faz para mudar a dimensão de uma imagem né você vem aqui na na imagem ó deixa eu pegar aqui abre aí no seu computador no pint mesmo ou em qualquer outro aplicativo aí de de edição de imagem né e muda as dimensões ó no caso que já tá ó poderia colocar aqui ó sei lá 500 por 500 e salvar nesse caso não vou mexer aqui porque
eu já tinha feito isso antes mas eu recomendo você utilizar tamanhos aí né aproximados esses valores né talvez 1000 por 1000 900 por 900 algo nesse sentido beleza ó adicionei a galeria de muito importante então categoria do produto ele vai ser na categoria consoles aqui nas tags Eu não vou mexer eu vou clicar em publicar Beleza o produto já foi publicado você pode estar clicando nesse link aqui ó e olha só que legal nesse momento Então a nossa loja virtual ela tá assim ó puxou aqui o título do produto o preço a descrição o estoque
a categoria E aqui as imagens ó galeria de imagens aqui a descrição completa aqui as medidas e as avaliações né que ainda não tem avaliações tá porém a nossa loja virtual Ela ainda tá feia né Ela tá toda desconfigurada aqui a gente aos poucos vai dando forma a ela beleza então esse aqui ele foi o produto simples que eu adicionei agora também eu vou adicionar aqui na sequência um produto variável beleza para isso então vou vir aqui em Adicionar novo produto Mais uma vez vou dar um nome aqui pro meu produto então beleza vou pegar
a descrição aqui desse produto aqui vamos copiar vou vir aqui vou colar perfeito e aqui então eu vou colocar produto variável aqui eu não vou mexer ó aqui entrega também não produtos relacionados aí fica o teu critério né quando você já tiver um um produto né que nem aqui ó o psel ó já tenho um produto aqui para adicionar tá então você pode estar fazendo essa gestão aqui atributos Agora sim ó você vai vir aqui ó adicionar existente e eu vou adicionar um io de cor a esse meu produto e aqui em valores ó eu
vou colocar que eu tenho esse meu produto disponível na cor azul eu tenho ali disponível na cor preto na cor vermelho e vou salvar esses atributos e você faz isso aí com o seu produto variável clicar aqui em salvar atributos Beleza então aqui ó cor tá E aqui em variações muito importante agora você vir aqui em gerar variações vou dar um ok aqui e o que que ele fez aqui ó ele gerou três variações esse produto Então eu tenho esse meu produto na cor azul na cor preto e na cor vermelho daí eu venho aqui
em azul ó editar eu coloco a imagem do produto Então vou pegar aqui no meu computador ó nesse caso eu vou colocar esse esse controle aqui ó que ele tem três cores deixa eu coloquei a primeira cor aqui que eu esqueci cor azul vamos pegar aqui cor azul vamos clicar aqui para inserir ó e aqui eu vou colocar o preço Então desse produto né Posso colocar aqui o preço da variação e preço promocional Vamos colocar por exemplo aqui ã r$ 50 preço promocional r$ 130 tá só como exemplo mesmo ã tem um estoque aqui eu
vou colocar o peso dele então vamos colocar por exemplo sei lá 500 G dimensões aqui vamos colocar 20 20 10 aqui na descrição você pode estar colocando uma descrição diferente em cada um ó agora vou vir aqui embaixo ó no preto ó vou editar vou selecionar a imagem aqui do produto na cor Preto beleza configurar e aqui eu posso colocar um preço diferente né Por exemplo Ah no azul aqui ó ele vai ser 130 esse aqui eu posso colocar outro preço diferente então vou colocar aqui sei lá R 150 né em estoque coloca aqui as
medidas de peso do mesmo jeito ó aqui tem o vermelho ó vamos pegar aqui o vermelho Vamos abrir e você repete esse processo aí com o seu produto variável né você vai escolhendo as variações vai colocando preços diferentes nas variações e o e-commerce é bem legal que você tem várias opções né então você você consegue colocar preços diferentes medidas diferentes Vamos colocar esse aqui 190 preço promocional 170 Vamos colocar aqui as dimensões Beleza vou salvar aqui essas alterações ó nesse momento Então eu tenho três variações eu poderia adicionar mais variações ainda por exemplo se tivesse
tamanhos diferentes aqui eu poderia colocar mais variações e o ecommerce ele gera todas as variações possíveis desse produto beleza aqui em avançado não vou mexer aqui Uma Breve descrição Vamos colocar aqui dar um CRL C vou vir aqui vou dar um cont CRL V Vamos definir a imagem principal do produto Então vou colocar esse preto mesmo aqui daem na na hora da compra pessoal escolhe a variação as imagens ã vou deixar assim mesmo sem e aqui vou selecionar a categoria Ok vou clicar aqui em publicar beleza produto está publicado vamos clicar em ver esse produto
e olha só tem o nome do produto aqui tem a variação de preço né E aqui vai pedir então pra pessoa escolher a cor ó por exemplo cor azul ó ele mudou ali ó e ele muda o preço cor preto cor vermelho Então pode ver que cada cada um fica diferente tá E é assim que você adiciona um produto variável na sua loja virtual Ok vou voltar aqui no meu painel do WordPress vou vir aqui em produtos todos os produtos nesse momento então eu tenho dois produtos aqui e aqui então você vai adicionar todos os
produtos tá nesse momento pessoal vou pausar um pouco o vídeo aqui porque eu vou adicionar aqui uns oito nove produtos e daí eu vou retornar o vídeo para não ficar uma aula muito longa mas basicamente eu te ensinei o o caminho a para você adicionar pro produto simples e produto variável beleza pessoal pulei um pouquinho o vídeo aqui basicamente adicionei nove produtos totais aqui né na nossa loja virtual tá só pra gente conseguir trabalhar mesmo fazer toda a personalização tá eu também recomendo que você adicione aí pelo menos uns 9 10 produtos aí na sua
loja virtual porque vai ficar mais fácil pra gente configurar a loja já com os produtos beleza aqui nos produtos também você consegue a qualquer momento vir aqui fazer a edição né até mesmo excluir o produto se ele não tá mais disponível aí pra venda Ok detalhe vou vir aqui em páginas todas as páginas vou clicar aqui na página de loja ó vamos clicar aqui em ver e ó nossa página de loja tá assim ó Já puxou aqui todos os produtos ó página de produto tá desse jeito assim ó vamos clicar aqui em comprar para ver
ó adicionado ao carrinho ó vamos clicar em ver carrinho ó tá aqui o carrinho aqui puxou o o frete já pro Rio Grande do Sul ó taxa fixa de r$ 1 se você VM aqui e mudar né Por exemplo que nem ali eu tinha colocado frete grátis pro Sudeste né você vem aqui coloca preenche aqui os dados do do sudeste vai puxar o frete grátis Tá e assim por diante né o usuário vai colocar aqui a localização e ele vai puxar lá os dados de entrega que você configurou vou clicar aqui em finalização de compra
ó ó aqui já aparece inclusive um mercado pago ó pro usuário fazer o pagamento com o Mercado Pago tá então a nossa loja virtual ela já tá estruturada né ela só não tá ainda bonita não tá personalizada né vamos vir aqui no site ó ela tá assim ainda a página inicial né e aquelas outras páginas ali que eu mostrei para você agora então vamos fazer a parte mais legal né Na minha opinião é a que eu mais gosto que é de personalizar a loja virtual Então a gente vai personalizar a nossa página inicial a página
de produtos a gente vai Enfim fazer várias configurações várias personalizações aí pra nossa loja virtual ficar bem bonita bem otimizada para ela abrir bonito aí no no celular no tablet no desktop Primeira coisa eu vou vir aqui em modelos construtor de tema e eu vou criar então o cabeçalho do nosso site vou clicar aqui no maizinho que é o header né Vamos aguardar aqui abrir o editor do elementor Então nesse momento é a primeira vez aqui que a gente vai abrir esse editor vou clicar aqui aqui no x Beleza vou fechar tudo aqui antes de
mais nada eu só vou vir aqui nessa opção configurações do site cores globais e aqui então o que que a gente vai fazer a gente vai colocar as cores da nossa identidade visual as cores aí do seu logotipo enfim as cores da sua marca você vai configurar tudo aqui porque essas cores elas vão ser padrões aí na loja virtual inteira tá então por exemplo eu aqui ó vou adicionar a cor eu tô aqui com o meu canva aberto mesmo aqui pode ver que aqui eu usei esse Tonzinho de azul aqui ó ó vou copiar aqui
essa cor ó vou dar um copiar vou vir aqui e eu vou utilizar essa cor vou vir aqui em adicionar a nova cor e eu utilizei também um tom de preto assim tá então basicamente são essas as cores aqui da minha identidade visual Beleza vai ser esse azul aqui E esse preto daí você vai colocar todas as aí enfim que vai fazer sentido para você posso adicionar aqui também o branco né que a gente vai usar bastante salvar alterações Ah você não tem cor aí definida não quer dizer tá agora no no criar aí você
já vai pegar bem a ideia tá vou voltar aqui vou adicionar também as fontes globais tá então aqui eu vou colocar essa fonte aqui mon Serrat ó essa fonto que tá aparecendo aqui vamos colocar um tamanho aqui enfim essa fonto aqui ela vai aparecer no site inteiro tá então eu quero que nos títulos apareça assim né e nos nas descrições também vou colocar fonte mon Serrat colocar aqui no tamanho 16 assim mesmo o peso 400 Vou salvar as alterações então nos títulos a fonte já vai puxar essa e no nas descrições já vai puxar essa
e também as cores bom retornando então aqui ao cabeçário né Deixa eu só voltar aqui para ninguém ficar perdido né você vai vir aqui em modelos construtor de tema e você vai criar aqui então o cabeçário ó clica em cabeçário no maizinho né no caso Já criei ali vou clicar em editar aqui então Vamos criar o cabeçário do nosso site que que seria o cabeçário vai ser a parte aqui que vai aparecer o nosso logotipo o nosso menu posso inserir aqui também um botãozinho de pesquisa e também um botãozinho ali do carrinho tá vai ser
esse o nosso cabeçário então vou clicar aqui no mais vou selecionar essa opção de flexbox e aqui eu vou selecionar essa estrutura aqui com 1 2 3 4 contêiners que que eu vou fazer vou vir aqui no maisin eu vou vir aqui em imagem vou arrastar uma imagem para cá e aqui eu vou colocar Já o nosso logotipo Então vou pegar aqui do meu computador ó o logotipo ele tá aqui já tá pronto bonitinho Beleza vou clicar em abrir selecionar tá logotipo ele tá aqui pessoal com o fundo transparente e nessa resolução aqui ó 372
por 139 tá então você pode utilizar algo aproximado tá detalhe que eu cortei as bordas dele ó então ele não tem bordas aí ao redor tá vou vir aqui em selecionar vou vir aqui no Mais também e eu vou adicionar aqui o menu V arrastar o menu para cá ó pode ver que aqui ele Já puxou o menu só que aqu ele pux minha fonte primária Tá eu já vou configurar isso aqui vou vir aqui no Mais também eu quero adicionar um um um campo de pesquisa aqui Deixa eu pesquisar aqui por aqui ó pesquisar
Ó você pode estar vindo aqui ó e pesquisando por pesquisa Beleza vou adicionar para cá assim ó vou vir aqui no Mais também e vou selecionar essa opção aqui de carrinho do menu ó e vou arrastar para cá beleza tá tudo feio isso aqui tá aqui que tá 4.000 que é o produto ali que eu tinha adicionado do carrinho né agora a gente vai configurar a gente vai personalizar item por item para ele ficar bonitinho Tá vamos começar aqui pelo logotipo eu vou pegar aqui o meu endereço aqui ó eu vou copiar e eu vou
vir aqui no logotipo link URL personalizado eu vou colar toda vez que o usuário clica aqui no logotipo ele vai ser direcionado sempre para a página inicial do nosso site enfim da nossa loja virtual aqui em estilo eu vou deixar ele alinhado para a esquerda eu vou colocar um tamanho em pixels vou colocar uns 150 pixels assim Ok bom aqui no menu ó que que a gente vai fazer aqui nesse menu pode ver que aqui ó ele puxou o nosso menu tá que é aquele menu que eu tinha colocado lá no início da aula né
lembra que eu coloquei home loja minha conta e contato então é esse menu aqui tá eu só vou vir aqui em estilo tipografia Ó aqui tá a minha tipografia primária eu vou colocar minha tipografia secundária desse jeito assim aqui também eu posso até aumentar um pouquinho o peso assim e a cor aqui eu posso colocar a cor que eu quiser ó tem esse Tonzinho de azul ou até mesmo um preto ó quando passar o mouse ele fica assim ou voltar aqui esse ponteiro aqui ó você configura o estilo dele aqui ó ó nesse caso vou
deixar desativado mesmo ó e quando passa o mouse que é aqui em Hover eu quero que fique dessa cor assim ó e aqui no ativo eu vou deixar ele da cor preto beleza aqui você configura os espaçamentos só antes disso eu vou voltar aqui nesse primeiro contêiner Olha só e aqui eu vou diminuir a largura ó vou deixar a largura 15 e esse segundo aqui eu vou aumentar a largura vamos ver vou deixar aqui um 35 eu vou clicar nele aqui também eu vou deixar ao centro esse aqui tambémm vai ficar o centro assim vou
vir nesse outro aqui Aqui tem a opção de pesquisa tá então aqui ó posso mudar esse textinho né botar pesquise Opa deixa eu escrever melhor aqui pesquise três pontinhos assim aqui tem opção de eu tirar esse esse botão né deixar só assim ó nesse caso eu vou deixar o botão aqui posso vir aqui escolher um ícone pro botão né Vamos colocar esse izinho aqui de pesquisa assim ó só que vamos tirar aqui esse texto vou escluir o texto Ó daí vai ficar assim tá aqui eu não vou mexer aqui também eu não vou mexer vou
vir aqui em estilo tipografia vai ser minha tipografia secundário assim aqui em plano de fundo não vou mexer aqui no pading vou deixar aqui em uns 10 assim aqui no botão de enviar eu posso vir aqui também e diminuir ó diminuir o ícone assim né para não ficar tão grande e aqui o padding vamos deixar aqui eh sei lá 10 na direita 10 pixels inferior 10 pixels e esquerda 10 pixels então você vê que tá ganhando forma aqui né Vamos só vir aqui no contêiner de novo colocar o centro ó tá ficando assim tá vamos
arrumar esse carrinho feio aqui também ó esse aqui é o carrinho que vai aparecer do lado Tá eu vou excluir aqui o o preço tá mas se você quiser você pode deixar o preço vou vir aqui em estilo né e aqui você escolhe Então as cores ó colocar uma cor preta né quando passa o mouse vou deixar essa cor assim ó vou ajustar também o tamanho desse ícone vou deixar assim ah ele tá com uma bordinha também vamos ver como é que tira essa borda aqui aqui largura da borda ó vou deixar Zerado beleza ó
tá ficando assim deixa eu pegar esse pesquisa aqui eu vou diminuir ainda mais esse tamanho e esse botão aqui ele tá meio tá meio feio cara antes era era melhor de configurar isso aqui tá o elemento atualizou e ficou meio meio estranho aqui achei meio zoado Mas enfim posso colocar um raio da borda assim não fica legal né vou deixar Zerado aqui vou deixar assim e aqui eu vou deixar esse espaçamento ó no mínimo desse jeito assim agora vamos ajustar melhor isso aqui tá eu vou clicar aqui no contêiner principal aqui a gente Ajusta a
largura ó Então ele pode ficar mais largo ou menos qual é que é a recomendação aqui você deixar padrão aqui no caso é 1140 tá pois você deixando 1140 ele vai abrir bonito aí enfim praticamente todos os notebooks todos os computadores Beleza então vou deixar padrãozinho esse formulário aqui vamos só colocar uma bordinha aqui achar na cor preta assim largura um Aí achei mais bonito assim beleza vamos ajustar melhor isso aqui ó esse aqui vai ficar em 15% esse esse aqui eu vou deixar 45% vamos deixar ele ajustado aqui no final assim esse aqui eu
vou deixar ele já tá padrão aqui de 25 vou deixar 25 e esse carrinho aqui como ele é pequeno Ele vai precisar só de uns 10% talvez menos até não c não ter que ser 10 n então aqui é legal fechar os 100% né então 15 mais 40 fecha 60 né mais 25 fecha 85 mais 10 fecha 95 vamos vir aqui nesse aqui ó e colocar 50 daí se a minha matemática não tiver errada fechou aí os 100% tá ainda aqui ó eu vou deixar aqui Centralizado beleza ó ficaria assim então o nosso cabeçário da
nossa loja virtual tá isso aqui elemento cabeç ISO aqui não vai aparecer depois tá só isso aqui então a gente tem o logotipo a gente tem o nosso menu botãozinho de pesquisa e o carinho aqui no carinho a gente tem que fazer configuração também só que vou deixar para fazer depois aqui que tiver quase pronta a Lo tá vamos ver como que isso aqui fica no tablet ó no tablet tá assim no tablet vamos dar algumas alteradas aqui eu vou vir nesse aqui ó nesse primeiro né Vamos colocar aqui uns 20% assim esse outro aqui
porcentagem vamos deixar em 45 e esse menuzinho aqui vamos ver vou mudar aqui ó dá para deixar ele assim no tablet só que da eu teria que diminuir aqui o tamanho também assim ó ó então podemos deixar assim no tablet né então só para você entender esse primeiro contêiner aqui eu deixei uma porcentagem maior esse aqui eu deixei ele um pouquinho menor né para fechar el oos 100% né então esse aqui ó 20% 45 dá 65 né mais esse aqui ó 25 fecha 90 né e mais esse outro aqui 10% então abriria assim no tablet
tá detalhe que se você tiver muito muitos itens aqui no menu né Vai abrir um embaixo do outro tá então aí fica o seu critério né se você quer colocar no tablet dessa maneira assim ó ou talvez reduzir mais ali os os itens né vamos ver aqui ó ó dá para diminuir o espaçamento e tal né fica o teu critério Ok ó no celular tá tudo aqui meio bagunçado tá vamos clicar nesse primeiro aqui esse aqui ele vai ficar em 100% esse contêiner o logotipo eu vou deixar ele Centralizado e agora vou fazer desse jeito
assim ó esse aqui eu vou deixar em uns 15% esse aqui eu vou deixar em uns 70% e esse elemento aqui eu vou deixar em uns 15% Deixa eu só pegar esse carrrinho aqui vou conteú vamos alinhar ele para cá ó ele fica assim deixa eu só ver outra coisa aqui ó aqui você pode mudar no caso vai ficar assim mesmo esse menuzinho eu vou tirar aqui os espaçamentos esse pesquisar também eu vou tirar e esse carrinho aqui também eu vou tirar esse carrinho aqui você pode estar mudando ó deixando ele sólido ou enfim conforme
fazer sentido para você deixa eu ver se eu consigo reduzir el um pouquinho aqui aqui nesse primeiro contêiner eu vou zerar aqui eu vou colocar 10 na direita e 10 na esquerda vou ter que colocar um pouquinho mais 15 e 15 ó eu tô ajeitando aqui porque aqui ó vai ficar uma barra branca aqui ó vai ficar meio quebrado o le do site né então tem essa necessidade aqui da gente fazer os ajustes tá ainda aqui vamos colocar um 20 e um 20 para ver como que vai ficar ó ainda não tá bom vamos voltar
aqui nesse carrinho e vamos zerar o pading Agora sim agora vai dar perfeito agora eu venho aqui vou deixar ele assim tá voltar aqui para uns 15 e aqui para uns 15 ó ficaria assim então no celular Vamos só ajeitar esse menu aqui V clicar no menu botão alternar vou deixar ele preto e a cor de fundo transparente quando passa o mouse ou seja não é passar o mouse na verdade né quando clica né porque é no celular fica assim ó Beleza vou vir aqui vou deixar aqui em largura total em Sim vamos ver como
que ficou agora aí agora assim ó agora já tá mais bonito aqui o nosso menu beleza esse pesquisar aqui eu posso deixar ele um pouco menor se eu quiser V colocar uns 10 aqui na direita e uns 10 na esquerda aí mais pequeno beleza ficaria assim então o nosso menu no celular assim no tablet e assim no desktop Deixa eu só ajustar aqui que ele puxou para cá aí agora assim ó tudo bonitinho beleza e beleza é só você seguir aqui o que eu tô fazendo que não tem erro tá muito importante agora vou clicar
em publicar adicionar condição todo o site ou seja eu quero que esse cabeçalho ele apareça no site inteiro Vou salvar e fechar beleza vamos vir aqui na nossa página inicial agora e ó já tá aparecendo aqui então o cabeçalho do nosso site agora vamos criar aqui o rodapé da nossa loja virtual que também não tem muito mistério né a gente vai utilizar o mesmo princípio né vou voltar aqui ã modelos construtor de tema ó então a gente já tem o cabeçário né vou vir aqui em rodapé ou fter né Vamos clicar no mais aqui vai
abrir o elementor mais uma vez vou fechar aqui ó aqui tá aparecendo send no cabeçário tá a gente vai vir aqui embaixo e vamos fazer o rodapé ó vou usar o mesmo esquema aqui ó selecionar uma estrutura aqui com quatro contêiners Vou colocar aqui na cor ã Preto detalhe que o a largura vou deixar padrão 1140 vou vir aqui avançado eu só vou adicionar aqui un 100 pixels inferior e um 100 pixels superior daí eu venho aqui no mais vou adicionar uma imagem e vamos pegar aqui nosso logotipo assim vou fazer o mesmo esquema aqui
ó dar um cont control c aqui e colocar nossa página inicial vou clicar aqui também vou vir em pixels 150 pixels e aqui eu vou deixar assim e assim contêiner tá vamos ir aqui no Mais também vamos adicionar um título aqui aqui eu vou colocar aqui atendimento eu quero colocar aqui o horário de atendimento da minha loja virtual né E daí Vale ressaltar que enfim a loja ela é sua né E você vai configurando aí da maneira que faz sentido para você pro seu negócio tá eu espero que você pegue bem a ideia tá vou
vir aqui ó vou arrastar outro título para cá vamos colocar aqui por exemplo segunda na sexta das 8 às 18 tá só como exemplo mesmo vamos dar uma quebra de linha aqui vamos colocar sábado das 8 às 12 enfim só como exemplo tá aqui para dar uma quebra de linha Ó você faz isso aqui ó coloca BR assim ó você pode ver que quebrou a linha tá eu venho aqui no estilo por Branca tipografia secundária assim agorao pegar isso aqui ó copiar vi aqui colar Vamos colocar aqui por exemplo o endereço e daí você personaliza
aí com as suas informações vamos adicionar aqui um texto aqui embaixo assim vamos só reduzir esse texto aqui assim cor branca tipografia secundária Vamos colocar também redes sociais assim vou vir aqui no mais vou pesquisar aqui por social e tem essa opção ó ícone sociais vou arrastar para cá e coloquei a dinâmica aqui então aqui tem o nome da rede social tem o ícone da rede social que você pode trocar aqui pelo ícone que você quiser e aqui no link você coloca o link da rede social então vou deixar aqui por exemplo ó vamos trocar
aqui vamos colocar o Instagram Cadê o Instagram aqui Vamos pesquisar a aqui ó Instagram ó tá aqui inserir aqui eu colocaria o link do Instagram aqui tem o YouTube colocar o link do YouTube Vamos adicionar mais um item tem o WhatsApp aqui ó WhatsApp inserir aqui eu colocaria um link para o WhatsApp beleza alinhamento Vou deixar pra esquerda assim e aqui no estilo vou colocar uma cor personalizada e aqui a cor primária Ó você consegue ajustar vou deixar transparente a cor secundária aqui eu vou deixar Branco quando passa o mouse a cor secundária eu quero
que fique assim ó você pode configurar animações também quando passar o mouse enfim fica o seu critério tamanho vamos deixar aí uns 20 pixels o preenchimento eu vou deixar assim e o espaamento assim deixar uns 20 pixels também beleza tá ficando assim então o nosso roda pé esse aqui eu posso até diminuir um pouquinho aqui vamos ver para uns 20 esse aqui 25 esse aqui uns 30 enfim você faz gestão ali naquele mesmo esquema né que você vai ajustando aí conforme a tua necessidade vou adicionar aqui também uma uma barquinha final aqui Vamos colocar deixa
eu ver uma coracin um pouquinho diferente ó para você colocar aquele textinho de todos os direitos reservados e tal posso até pegar esse texto aqui ó copiar ele já tá formatado né colar ó vim aqui só centralizar né e da aqui eu digito o texto né então todos os direitos reservados você coloca o CNPJ da da sua empresa eí se fizer sentio enfim é interessante para passar a credibilidade beleza Vamos colocar aqui só como exemplo mesmo aí beleza posso até reduzir um pouquinho essa fonte aqui para uns 13 assim para ficar menor ainda esse contêiner
aqui vou colocar um preenchimento de 20 superior e 20 inferior ó então ficaria assim o rodapé da nossa loja virtual aí se você quer você adiciona mais informações e tal Opa ainda não vou publicar não vamos ver como é que tá aqui nos outros dispositivos tá ó no tablet tá ficando assim então não vou mexer e no celular assim então aqui no celular eu só vou deixar tudo Centralizado olhá esse contêiner aqui deixar assim [Música] assim ao centro esse aqui também ao centro E esse aqui também tudo Centralizado Vamos só diminuir também aqui esses espaçamentos
aqui vou deixar só uns 20 inferior aliás 20 superior e 20 inferior aqui nesse atendimento eu vou dar uma Marinha ali para separar um pouco e uma marzin negativa de uns 10 Ó daí eu pego aqui ó copio venho aqui cola estilo ven aqui cola estilo esse aqui vamos só dar uma ajustada [Música] personalizado assim vamos colocar em porcentagem aqui 90% assim esse textinho aqui posso até diminuir um pouquinho mais para ficar bem ali de final mesmo ó ficaria assim então no celular só esse texto aqui vamos centralizar ele aí ó uma visualização bem legal
bem agradável assim no tablet e assim no desktop vou clicar em publicar Agora sim adicionar condição todo o site salvar e fechar vamos voltar aqui na minha página inicial ó tá assim então agora vamos fazer a criação então da nossa página de home né que é uma das páginas mais importantes do nosso site vou voltar aqui pro meu painel do WordPress vamos vir aqui em páginas todas as páginas aqui tá a página de home tá vou clicar aqui em editar aqui vai abrir o editor padrão aqui de blocos enfim só que não é aqui que
a gente vai fazer a gente vai editar também com o elementor tá então vai abrir mais mais uma vez o editor do elementor e a primeira configuração muito importante aqui que você tem que se atentar é a seguinte ó você vai vir aqui em configurações da página layout da página aqui a gente tem algumas opções tá se você coloca tela do elementor aqui ele vai puxar uma página em branco não vai puxar nem o cabeçário nem o roda pé se você deixa padrão ele vai puxar o cabeçário o rodapé E esse título aqui que a
gente não quer que apareça tá então o que você vai fazer aqui é colocar elementor largura Total colocando elementor largura Total ele vai puxar apenas o cabeçalho e o roda pé e aqui a gente é livre agora pra gente criar do jeito que a gente quiser então primeira coisa que eu vou fazer aqui vou adicionar um contêiner pode ser esse aqui mesmo e agora eu quero falar um pouquinho aqui sobre os banners que eu vou utilizar no fundo tá Então olha só eu vim aqui no canva e eu fiz a criação aqui de dois banners
tá deixa eu vir aqui no meu computador eu inclusive já baixei eles aqui ó só para você entender o tamanho desses banners é 1290 pixels de largura e 780 pixels de altura então aqui no canva quando você criar os banners tá inclusive você vem aqui em design ó já tem vários ã modelinhos prontos né você vem aqui no no canva enfim e e pesquisa ali por criar banner para pra loja virtual Eles já vão vir nesse mesmo tamanho ali que eu mostrei tá que é o tamanho ideal nesse meu caso aqui eu criei manualmente um
tá então o que que eu fiz aqui eu coloquei um fundo preto uma sombra aqui ó e uma imagem tá simples assim ó salvei assim e fiz o download tá baixei esses dois aí nesses tamanhos ali que eu mostrei beleza 1920 por 780 a altura aqui pode variar tá Ah não precisa ser exatamente 780 pode ser 700 800 1000 enfim vai depender aí do seu projeto Ok mas é nessa base tá se ficar qualquer dúvida referente a ao tamanho da imagem e tal você deixa aí nos comentários inclusive aqui no canal eu tenho também um
vídeo aí específico sobre tamanho das imagens para você utilizar no WordPress e eu explico mais a fundo como que funciona mas não tem muito mistério Ok eu vou vir aqui ó no contêiner estilo e eu vou colocar uma imagem de fundo Então vou selecionar aqui no meu computador o banner ali que eu criei eu vou selecionar esse aqui primeiro vou abrir vou clicar aqui em selecionar muito importante agora eu vou fazer as configurações aqui do contêiner então resolução da imagem completo posição centro anexo ã rolar ou fixo fixo fixo é isso aqui ó eu vou
deixar H rolar repetir não repetir tamanho cobertura agora eu vou vir aqui no layout a largura eu vou deixar padrão aqui não precisa colocar 1920 tá porque ele já vai puxar automaticamente porém a altura eu vou colocar os 780 pixels ó então ficaria assim o banner Inicial aí né Do meu site posso estar clicando aqui ó para ver em uma nova guia ó ele vai ficar assim tá detalhe que aqui pessoal eu aumentei bastante o zoom aqui para ficar melhor pra gente enfim para apresentar as informações mas abriria assim ó ó aqui diminui também um
pouquinho o zoom Beleza agora dentro disso aqui eu posso adicionar os textos né então vamos adicionar aqui um título e vamos adicionar aqui uma descrição daí eu pego isso aqui ó eu coloco ao centro assim coloco alinhado aqui no início ainda aqui nesse título eu venho aqui largura personalizado 50% esse outro aqui mesma coisa largura personalizado 50% para quê para ficar só desse lado esquerdo né então do lado direito você vê que eu tenho o elemento né eu tenho a imagem aqui né do meu banner e do lado esquerdo eu coloco o texto né eu
faço isso justamente para dar contraste né porque se eu colocar o texto aqui em cima da imagem talvez não fique uma visualização tão agradável Beleza agora eu vou voltar aqui noart GPT e eu vou pegar aqui os meus textos ó vir aqui V copiar esse texto de Claro você digita aí o texto que você quer ou gera com inteligência artificial inclusive aqui o próprio elementor ó você pode tá fazendo aqui enfim gerando com inteligência artificial tá é só você clicar aqui para iniciar porém ele é um serviço aí pago à parte então enfim não sei
se tem uma uma versão grátis tá até um tempo atrás tinha uma versão grátis depois você precisava pagar tá porém atualiza muito rápido então você pode est explorando essa ferramenta aqui de Inteligência Artificial e gerando seus próprios textos com inteligência artificial ou fazer como eu fiz ali e aqui no chat GPT que é gratuito né E você faz aí o mesmo esquema Vamos colocar aqui é a fonte beleza esse titulo Zinho aqui ó que é essa descrição ó aí não vou copiar tudo para não ficar muito grande Opa deixa eu fechar aqui beleza vou vir
aqui ó vou dar um cont control V aqui perfeito vou colocar isso aqui na cor branca e na minha tipografia secundária desse jeito assim posso vir aqui em cima também e adicionar Um textinho de bem-vindo desse jeito assim Porém Aqui eu vou ajustar para uma fonte ã menor vou deixar assim beleza cor aqui ó tá praticamente pronto aqui o banner inicial do nosso site né A primeira parte aqui do nosso site ó no tablet ficaria assim e no celular é assim vamos ajustar aqui no celular ó vou pegar esse título aqui vou vir avançado Então
você lembra que aqui ó no computador eu botei PR ele aparecer 50% só do elemento aqui no celular ele já Puxa esse 50% Porém Aqui eu quero que ele apareça 100% esse outro texto aqui a mesma cois eu quero que ele apareça 100% e esse texto aqui eu vou diminuir o tamanho dele eu vou colocar aqui um tamanho 36 assim tá esse outro aqui eu posso dar uma diminuída também tamanho 14 beleza aqui não ficou espaço entre o cabeçário aqui deixa eu só publicar essa página eu vou voltar aqui no meu cabeçário ó ó nesse
momento tô editando cabeçário vou vir aqui avançado Vamos dar um espaçamento assim deixa eu ver de uns 15 mais ou menos aí agora sim publicar vou voltar aqui pra minha página agora ainda aqui na página ó posso vir aqui em estilo e aqui colocar uma posição diferente ó Então você configura aqui de uma maneira que vai ficar legal eu vou deixar padrão meu centro ao centro que eu acho que ficou legal desse jeito assim beleza vamos ir mais para baixo aqui eu vou adicionar aqui também uns iconeinstagram aqui mas eu vou adicionar mais um contêiner
assim e aqui eu vou pesquisar por caixa de ícone assim né então aqui eu vou colocar por exemplo ã compra 100% segura compra segura só assim aí aqui você coloca uma descrição tá vou deixar assim aqui no ícone você muda o ícone Vamos pesquisar aqui por cadeado aqui tá tudo em inglês tá pessoal os íconos Então tem que pesquisar em inglês mesmo beleza aí vem aqui no estilo ó eu altero a posição desse ícone vou deixar assim ã aqui no conteúdo a cor do título E também o tamanho desse título vamos reduzir aqui esse tamanho
vamos deixar um tamanho 18 mesmo assim e aqui a descrição mesma coisa né Vamos alterar a cor aqui tipografia pode deixar até um pouquinho menor assim uns 14 vamos voltar aqui regula o espaçamento do ícone e aqui o espaçamento do conteúdo vou deixar assim esse ícone aqui deixa eu ver eu posso mudar ele Cadê aqui posso deixar ele assim ó por exemplo aí eu venho aqui ícone Vamos diminuir um pouquinho o tamanho e a cor primária vou botar assim e a cor secundária vou botar assim ó então compra segura aí você pode pegar isso aqui
ó copiar vim aqui e colar e vi aqui e colar Deixa eu só ver como é que tá configurado isso aqui 33 33 e esse aqui 33 perfeito agora sim daí eu venho aqui nesse segundo ó e aqui eu mudo o título colocar aqui por exemplo satisfação garantida Vamos mudar o ícone aqui e colocar aqui enviamos para todo o país assim vamos botar um aviãozinho aqui beleza ainda aqui esse contêiner eu vou colocar ele uma corzinha um pouco diferente para ele diferenciar dos outros tá um leve tom de cinza beleza vamos no tablet tablet ficaria
assim no celular ficaria assim aqui no celular vamos ajustar melhor isso aqui vou colocar aqui 50 20 50 e 20 eu vou dar um espaço aqui deixa eu ver vou pegar esse aqui vou dar um espacinho inferior aqui de uns 15 para ele ficar um pouquinho mais longe tá ó assim então no celular aqui no celular se você quiser você pode configurar um alinhamento diferente ó eu vou deixar Centralizado que eu achei legal beleza ó posso estar clicando aqui em publicar para não perder Aí o processo que eu estou fazendo beleza que você clica também
ó para ver como é que tá ficando em uma nova aba eu só vou dar um espaçamento aqui na direita de um 50 pixels para ficar em duas linhas aqui tá aqui no tablet não vai ficar e no celular também não só aqui vai ficar esse espaçamento Ó daí eu venho aqui eu colo e eu colo ficando desse jeito assim então beleza vou adicionar mais um contêiner aqui vamos configurar agora aqui uns 100 pixels superior e um 100 pixels inferior aliás esse aqui eu vou ajustar também aqui o o preenchimento porém não vou deixar 100
vou deixar em 50 e 50 desse jeito assim beleza vamos ver aqui no mais vamos adicionar um título então aqui eu vou colocar confira nossas novidades assim vou colocar ele na cor preta Centralizado aqui beleza agora vem a parte mais legal né Eu vou vir aqui ó a gente tem o o básico o pro o geral link na biografia site único o aqui ucommerce olha só aqui a gente tem as opções do ecommerce Então vou arrastar para cá produtos e olha só que legal automaticamente ele já vai puxar aqui os produtos da nossa loja virtual
Claro que ele tá tudo bugado aqui né porque ele tá puxando a fonte principal né para isso eu venho aqui em estilo produtos aqui no título ó vou colocar uma cor preta e a fonte e a Fonte secundária aliás posso até aumentar um pouquinho aqui Sei lá deixar um tamanho 18 e um peso 600 desse jeito assim aqui o preço também vamos colocar menorzinho aqui o preço normal também ó agora já tá ganhando forma tá vamos colocar aqui a nossa cor então aqui você vai configurar item por item aqui o botão também vamos ajustar aqui
o botão tipografia secundária a cor do texto aqui eu vou deixar azul e a cor do fundo eu vou deixar preta desse jeito assim aliás cor do texto vai ficar branco que eu acho que fica mais bonito assim ó então você vai configurar aqui item por item aqui o arredondamento do botão ã espaçamento enfim alinhar botões automaticamente recomendo deixar ativa essa opção essa oferta relâmpago aqui eu vou desativar V porque eu não acho tão legal vou voltar aqui em produtos aqui ó o espaçamento Deixa eu só vir aqui em conteúdo aqui você vai escolher quantas
colunas e quantas linhas você quer que apareça tá nesse caso aqui eu vou deixar só duas linhas assim porm quatro colunas tá mas aqui você pode mudar por exemplo lá botar três ó fica assim vou deixar em quatro mesmo e aqui na consulta você vai escolher os produtos que vão aparecer aqui né então aqui eu vou deixar padrão como produtos recentes mas aqui você pode configurar manualmente ou enfim colocar uma categoria em específico para aparecer aqui beleza enfim a lja virtual é sua e você faz essa gestão da maneira que você quiser Ok vindo aqui
ó a gente tem o espaçamento da coluna Deixa eu botar no máximo aqui para ver como que fica em 100 desse jeito assim e aqui o espaçamento das Linhas vou deixar uns 50 mais ou menos ó então ficaria assim Vamos só ver esse título aqui talvez aumentar um pouquinho mais assim Acho que for melhor assim ó está assim então a nossa loja virtual vamos ver aqui no tablet o tablet Vamos dar um espaçamento diferente aqui vai ficar 100 20 100 20 no tablet aparece por padrão TRS né e no celular aparece dois ó desse jeito
assim então mas aqui você consegue vir aqui ó e configurar se você quer que apareça um por exemplo Ok esse título aqui vamos reduzir para 36 aliás uns 30 assim e aqui vamos deixar assim 50 20 50 e 20 Olha fica assim então no celular Lembrando que aqui ele mostra o celular mais eh com resolução menor né porém maioria dos celulares vai abrir mais ou menos assim ó assim talvez vai abrir maiorzinho tá pessoal ó então ficaria mais ou menos assim Ok vou clicar aqui em publicar vou vir mais embaixo Aqui eu vou adicionar mais
outro ã outro banner aqui né eu posso inclusive pegar esse aqui ó copiar vir aqui embaixo e colar daí eu venho aqui ó e eu mudo a imagem vamos pegar outra imagem lá ã essa aqui ó aqui vou selecionar olha daí nesse caso aqui ó eu vou clicar nesse contêiner eu vou colocar os elementos aqui pro fim ó esse texto aqui esse outro texto assim e esse outro texto assim vamos só mudar aqui vamos ver cadê cadê Aqui ó vamos colocar uma uma headline diferente aqui para né não ficar igual lá assim e aqui uma
descrição vou dar um Ctrl C aqui vou vir aqui e vou dar um control V assim beleza aqui interessante também eu adicionar um botão vem aqui no básico ó um botão aqui E esse botão direcionar o usuário para ele ver todos os produtos tá vou clicar aqui aliás digitar aqui em ver produtos aqui você coloca daí o link da da página de produtos tá deixa eu só abrir aqui numa nova guia para você entender melhor Ó você vem aqui em páginas todas as páginas aqui a página de loja ó vou copiar esse endereço aqui eu
vou vir aqui eu vou colocar o link aí tipo aqui na na home o usuário Talvez ele só vai ver a as novidades né Lembrando que aqui você consegue como eu mostrei ali configurar quantos produtos você quiser nesse caso aqui só tá aparecendo oito mas aqui se você quiser sei lá colocar 100 produtos Aí você coloca tá bom a loja é sua né E aqui ó quando clica em ver produtos daí vê todos os produtos da loja tá vamos adicionar uma uma flechinha aqui para ficar mais bonito assim a cor do texto aqui vamos deixar
preto e aqui dessa cor assim ó tipografia secundário assim beleza ó posso aumentar também um pouquinho o peso aqui aqui ó assim ó clicou em ver produtos abre ele completo aí no tablet ó no celular ele já ficou enfim desse jeito assim ah vamos só excluir esse bem-vindo aqui né ó aqui no celular se você quiser você centraliza aqui pro ao centro ou pra direita enfim como eu falei né o site ele é ele é seu a loja virtual é sua e você vai configurando aí conforme faz sentido para você tá vamos clicar em publicar
aqui aqui embaixo agora tem várias opções né Você pode adicionar depoimentos por exemplo aqui ó deixa eu mostrar aqui no pro ó aqui a gente tem algumas opções bem interessantes né Deixa eu ver Cadê os depoimentos aqui ó Carrocel de depoimentos ó então você pode colocar depoimentos de de clientes deixa eu ver aqui três ó depoimento de clientes aqui para ir passando tá ou você pode colocar sei lá umas eh perguntas frequentes pesquisar aqui por ã Abas aliás sanfona aqui ó Você pode adicionar ã perguntas frequentes enfim é o que fizer sentido para você tá
tem várias opções aqui você pode estar explorando isso aqui né adicionar vídeo ã enfim o elementor é muito você explorar né você aprender aqui como que funciona tá no meu caso aqui eu vou adicionar as categorias tá mas aí você faz da maneira que você achar legal beleza então vou vir aqui no maizinho aliás aqui eu posso pegar isso aqui ó esse contêiner inteiro copiar vou virm aqui eu vou colar vou excluir esses produtos aqui colocar aqui categorias assim vou vir aqui no mais vou adicionar contêiner vou clicar nesse contêiner direção linha horizontal vou clicar
aqui no mais e vou adicionar outro contêiner e daí eu vou duplicar e vou duplicar e vou duplicar assim tá aqui no meu na minha loja virtual pessoal eu só tenho quatro ã categorias Beleza então por exemplo eu vou arrastar aqui uma imagem para cá ó vamos pegar aqui uma foto que eu já tenho pronta aqui de notebook mesmo a assim aqui no link Vamos colocar URL personalizado e agora vamos vir aqui no meu painel do WordPress vamos vir aqui em produtos categorias aqui ó vamos pegar os links das categorias e colocar lá né então
por exemplo aqui ó notebooks ó aqui em ver eu vou copiar o endereço do link eu vou vir aqui e eu vou colar o endereço do link eu posso vir aqui também ó vamos duplicar aqui vamos colocar aqui embaixo vamos digitar aqui note books e vamos reduzir né para não ficar tão grande também colocar um tamanho 18 Ó daí quando a pessoa clica aqui em notebooks também aqui no link ó eu posso vir aqui também ó copiar endereço do link e colar o link ainda aqui nessa imagem eu posso adicionar uma borda ela ó vamos
colocar aqui uma borda largura dois cor preto o raio da borda aqui vamos deixar bem Redondo assim ó ó poderia deixar assim vamos deixar um três um quatro aliás assim ó ó de usaro clica ele vai lá para a categoria em questão Beleza ainda aqui na imagem ó o que que é legal você fazer aqui eu passar o mouse diminuir por exemplo o brilho aqui ó vamos ver como que fica ó ficaria assim ó botar mais brilho não botar mais brilho não fica tão legal assim ó Ó aqui tá a categoria vamos ver se dá
para reduzir um pouquinho essa imagem Talvez assim ó no tamanho que fica mais proporcional né E daí você pega isso e você só vem aqui ó e duplica ó vou excluir aqui vou excluir esse outro vou vir aqui vou duplicar e aqui eu vou duplicar e ainda nesse contêiner aqui eu posso diminuir um pouquinho ele e colocar o centro assim Vamos diminuir um pouquinho mais assim aliás eu tenho que vir nesse outro aqui esse assim colocar o centro assim ó vamos trocar as imagens aqui então Vamos colocar aqui por exemplo ã joysticks ó daí você
vem aqui e coloca o link dos joysticks né da categoria Aqui vamos trocar Vamos colocar aqui ã consoles assim essa outra aqui vamos trocar também vamos colocar aqui eh headsets ó da em cada uma você vem aqui e coloca o link da categoria ó ficaria assim então nossa página inicial vamos ver aqui no celular aqui no celular ó dá pra gente diminuir um pouquinho esses textos aqui colocar até um pouquinho mais próximo aqui assim ó eu venho aqui ó copiar colar estilo colar e colar ó ficaria mais ou menos assim então no celular nossa loja
virtual assim no tablet e assim no desktop Então nesse momento a gente já tem praticamente pronta aqui a nossa página inicial né a principal página aqui do nosso site nossa loja virtual vamos ver como que ficou ó tudo bonitinho então só você seguir aí a mesma linha de raciocínio a mesma ideia Tá bom agora que que falta a gente fazer então falta a gente fazer ainda a página de produtos né vou clicar aqui em ver produtos ó vamos personalizar vamos ajustar bonitinha essa página de produtos a página aqui de resultado de pesquisa também ó vou
fazer uma pesquisa aqui ó tá toda feia né Vamos ajustar isso também vamos clicar aqui no um produto aqui no produto Vamos colocar aqui uma calculadora de frete também e vamos personalizar essa página individual de produto depois vai ter esse esse menuzinho aqui do carrinho também que a gente vai personalizar aqui o ver carrinho ó a gente vai personalizar isso aqui também a gente vai personalizar a página de finalização de compra aqui tem a página de minha conta também que a gente vai personalizar Além disso tem a página aqui de contato né porque a gente
vai colocar ali um formularz inho de contato e tal e mais algumas outras configuraçõe zinhas aí que a gente vai estar fazendo então na nossa loja virtual beleza e bom para agilizar o nosso processo aqui olha só eu vou vir aqui em editar com elementor vai abrir o editor do elementor mais uma vez e eu vou deixar essa nossa página de home aberta aqui nessa aba aqui do navegador tá porque eu vou pegar alguns elementos prontos aqui para mim conseguir colar já nas outras páginas isso vai otimizar bastante nosso processo beleza bom vou vir aqui
então aqui tem outra aba ó então aqui fica a home e aqui é outra aba do WordPress Tá eu vou vir aqui em modelos construtor de tema agora eu vou vir nessa opção aqui ó arquivo de produtos tá que essa aqui vai ser a página de loja então vou vir aqui e vou adicionar um novo modelo eu vou fechar aqui ã vou vir aqui no maizinho aliás vou pegar aqui ó isso aqui ó eu vou copiar eu vou vir aqui e eu vou colar só para você entender melhor ó eu vou excluir isso aqui eu
vou colocar aqui produtos e eu vou vir aqui eu vou tirar essa imagem aqui eu vou deixar o fundo preto mesmo assim e a altura aqui eu vou colocar sei lá uns 400 pixels esse textinho aqui eu posso deixar ele ao centro desse jeito assim aliás aqui dá para colocar menos ainda uns 300 tá bom o que que eu vou fazer agora vou vir aqui no maizinho flexbox assim vou deixar tudo padrão aqui preenchimento sem superior sem inferior vou vir aqui no mais E agora tem essa opção aqui ó arquivar produtos Então vou arrastar pra
cá ó puxou assim tá porém agora vou vir aqui ó na minha home que tá aberta eu vou pegar isso aqui eu vou copiar eu vou vir aqui e eu vou colar estilo ó desse jeito assim então essa aqui vai ser a nossa página de loja de produtos né E você vê que já tá toda já otimizada né Porque eu só copiei e colei Ok só vamos ajustar aqui no tablet assim aqui no celular Vamos colocar só uns 50 aqui 50 20 5020 ó assim no celular assim no tablet e assim vou clicar em publicar
adicionar condição todos os arquivos de produtos vou clicar em adicionar outra condição aqui e também eu vou colocar categorias de produto todos Vou salvar e fechar vamos vir aqui na minha página Inicial vamos vir aqui em loja e ó nesse momento você vê que aqui vai puxar todos os produtos que eu tenho na minha loja já tá configur tá vou voltar aqui na home vou vir até embaixo Aqui na na categoria ó categoria notebooks vou clicar aqui ó Já puxou tudo bonitinho tá antes estava desconfigurado agora cada categoria que você abrir vai puar tudo bonitinho
aqui os itens dessa categoria Beleza agora vamos vir aqui também no painel modelos construtor de tema resultados da pesquisa vou vir aqui vou adicionar um novo modelo e eu vou fazer parecido com o que eu fiz ali vou fechar aqui ó vamos pegar aqui isso aqui ó vou copiar vou vir aqui vou colar vou excluir vou excluir Vou colocar aqui resultados da sua pesquisa assim Vou colocar aqui 100% Centralizado vamos vir aqui vamos tirar essa imagem colocar na cor preta e aqui 300 pixels igual eu fiz lá ó beleza agora que que eu faço adiciono
outro contêiner aqui aí vou deixar assim aqui já vou deixar em 20 em 20 ou vir no maizinho arquivar postagens ó vou arrastar para cá e agora é só a gente configurar aqui colunas eu vou deixar quatro tamanho da imagem completo aqui a proporção eu vou deixar em um que ela fica quadrada né vou tirar esses comentários aqui essa data também aqui tem esse botão de ler mais né colocar aqui ã ver produto assim vamos só mexer aqui no título deixar a cor secundária assim aliás cor preta né tipografia secundário aumentar um pouquinho aqui o
tamanho beleza esse ver produto aqui vamos deixar nessa cor assim cor secundário Beleza eu vou tirar aqui no conteúdo o resumo assim beleza ficaria assim tá esse esse aqui é um errinho aqui que tá dando tá pessoal isso aqui pode ignorar beleza vamos ver aqui no tablet ó ficaria assim e no celular ficaria assim vamos só ajustar aqui a proporção da imagem para dois assim e colunas para dois também ó Beleza eu vou clicar em publicar e isso aqui ele vai estar incluído aí nos resultados de pesquisa então vou salvar e fechar beleza vamos voltar
mais uma vez aqui na nossa página inicial vamos vamos pesquisar aqui por Play por exemplo ó resultados da pesquisa ó vai aparecer aqui os produtos beleza fazer outra pesquisa ó tá aqui Então beleza vamos voltar aqui na página inicial e agora vamos personalizar então a página individual de produto que é essa página aqui que tem o produto beleza antes disso eu vou configurar aqui a calculadora eh de frete ali para aparecer na página do produto tá para configurar essa calculadora a gente vai precisar de um plugin específico para essa função tá pois nativamente não tem
essa função aqui então para isso eu vou vir em plugins adicionar plugin Vou pesquisar aqui por simulador de frete vamos ver se vai aparecer aqui ó simulador de frete para o comerce Tá eu vou instalar esse plugin aqui plugin instalado vou clicar em ativar beleza ó aqui nos plugins ó eu vou clicar nas configurações esse plugin e vou deixar ativado tá detalhe que aqui olha só ele dá esse short code Tá eu vou copiar esse short code aqui ó copiei e eu vou colar lá na página individual do produto tá aqui tem algumas configurações ó
que você pode estar ã fazendo tá então nada de muito diferente Beleza então vamos lá então criar agora essa página individual de produto para isso eu vou vir aqui em modelos construtor de tema produto individual e vamos adicionar o modelo Então como que vai funcionar eu vou clicar aqui no mais vou adicionar um flexbox vou selecionar esse aqui tá vou deixar tudo padrãozinho aqui daí vai vir no maisin e aqui ó já tem Enfim tudo preparado aqui né tudo pronto só pra gente adicionar então por exemplo primeira informação importante aqui que eu vou adicionar são
as imagens do produto ó vou arrastar para cá deixa eu só vi aqui nas configurações visualizar configurações eu vou colocar aqui o PlayStation 5 ó que eu adicionei todas as imagens daí vai puxar as informações dele aqui tá ó tá aqui então deixa eu tirar esse oferta aqui você regula então o espaçamento isso aqui é padrão tá pessoal em todas as páginas e todos os produtos vai puxar automaticamente aqui a imagem beleza aqui as miniaturas Ó tipo de borda Você pode adicionar uma bordinha assim né Vamos colocar aqui largura um cor da borda Preto espaçamento
ó vou colocar assim então aí o usuário vai mudando aqui as imagens né vai puxar automtico lá vou vir aqui no maizinho também vamos adicionar então o título do produto ó aqui Já puxou automaticamente vamos configurar aqui a cor preta assim vamos vir aqui no mais vamos ver Dá para colocar aí do jeito que você quiser tá Ah quer colocar o preço do produto a descrição vamos ver aqui o conteúdo do produto ó vou arrastar para cá ó puxou toda a descrição da eu venho aqui coloco na minha fonte beleza vamos adicionar também o preço
do produto ó vou colocar aqui embaixo o preço ó puxou o preço Então vamos só configurar aqui a fonte Beleza eu vou vir aqui também eu vou pesquisar por short code desse jeito assim vou arrastar para cá e vou dar um control V para colar aqui a minha o meu short code aqui do Plugin simulador de fr tá E nesse momento você vê que já aparece aqui ó a opção pra pessoa simular o frete Ok vou vir aqui no maizinho também ah muito importante colocar a página aqui para colocar o produto no carrinho né então
vou arrastar para cá ó vai aparecer assim então a quantidade em stoque e tal você pode estar mudando aqui vamos só personalizar esse botão vou deixar ele na cor preta assim beleza aqui a quantidade você consegue tá mudando também né interessante deixar né pro usuário conseguir selecionar a quantidade que ele quer aqui as variações também você consegue personalizar da maneira que você quiser Beleza então aqui Você faz toda essa gestão Ok vamos vir aqui no Mais também Ahã deixa eu ver que mais que dá para colocar aqui metadados do produto ó vou arrastar para cá
também aqui então vai puxar a categoria aqui logo abaixo do título vamos trocar a cor aqui assim tipografia beleza E daí fica o seu critério né aí o que que você quer ir adicionando Beleza deixa eu ver conteúdo do produto já foi vou adicionar essa opção aqui de informações adicionais aqui embaixo assim ó vamos só ajustar aqui tipografia aqui eu vou reduzir um pouquinho beleza ó ficaria mais ou menos assim então aqui eu vou vir aqui na minha página de de home eu vou pegar aqui esse contêiner já Pronto né pra gente economizar tempo vou
vir aqui vou colar aqui eu posso colocar sei lá produtos relacionados desse jeito assim e aqui nos produtos eu venho em consulta aqui tá os mais recentes no caso eu coloco relacionados aqui puxou só um ou seja esse produto aqui ele é da mesma categoria que esse aqui que eu tô cadastrando tá E daí puxou só um produto Claro na sua loja virtual aí você vai ter vários e vários produtos né então vai tá puxando todos os produtos relacionados aqui embaixo Ok no tablet ficaria assim no celular aqui ol ele já tá todo configurado só
que eu vou ter que dar uma margem negativa nisso aqui porque ele tá um pouquinho para cima aí vou deixar assim mais ou menos esse texto aqui vamos colocar ele menorzinho assim perfeito Beleza vou vir aqui ó exibir condições produtos salva e fecha ó vamos voltar aqui na página inicial Então vou vir aqui em loja vou selecionar aqui um produto ó todos os produtos que você vai que você abrir né vai abrir aqui as imagens dele né tudo bonitinho aqui o CP ó enfim o usuário vai vir aqui vai preencher o CP vai aparecer a
taxa então para esse CP né enfim a taxa que você configurou antes lá aqui a quantidade os produtos relacionados beleza isso aqui então seria a página individual de produto vamos fazer aqui também pessoal a página de carrinho ó que faltou né que eu não tinha feito antes né então para fazer isso aqui a gente tem que editar aqui o cabeçário do site então você vem aqui em editar cabeçário né ou vem aqui no painel do WordPress vem aqui em modelos construtor de tema e vamos achar aqui o cabeçalho tá aqui vamos editar Beleza eu vou
abrir aqui ó daí aqui eu venho em estilo e aqui eu consigo fazer toda a edição tá por exemplo aqui ó os produtos ó vamos colocar ó a fonte ã secundária aqui eu posso aumentar um pouquinho o peso assim eu posso configurar a cor aqui no caso das variações né aqui o preço do produto ó vou deixar assim cor azul aqui desse jeito enfim você vai configurando aqui um por um aqui os botões ó eu vou colocar empilhado assim e a tipografia secundário assim vamos colocar só 600 assim beleza aqui a cor de fundo posso
deixar Preto vindo mais para baixo aqui o botão de finalização de compra cor de fundo vou deixar Preto aqui as mensagens ó vou deixar tipografia secundária né que enfim podem aparecer aqui deixa eu ver o que faltou aqui quantidade beleza Enfim vou deixar assim tá pessoal mas aí você consegue configurar mais a fundo aí né conforme for a tua necessidade tá aqui vai aparecer todos os produtos aí que tiver no carrinho Ok vou publicar aqui beleza vamos configurar agora a página de finalização de compra tá vamos só ver como é que tá ficando aqui vamos
ver aqui na loja Vamos abrir um produto ó tá aqui o produto né no caso ele já tá aqui no carrinho posso remover do carrinho Ó daí vai aparecer assim ó que as mensagens ali que eu configurei aí tô aqui ah adicionei no carrinho ó Comprei ó produto foi adicionado ao carrinho tá aqui o carrinho ó aí tem a página de do carrinho né de ver carrinho que é essa aqui e a página de finalização de compra né que a gente vai fazer agora então vou vir aqui no meu painel do WordPress vou vir aqui
em páginas todas as páginas página de carrinho então vou fazer de carrinho aqui primeiro tá vou editar aqui ó ele já abriu aqui um modelinho porém a gente vai editar com o elementor vai abrir aqui o editor do elementor mais uma vez eu vou clicar nessa página de carrinho eu vou vir aqui o layout dessa página vai ser elementor largura total e eu vou excluir tudo isso aqui ó e vou adicionar um novo contêiner Vou colocar aqui 100 pixels Opa assim 100 pixels 20 1002 vou vir aqui no maizinho agora vou vir aqui nas opções
do ucommerce aqui ó aqui a gente tem então carrinho doce ou carrinho ó vamos arrastar o carrinho para cá ó pode ver que agora a página de carrinho ela ficou bem mais bonita do que ela tava antes tá então você consegue fazer toda a personalização dessa página de carrinho aqui ó você consegue mudar os textos aqui tem a opção de cupom também se enfim você pode estar criando cupom lá no comerce aqui o valor total aqui no estilo Ó você pode mudando o fundo nesse caso vou deixar branco mesmo ó ficaria assim a página de
carrinho inclusive aqui em cima ó eu consegue vir aqui vou adicionar aqui um contêiner altura 300 a cor vamos colocar aqui cor preta e vamos adicionar um título vamos escrever aqui carrinho assim ó vamos deixar Centralizado aqui beleza assim ó ficaria assim então a nossa página de carrinho daí você personaliza aqui os botões você personaliza todas as informações do jeito que você quiser enfim como ficar melhor aí para você pro seu negócio ok aqui no celular já fica automaticamente tudo otimizado eu vou publicar eu vou voltar aqui no meu WP admin todas as páginas agora
a página de finalização de compra a gente vai utilizar esse mesmo princípio ó editar com elementor Deixa eu voltar aqui no meu WP admin porque eu quero eu quero pegar aquele banzin pronto ali esse aqui ó Cadê carrinho aqui editar com elementor esse baninho aqui ó isso aqui você pode colocar uma imagem se você quiser atrás ou Enfim fazer o que faz sentido para você ó vou copiar vou vir aqui vamos excluir isso aqui vamos colocar aqui elemento largura Total assim vou vir aqui vou colar e aqui finalização de compra agora que que eu faço
aqui também eu pego esse contêiner ó que ele tá pronto ó copio venho aqui colo vou excluir o elemento de carrinho vou vir aqui no ucommerce cadê ucommerce aqui e vou achar a opção aqui de checkout né ou seja finalizar compra aqui ó e aqui vai puxar então todas as informações de finalização de compra tá você consegue vir aqui ó arrumar o layout duas colunas ou uma coluna coluna direita fixa Ó você pode deixar fixa a coluna se fizer sentido para você e aqui você muda né você coloca aqui o nome da pessoa o sobrenome
nome da empresa enfim você faz toda a gestão aqui beleza aqui dá entrega também ó informações adicionais pedido eh cupom então aqui você vai mudar todos os textos né se porventura ver algum texto em inglês aqui você consegue estar mudando e aqui em estilo é a mesma coisa né você vem aqui e você muda toda a tipografia ó pode ver que aqui no caso são várias tipografias né são vários textos Então você muda texto por texto ó já fica tudo automaticamente aqui otimizado para o celular beleza vou vir aqui em publicar Mais uma vez vou
voltar aqui para o WP admin vou vir aqui em páginas todas as páginas vamos editar agora a página de minha conta editar editar com elementor a gente vai fazer o mesmo esquema tá pessoal então vocês vê que é bem tranquilo ó vou excluir isso aqui posso pegar aqui ó copiar vou vir aqui colar minha conta vou pegar o contêiner né Por quê Porque o contêiner ele já tá configurado ali com as estudo ó vou vir aqui vou excluir vamos achar o o comerce aqui e aqui ó minha conta ó beleza tá bem mais bonita a
página do que tava antes tá então essa página vai aparecer aqui aí pro pros usuários aí para eles se cadastrarem no seu site né aqui você faz as as traduções né você muda aqui o layout ó da da maneira que você quiser vou deixar assim em Abas aqui tem mais opções ó que você consegue est configurando mais a fundo aqui nas Abas ó vamos colocar aqui um plano de fundo assim ó ativo vamos deixar preto também quando passa o mouse plano de fundo vamos deixar Azul assim ativo assim a cor do texto ativo aqui vamos
deixar preto o normal aqui vamos deixar Branco só aqui no Rover essa cor aqui ó ficaria assim então tipografia secundário ó e os outros elementos aqui né você consegue est mudando também botando tudo com a sua tipografia ó no celular tudo bonitinho publicar Vamos acessar mais uma vez aqui a nossa loja virtual para ver como que tá ficando então Ó a loja tá aqui a barra lateral aqui do carrinho o carrinho tá assim o pagamento tá assim e a página de minha conta aqui que vai aparecer pro usuário ok bom nesse momento então o que
que falta a gente fazer falta a gente fazer aqui uma página de contato né é muito importante ter aí na sua loja virtual uma página de contato um formulário né pros usuários entrarem em contato tirando dúvidas ou enfim dando sugestões e tal Ok bom para isso então vou voltar aqui no meu painel do WordPress vou vir em páginas todas as páginas contato editar editar com elementor abrindo o editor do elementor mais uma vez layout da página elementor largura Total vou pegar aqui ó esse banzin pronto ó vou vir aqui vou copiar no caso aqui vai
ser contato né aqui em vez de digitar pessoal você pode fazer assim também ó vem aqui nas tag tags dinâmicas e aqui coloca título do post assim ó aí vai puxar automaticamente o título da página tá nesse caso eu optei por digitar mesmo ali mas enfim são formas diferentes de fazer a mesma coisa tá vamos ver aqui no maizinho vou adicionar esse contêiner aqui essa estrutura aqui de contêiner né Vamos configurar aqui 100 20 100 e 20 aqui eu vou adicionar um título Então vou colocar aqui entre em contato com a nossa loja Vamos colocar
aqui uma cor preta assim aqui eu acho interessante também adicionar uma a lista de ícones assim ó e de colocar sei lá WhatsApp Vamos colocar aqui o e-mail Aliás o e-mail primeiro aqui ó aliás Vamos colocar um envelope aqui que fica melhor assim o e-mail né daí aqui no texto você coloca né o seu e-mail ó vou colocar assim de exemplo eu vou pegar isso aqui eu vou copiar link mail tu dois pontos e eu vou colar que que eu fiz aqui toda vez que a pessoa clicar aqui nesse e-mail vai abrir o aplicativo de
e-mail dela aí do celular ou do computador para ela tá enviando um e-mail ok aqui posso fazer a mesma coisa com o telefone tá então vamos colocar aqui por exemplo o telefone aqui no ícone vamos escolher um ícone aqui de telefone ou de WhatsApp enfim aqui no telefone ó dois pontos ele coloca ali o código do país o código do Estado e os nove números do telefone a pessoa clicou aqui vai abrir aí no celular dela para ela já fazer a ligação beleza aqui posso colocar também um WhatsApp aqui vamos inserir aqui ó wa.me Barrinha
código do país código do estado e nove números do WhatsApp 1 2 3 4 5 6 7 8 9 o usuário clicou aqui já vai ser direcionado para WhatsApp Vamos colocar aqui o número né do WhatsApp beleza Aí você coloca aqui Quantos contatos você quiser né Ah quer colocar o Instagram o Facebook enfim fica a seu critério vou dar um espaço aqui de uns 20 pixels assim o ícone eu vou deixar ele é assim eu vou aumentar um pouco esse ícone e o texto Vou colocar aqui minha tipografia normal ó desse jeito assim aí aqui
do ladinho eu vou colocar um formulário de contato aqui ó tem opção de formulário aqui no elementor pro eu vou arrastar para cá e aqui então o usuário ele consegue preencher as informações e tá entrando em contato com você tá eu vou tirar esse rótulo aqui eu vou adicionar um item eu vou colocar deixar texto né Eu só vou colocar aqui o assunto assim aqui no espaço reservado eu vou colocar assunto também vou deixar obrigatório então o usuário vai ter que colocar o nome dele que é obrigatório o e-mail dele que é obrigatório o assunto
desse contato que é obrigatório né e a mensagem vou deixar como obrigatório aqui também aí Ah você quer pedir outra informação Como por exemplo o telefone desse cliente aí né Desse futuro cliente você vem aqui coloca ã telefone né e escreve aqui WhatsApp H digite seu WhatsApp digite seu telefone que de o usuário vai digitar ali observações mais importantes aqui deixa eu só configurar o botão vou deixar assim mesmo enviar já vou personalizar o botão tá ações após o envio toda vez que o usuário preencher aqui você vai conseguir coletar os envios ou seja os
envios eles vão aparecer ali no seu painel do WordPress Deixa eu só sair daqui ó você vem aqui em elementor envios e vão aparecer todos aqui tá se enfim se 100 pessoas entrarem em contato com você através daquele formulário vai aparecer que todos os nomes os e-mails os assuntos as mensagens dessas 100 pessoas todo listado um a um tudo separadinho tudo bonitinho Ok essa opção coletar envios tem essa outra opção e-mail tá aqui ó coletar envios ó já deu aquele caminho ali que eu mostrei Ok essa opção e-mail você vai ter aqui o seu e-mail
né você coloca o e-mail seu aí como eu falei do Gmail do tlook enfim e você vai estar recebendo o contato da pessoa no e-mail tá você vai est recebendo a mensagem da pessoa ali tudo no seu e-mail Ok e ainda aqui você tem outras opções você pode direcionar a pessoa para uma outra página daí por exemplo ó opção redirecionar tá você vem aqui redirecionar cola o link da página que você quer redirecionar né vamos vir aqui por exemplo a integrar com o Active Campa com outra ferramenta aqui de meil marketing enfim tem uma aula
específica aqui do canal que eu fiz aí sobre o formulário do alimentor pro então você pode estar acompanhando depois é só pesquisar no canal que você acha tá mas a princípio vou te ensinar o básico aqui e daí Conforme você enfim quiser fazer coisas mais avançadas aqui daí fica ao seu critério beleza aqui em mais opções você pode personalizar as mensagens né então aqui ó mensagem de eh enviado com sucesso de erro você personaliza uma a uma vou vir aqui no formulário vou colocar tudo com a tipografia aqui secundária já aqui ó o campo também
assim aqui os botões o botão aliás né cor de fundo Vou deixar um preto assim ou enfim você coloca um azul aí né uma cor da sua identidade visual ó aqui as mensagens que vão aparecer abaixo aqui né quando o usuário ã enviar enfim ã vou clicar aqui em publicar Vamos abrir uma nova guia beleza essa aqui seria a nossa pagin zinha de contato bem padrão mesmo bem simples ã Vamos criar também uma página 404 o que que seria uma página 404 seria por exemplo aqui ó deixa eu dar um exemplo para você tá ó
vamos supor que você tenha esse produto aqui tá esse produto aqui ele tem um link que é aqui ó canal aprend site.com bar produto barra o nome do produto Então vamos supor que esse produto você esteja anunciando ele esteja aparecendo no Google e tal você enviou ele aí por rede social e depois esse produto você vai excluir ele da sua loja né Aí quando a pessoa acessar novamente esse produto aqui vai aparecer uma página de erro né Vamos colocar um texto aleatório aqui ó vou abrir ó a página não pode ser encontrada sempre quando uma
uma pessoa coloc colocar um link do seu site aí enfim ou digitar ou entrar alum link que não existe mais vai aparecer a página 404 né Então como que a gente faz essa página 404 é bem fácil de fazer também aqui no painel do WordPress a gente vem em modelos construtor de tema aqui ó erro 44 Pininha bem simples e rápido aqui pra gente criar aqui tem alguns modelinhos prontos ó no caso vou criar aqui junto com você ó vou adicionar um contêiner aqui a altura desse contêiner eu vou colocar VH assim eu vou colocar
90 VH ou seja vai abrir 90% do tamanho da tela aí do usuário que tiver acessando tá independente do tamanho da tela Vamos colocar aqui cor preta mesmo assim e vamos adicionar aqui Um textinho deixa achar aqui título beleza dechar 44 mesmo V aumentar esse tamanho assim deixar Centralizado esse aqui também vamos adicionar Um textinho embaixo Aqui vou digitar assim esta página não existe ok vamos centralizar isso aqui pessoal é padrão em qualquer site tá todo site tem isso aqui se você entrar numa página aí que de um site que não existe vai aparecer essa
página aqui 404 tá publicar incluir na página 404 e salvar beleza de usário vai estar aí enfim vai acessar um link aqui que não existe mais ó vai cair na página 404 beleza observações finais aqui então vamos vir aqui no painel do WordPress aparência personalizar e aqui eu vou definir a favc que é esse izinho aqui eu tô com meu mouse ó que é do navegador vou vir aqui em selecionar ícone do site ó e aqui você configura tá vou colocar só como exemplo ó pessoal esse esse pedacinho de logotipo aqui mas é o ideal
você colocar um ícone aí personalizado tá ó tá publicado vamos voltar aqui na nossa página inicial então chegamos ao fim da nossa loja virtual ã peço para você que você deixe nos comentários se deu certo para você que você dê enfim o feedback aí dessa aula né porque enfim é muito importante né o teu feedback se faltou alguma coisa também que eu esqueci aí né às ve Às vezes a gente esquece de alguma coisa você pode estar comentando Tá mas a princípio era isso né eu te ensinei como criar toda a estrutura e tal né
claro que ã tem muitas outras configurações aí que dá para fazer né então você pode inclusive est acessando aqui o meu canal e vendo outras configurações aí enfim eu ensino como instalar o pixel do Facebook as tags do Google a Como colocar botão de WhatsApp a como criar ali as páginas de política de privacidade de termos de uso a Como deixar o teu teu site enfim a tua loja mais rápida então uma série de configurações que você aprende aqui no canal tudo sobre WordPress sobre elementos sobre criação de sites beleza valeu e até a próxima
[Música] he [Música]
![Como Criar um SITE NO WORDPRESS com Elementor 2025 [Criar Site Profissional Multipage Passo a Passo]](https://img.youtube.com/vi/cicWmzYN3xw/mqdefault.jpg)
