Como Criar uma LOJA VIRTUAL WordPress, WooCommerce e Elementor Pro [Passo a passo do zero]

Neste vídeo eu vou te ensinar como criar uma loja virtual com WordPress, WooCommerce e o Elementor Pro Fala pessoal, tudo bem? aqui é Micaela do Descomplicando Sites, e antes de começar a te ensinar esse projeto eu quero pedir para você deixar aquele like aqui que você sabe que ajuda demais o canal a crescer e também vou pedir para você se inscrever no canal Tá bom então é isso vamos pra tela do meu computador agora então vamos lá antes de começarmos a criar o nosso site eu ten alguns avisos muito importantes ouça esses avisos antes de

você começar a criar tá primeiro tá pessoal Não acesse nada diretamente no Google tá vocês me ouvem falando que o site WordPress corre lá no Google acessa WordPress e tenta fazer por lá e aí volta aqui o meu não tá dando certo o meu não dá para instalar plugin não dá mesmo não é lá pelo WordPress do Google eu vou te ensinar Neste vídeo como fazer uma loja virtual com WordPress personalizada e personalizada do jeito que a gente quer é dessa maneira que eu vou ensinar então clica nos links que eu pedi para você clicar

Segue o passo a passo do jeitinho que eu ensinara você fazer não inventa de ir lá no Google não porque senão não vai ter o mesmo resultado Ok beleza segunda coisa este tutorial é bastante grande você deve ter percebido e pode ser que você precisa assistir ele um pouquinho mais rápido ou um pouquinho mais devagar não tem problema aqui no YouTube tem essa engrenagem em todos os vídeos que você pode vir aqui em velocidade e aí aqui você coloca mais rápido e aqui você coloca mais devagar Tá bom então ajuste aí do jeito que você

precisar terceira coisa eu sempre deixo links materiais de apoio para vocês então assim às vezes eu vou te indicar algum vídeo vou falar olha se você quiser fazer de tal outra forma tem outro vídeo aqui no canal vou deixar o link para você aqui na descrição ou então tem outro ses que dá para você tirar um fundo a imagem vou deixar o link aqui na descrição então assim eu sempre deixo indicações para vocês de vídeos que você pode precisar para poder compor aqui o seu projeto de sites por exemplo a gente vai comprar a nossa

hospedagem e eu deixo o link aqui para você então tudo isso você consegue ver na descrição aqui ó quando você abaixa o vídeo tá vendo tem um pouquinho da descrição e você clica em mais tá vendo ó tem escrito mais e aí ela expande e mostra a descrição completa fica tudo aqui para você até as partes do vídeo fica separadinho tá vendo ó cada tópico aqui que a gente vai fazendo fica aqui aí é só você clicar no que você quer que aí você vai direta amente pra parte do vídeo onde eu estou ensinando Tá

bom então tem tudo aqui todo vídeo que eu mostrar para vocês e a hospedagem Hostinger por exemplo que é que eu vou indicar tem o link aqui o nosso cupom de desconto fica aqui na descrição então assim a descrição tem tudo que você precisa nosso material de apoio né todas as imagens Artes ícones códigos qualquer coisa que eu for usar no projeto que você precisa para fazer eu deixo aqui no nosso material de apoio é o primeiro link ó material de apoio nesse caso aqui eu ainda compartilhava no grupo do telegram agora não não compartilho

mais direto por lá você não precisa acessar lá tem o link direto aqui você vai clicar já vai cair lá na pasta do drive com o material É só clicar tá bom é um material de apoio gratuito Você pode baixar lá se você quiser então é isso dados os avisos vamos lá para o nosso primeiro passo Primeiro passo é a compra do domínio e da hospedagem o que que é domínio domínio é o link do seu site é o link que a gente usa para acessar o seu site na internet e para você ter um

domínio personalizado com o nome da sua empresa com o nome do seu projeto você precisa pagar pelo direito de usar ele exatamente assim não é caro não se preocupe mas saiba que você tem que pagar e aí você tem que pagar anualmente você escolhe a quantidade de anos que você quer comprar de cada vez mas é anualmente este site aqui por exemplo que eu ensinei vocês a criar no canal tá vendo ó eu comprei esse domínio especializado ó com o nome do projeto e eu pago por ele você D gente é uma empresa que hospeda

os arquivos né ela detém os arquivos ali do seu site e fica transmitindo ele pra internet e assim que a gente consegue acessar em qualquer parte aqui do computador do celular e você precisa pagar pelo serviço dessa hospedagem de ficar mandando os seus arquivos pela internet também Micaela que arquivos tá vendo esse site aqui do jeito que ele está então ele está assim visualmente pra gente mas para que ele fique assim são gerados vários arquivos não são arquivos que a gente vai criar tá a gente vai usar uma ferramenta de arrasta e solta bem visual

Mas cada ação que a gente faz no site gera um arquivo se você eh pressionar control u aqui em qualquer site você vai ver ó tá vendo o site é isso aqui por trás do que a gente vê todos esses arquivos aqui de códigos eles têm que estar hospedada em em uma empresa de hospedagem e fica transmitindo a gente pra internet hospedagem é como se fosse o seu endereço mesmo ali na web e você precisa pagar para estar ali naquele endereço não é caro também não preocupe e nós temos uma indicação muito boa que é

a empresa de hospedagem Hostinger que nem eu te falei aqui na descrição do vídeo ó se não tiver aparecendo para você Você vai clicar aqui no mais vai abrir o restante da descrição e vai ter aqui ó Hostinger você vai clicar às vezes abre essa telinha aqui do YouTube né falando que você está saindo do site do YouTube aí você pode clicar aqui em ir para o site tá bom esse é o nosso link Se você comprar com o nosso link que nós somos parceiros afiliados você ajuda o canal a trazer mais conteúdo como esse

aqui gratuito e relevante para você né então é muito importante pra gente se você puder nos prestigiar comprando com o nosso link eu vou ficar muito agradecido Tá bom então você acessa aqui a hosing E aí vai ter vários planos aqui ó eles mostram os três planos principais aqui deles mas tem outros planos também se você quiser aqui na parte de hospedagem ó hospedagem Cloud hospedagem servidor VPS né que são os hospedagens dedicadas então se você quiser almejar outros pacotes tem também tá a questão da hospedagens é o seguinte vai depender da quantidade de acessos

que você espera no seu site então aqui no site da hosing né você vai conseguir ver os recursos que tem cada plano em todos esses aqui que eu tô te mostrando você pode usar vários sites tá você pode criar até 100 sites nesse 100 sites nesse 300 sites nesse pode criar vários sites se você quiser ou pode criar um só e usar todos os recursos da hospedagem Então esse aqui tem 100 GB de armazenamento esse 200 GB esse 200 GB esse aqui tem backups né que são C do site que são geradas semanais esse aqui

tem backups diários né e-mail institucional CDN grátis nesse aqui que é uma configuração pro site ficar mais rápido então assim você vai comparando e vai vendo qual que compensa para você o que você puder pagar mais caro é melhor porque os pacotes mais caros tem mais recursos e deixa o site mais rápido né Mas se você puder começar com mais básico não tem problema depois Conforme você for tendo mais visualizações no seu site Você vai precisar aumentar o seu pacote né Então aí você vai fazendo o upgrade aqui também não tem problema tá mas assim

qualquer um desses pacotes aqui vai suportar muitas visitas do seu site e um site grande também como a lja que é o que a gente tá fazendo você escolhe aí qual pacote que você quer eu vou escolher esse pacote Business aqui tá se você quiser explorar os outros pacotes da rosing se você clicar aqui no WordPress e vir Woocommerce que é a O plugin de loja que a gente vai usar Você vai ver que tem pacotes aqui dedicados especialmente para e-commerce tá vendo ó e o business que é bem esse plano aqui que a gente

vai escolher ele é o mais básico dele tá se você quiser ó tem outros planos aqui que nem eu te falei com mais recursos ainda do que aqueles que a gente estava vendo lá na na outra página que aqueles é para qualquer tipo de site esse aqui é focado só em loja eu tô escolhendo o mais básico Mas se você puder pagar escolha Os mais caros tá pra sua loja ficar melhor então você vem aqui clica em adicionar o carrinho escolhe a quantidade de tempo que você quiser comprar você vai perceber que quanto Quanto mais

tempo você comprar mais barato fica a cada mês então se você deixa lá para descontar mesa a mesa ali da sua conta do seu cartão fica bem caro fica 64 por mês Se você comprar um ano de uma vez olha só cai para menos da metade bem menos da metade fica 24,99 cada mês então compensa você comprar os 12 meses por esses dois motivos porque vai ficar bem mais barato né metade do preço e também porque você vai ganhar um ano de domínio grátis então Lembra que eu te falei que o link aqui do seu

site que é o domínio você precisa pagar anualmente então se você comprar a partir de 12 meses você não paga o primeiro ano começa a pagar só a partir do segundo Então sai para você o domínio de graça e você ainda tem uma economia Olha só R$ 480 Tá bom então eu vou escolher aqui esses 12 meses e aí aqui se você é um usuário novo você pode criar uma conta diretamente aqui é só você colocar o seu e-mail e a sua senha é muito importante que você lembre dessa senha tá bom e que você

crie uma senha forte também que tenha pelo menos um caracter como por exemplo é pode ser aísa ar sinal de mais menos enfim qualquer caracter especial e número e também letra maiúscula faz uma misturinha para poder sua senha ficar bem forte Então você vai colocar aqui seu e-mail sua senha e aí aqui você vai escolher a forma de pagamento eu vou deixar aqui cartão de crédito mesmo aqui você vai preencher com seus dados e aqui olha só tem um cupom de desconto Você vai clicar porque vai abrir aqui a abinha você vai vir aqui embaixo

do vídeo vai pegar o nosso cupom de desconto se você não tiver clicado no nosso link por favor clica aqui para comprar com o nosso link tá apoia o canal aí por favor copia aqui o nosso cupom de desconto cola aqui e clica em aplicar você comprando com o nosso link para você não custa nada e pra gente você nos ajuda olha só que bacana Ainda teve um desconto de 10% aqui usando o nosso cupom Então já cai aí o preço para você Você vai preencher todos os dados vai clicar aqui ó e aceitar os

termos de serviço e privacidade e vai clicar em enviar o pagamento eu vou preencher os meus dados aqui e enviar Pronto ele vai te redirecionar para essa página aqui onde você vai preencher os seus dados aqui você vai escolher né a quantidade de parcelas que você quer ó então ele te deixa parcelar em até 12 vezes tá você vai colocar os seus dados e vai clicar em Pag agora eu vou colocar os meus aqui e clicar aí você vai ser recarregado para essa abinha aqui aí você vai escolher né se você tá fazendo um site

para você para sua preso vou colocar né para mim vou clicar aqui em próximo aqui se você quer criar ou migrar um site vou escolher criar próximo aqui é para você já fazer a instalação aqui das credenciais para a sua conta do WordPress então aqui ele pegou aqui o seu e-mail você vai vir aqui vai criar uma sem pode ser a mesma sem do Servidor também que você tiver feito tá vai clicar em próximo se o seu aqui tiver numa língua diferente da sua você escolhe tá tem como voltar para as outras Abas aqui também

se você tiver perdido clique em próximo aqui o tipo de site que você vai escolher eu vou colocar loja virtual vou clicar em próximo aqui eu vou pegar um template padrão vou clicar em pular aqui se você quer plugins pré-selecionados eu não vou querer vou clicar em não vou clicar em pular aqui para você colocar o nome aqui da sua empresa aqui eu vou colocar Tech UDI que vai ser o nome esse daqui esse nome aqui da sua marca é o nomezinho que aparece aqui em cima ó tá vendo ali em cima quando você acessa

o site aqui em descrição é a frase que aparece depois do seu nome tá vendo que aqui temus advogados O importante para você é importante para nós se você quiser você pode gerar um exemplo aqui tá vendo ó aí eles dão para você um exemplo mas claro né não tem a ver aqui com o seu aí você vai e modifica eu vou colocar assim sua loja de produtos inovadores pronto vou clicar em próximo aí aqui você vai escolher o seu domínio lembra que a gente ganhou um ano de domínio grátis então você pode pegar o

seu domínio de graça por aqui só que o que que eu recomendo que você vá aqui na Hostinger primeiro e faça uma pesquisa se o domínio que você quer está disponível então você pode vir aqui ó clica aqui em cima em domínios aí você vai vir para essa abinha aí você digita aqui o que eu quero por exemplo é Tech UDI vou clicar em procurar o meu está disponível o pon com e também está disponível o p com.br isso é muito importante pessoal porque por exemplo às vezes se você comprar só o. comom né S

domino.com uma pessoa pode ter a mesma ideia da loja igualzinho a sua e não tem o pon comom disponível mas tem o pcom.br E aí ela vai lá e compra um domínio praticamente igual o seu só com a extensão diferente então esses dois domínios aqui eu recomendo se você puder comprar os dois compre porque olha só é barato esse aqui por exemplo esse primeiro ano fica 19 19,90 depois R$ 74,99 por ano no vale muito a pena e esse aqui que é o .com.br R$ 29,90 no primeiro ano e depois R$ 59,90 vale muito a

pena você comprar que aí você garante que outra pessoa não vai ter uma loja praticamente igual a sua na web tá então assim você escolhe qualquer um dos dois aqui que você vai pegar o primeiro ano de graça né eu vou escolher esse pon com aqui e depois por fora eu vou comprar esse pcom.br tá mas vou escolher esse P com qual que eu recomendo que você faça né entre os dois o.com.br é melhor pro so por toda extensão que tem.BR no final BR significa Brasil né Então significa que é um site do Brasil e

o Google ele tende a entregar pras pessoas sites brasileiros pessoas que pesquisam em português aqui no Brasil entende então esse domínio aqui é o mais viável do Google entregar pras pessoas se o seu site tiver bom né mas os dois é muito bom os dois esse P com inclusive é usado no mundo inteiro tá então você vem seleciona aqui né Faz o teste se por acaso o domínio que você tiver pesquisado não tiver disponível vá trocando a ordem às vezes Podia colocar assim ood Tec loja ood Tech eletronicos techwood sabe você vai adicionando palavras tirando

palavras trocando a ordem até ficar no domínio que você quer e que tenha disponível pcom e.com.br Tá bom então faça primeiro essa pesquisa aqui aí depois que você fez a pesquisa você vem aqui e cola o domínio que você quer aí você já pode até colocar aqui a a extensão que você quer que no meu caso é pon com né ó aí você clica para escolher clica em próximo aí aqui ele vai perguntar alguns dados né vou deixar esses mesmos Brasil pessoa vou clicar em próximo aqui ele vai te pedir alguns dados isso aqui é

pra gente registrar o domínio tá quando você escolhe um domínio ele te pede para registrar aí você preenche com seus dados Vou preencher aqui os meus clicou lá em finalizar o registro Pronto ele já tá registrando o seu domínio e já tá fazendo a relação do WordPress pronto aqui você vai escolher o tipo de servidor que você quer né o país o critério pra gente escolher é aonde que vai estar as pessoas seos clientes né então por exemplo a minha loja é aqui pro Brasil então melhor para mim é que me servidor est no Brasil

que é mais perto não vai ter servidor em todos os países e não precisa não tem problema tá se você tiver num país que não tiver o servidor você escolhe um servidor que é mais próximo ali do país é só você clicar aqui e escolher vou clicar em próximo aí ele vai fazer a instalação aqui se você tiver pegado um outro plano que tiver tido um passo a passo diferente né que às vezes pode acontecer se você pegar um plano mais básico não escolha IA da Hostinger você tem que escolher sempre o WordPress tá é

só uma ou duas telas que vai que vai ser diferente que vai vai perguntar se você quer criar com o criador da hosing ou com WordPress aí você escolhe o WordPress E aí o o restante é a mesma coisa aqui do passo a passo tá pronto aí quando você recarrega ele já vem vem para cá tá quando você acessar aqui o seu domínio ó tá vendo fica o nomezinho do seu domínio aqui você cola ele aqui no navegador se não tiver aparecendo para você igual tá aparecendo aqui se tiver aparecendo uma mensagem de erro é

normal tá porque o domínio ele tem um prazo de até 24 horas para ser registrado e assim que ele for registrado aí começa a funcionar se você já tiver instalado WordPress aqui tá bom então não se preocupe se tiver aparecendo uma mensagem de erro é só você esperar um pouquinho vamos supor que você instalou aí você comprou a sua hospedagem e não apareceu para você instalar o WordPress não tem problema você vai vir aqui vai logar na rger né vai vir aqui em site vai ter aqui o seu domínio Você vai clicar em gerenciar vai

clicar aqui em WordPress visão geral e vai clicar aqui embaixo ó em instalar procura esse botãozinho de instalar que aí vai abrir um popup Zinho para você com basicamente aqueles dados que estavam aparecendo ali no início só que ele tá aqui no popup aí você vai coloca todos os dados aqui no banco de dados você não precisa p senha ó pode colocar a senha só no que tiver aqui só esse campinho aqui o avançado você não precisa mexer clica em próximo próximo e ele vai fazer a instalação para vocês se tiver dúvida também tem vídeo

no canal ensinando a instalar WordPress Ok então pronto o seu site a partir do momento agora ele já está no a o seu site é isso aqui falo isso porque tem gente que depois que terminar a loja pergunta agora como é que eu faço para pôr no a o site já está no a a partir do momento que você instala o WordPress Ok o que a gente vai fazer agora é modificar para ele aparecer todo bonito customizado do jeito que a gente quer mas o seu site é isso aqui por enquanto tá aí você tem

duas formas de logar dentro do da plataforma WordPress ou você estando aqui na rosting você clica aqui em painel administrador você já cai lá lugado ou você acessa aqui o seu link para você não precisar est sempre entrando na hosing você pode entrar direto no site bwp admin tá então Sempre que você quiser acessar o seu site como administrador que é o que a gente vai fazer aqui o tempo todo né criando o site é só lembre-se colocar WP tro admin você vai ser redirecionado para essa página aí aqui você vai colocar aquele e-mail e

aquela senha que você usou lá para instalar WordPress clique em acessar e pronto você vai estar dentro do painel sugiro que você clique aqui em salvar para não precisar ficar colocando a senha toda hora Olha se você acessar o seu site de novo recarregar a página você vai ver que surgiu uma Barrinha preta isso só aparece quando você tá logado dentro do painel do site tá vai aparecer só para você que é administrador pros clientes não vão estar Então você sabe que você tá logado no site quando tem essa Barrinha preta aqui e o painel

administrativo do WordPress ele é assim ó esse painel aqui por dentro do site aqui é seu site por fora como as pessoas vem e aqui é seu site por dentro onde você vai modificar Ok sempre que você tiver logado e tiver nessa página aqui WP traço AD mim você vai vir aqui para o p OK agora vamos configurar o nosso WordPress né fazer algumas configurações básicas eu já fechei as minhas Abas lá da hospedagem Hostinger que agora nós vamos lidar diretamente com o WordPress então assim deixa eu explicar melhor para você o que a gente

acabou de comprar foi a hospedagem o domínio que são responsáveis para manter o nosso site no ar aí dentro dessa hospedagem Nós criamos essa plataforma aqui chamada WordPress que é uma plataforma gratuita se a gente instala dentro dentro da hospedagem tá E aí como a gente instalou dentro da hospedagem a gente consegue usar ela de forma gratuita e modificar todos os aspectos dela é com ela que a gente vai criar o nosso site ela é o nosso site né a plataforma do nosso site E aí que nem eu te falei o site ele já está

no a está assim e aí nós vamos modificar ele agora então o seu site é esse daqui e por trás dele tem a plataforma WordPress né tudo que a gente mexe nela a carreta aqui no nosso site a gente configura ela aqui por dentro para o nosso site aparecer assim para pros usuários E aí por isso que você não precisa mais logar lá na hospedagem por enquanto só se você quiser fazer algumas configurações precisar fazer algumas configurações a nível de servidor você vai vendo aí mais para a frente do processo se você precisa ou não

tá aí aqui dentro do WordPress a gente vai fazer algumas configurações quando a gente Instalou a gente escolheu a língua né que a gente queria que é português ou ele já vem automático mas se o seu não vier vier em inglês aqui tudo bem você pode vir aqui em configurações geral aqui vai ter ó idioma do site procura sempre por esse iconeinstagram é o que aparece ali em cima e a descrição do site é o que aparece depois desse título ali em cima eu vou mudar né vou colocar o título do meu site Tech UD

que ele pegou foi o domínio ali né e a descrição Vou Colocar assim ó os melhores produtos selecionados para você e já vou clicar aqui embaixo em salvar alterações essa parte aqui do endereço do site você não pode mexer de jeito nenhum tá se você mexer isso aqui o site Sai fora do a você tem que instalar outro então isso aqui você não pode mudar endereço do e-mail se você tiver colocado um e-mail que você não usa muito você pode mudar o e-mail aqui tá E aí você passa a ter outro e-mail como administrador beleza

aí agora a gente vai fazer a instalação do nosso tema o tema pessoal é como se fosse o sistema operacional aqui do seu site como no celular por exemplo no celular da do iPhone tem um sistema operacional iOS né e os demais tem o sistema operacional Android é como se fosse isso o nosso tema né vai determinar as configura ações padrões de espaçamento de cores de tudo aqui do nosso site a gente pode modificar tudo isso lá com elementor mas é obrigatório aqui dentro do sistema que a gente tenha um tema e eu gosto de

usar um tema que ele é todo em branco praticamente justamente pra gente poder modificar tudo com elementor que é o plugin que a gente vai usar Então a gente vai vir aqui em aparência temas por padrão WordPress já trás três instalados Mas a gente pode excluir porque a gente não vai precisar desses outros aqui que estão inativos e se eles ficarem aqui eles contribuindo para pesar o site né clica clica em excluir ok clica clica em excluir ok o que está ativo a gente não consegue excluir vamos clicar aqui em Adicionar novo tema e vamos

instalar o tema que a gente vai usar ele já fica aqui em mais populares que é esse aqui o Hello você vai clicar em instalar e depois em ativar pronto quando a gente instala e ativa esse aqui fica disponível pra gente excluir clica excluir Ok pronto agora a gente vai passar aqui pro nosso passo dois que é para criar a estrutura da nossa loja primeiro a gente vai instalar o plugin que vai ser responsável para criar a estrutura de loja porque veja bem o WordPress por padrão ele é uma plataforma que foi feita pra gente

poder criar sites blogs né sites normais e pra gente poder criar sites diferentes como loja uma estrutura de loja que precisa ter página de carrinho página de loja página de tudo a gente precisa de um plugin que faça isso plugins são são como se fosse aplicativos né então assim a gente tem essas configurações padrões que o WordPress nos traz E aí se a gente quiser alguma coisa a mais que não tem por padrão a gente instala um plugin que é como se fosse um aplicativo tá outra coisa você deve ter percebido que agora que a

gente mudou o tema mudou tudo isso que tava aqui então porque quando a gente não cria nada no site né O que está nele é determinado pelo tema como a gente trocou aí ficou esses daqui né mas tudo isso a gente vai mudar depois quando você quiser instalar um plugin vai ter essa abinha de plugin você passa o mouse vem em adicionar plugin a gente vai instalar o WooCommerce né ele também fica aqui mais populares você pode clicar que é esse aqui ó você vai instalar e depois ativar quando a gente Ativar o WooCommerce ele

vai criar toda a estrutura de loja inclusive vai criar as páginas relacionadas à loja também a a gente recarrega a página ó ele abriu mais algumas abinhas aqui tá vendo a maioria dos plugins quando você for instalando ele vai abrindo mais Abas aqui na no painel então o commerce trouxe todas essas Abas aqui ó estão relacionadas a WooCommerce Tá e agora a gente vai fazer um overview eu vou te mostrar vou te mostrar por alto aqui para que que serve cada uma dessas Abas aqui nessa abinha de Woocommerce você vai conseguir ver várias configurações é

por aqui que você vai ver os pedidos que vão ser criados na loja né Toda vez que alguém comprar os clientes né os os dados dos clientes você vai conseguir ver os relatórios as configurações aqui de todos os aspectos da loja o estato aqui do Plugin e algumas extensões que são alguns aplicativos que ele indica se você quiser outras funções né se você clicar aqui no início como a gente acabou de instalar ele vai te levar aqui pra página para você terminar de configurar o Woocommerce então você pode clicar com o botão direito clicar em

traduzir para português pra gente poder ir seguindo você clica em configurar minha loja aí ele vai te perguntar né se você já está vendendo você vai começar a vender agora vou colocar aqui estou apenas começando os negócios aí Aqui tem algumas informações que ele já puxa de lá né o nome da loja que tipo de produtos você vende você tem que selecionar aqui no meu caso aqui eu vou colocar eletrônicos aí você escolhe qual que é o que é mais semelhante aqui para você ou se não tiver você põe outros não precisa marcar isso aqui

vou clicar em continuar ele vai nos levar pra essa abinha aqui vamos recarregar a página aí agora seguiu tá vendo tinha dado um bugzinho mas a gente recarregou a página agora seguiu aí ele tá perguntando se você quer que ele instale alguns itens aqui pra gente poder usar depois eu vou deixar instalar porque depois eu pretendo fazer outras aulas aqui no canal ensinando a usar esse daqui se você não quiser instalar não precisa tá esse daqui eu não vou querer o jetpack mas o restante eu vou deixar vou clicar em continuar Pronto agora ele vai

nos levar aqui pra outra abinha você pode clicar aqui no botão direito cá em traduzir para português né aí aqui ele tá pedindo para você começar a personalizar a loja né Aí no caso ele vai pedir algumas coisas aqui para para criar o layout mas daqui a gente não vai fazer porque a gente vai criar com elementor Então por enquanto a gente vai deixar configurado só isso daqui aqui na parte de pedir os clientes relatórios não vai ter nada só vai ter quando a gente começar a rodar a loja né então aqui nem vou passar

por isso daqui porque só vai ter informação Quando a gente tiver com a loja pronta aqui em análise e em marketing são áreas que a gente vai usar depois também aqui em marketing é onde você vai conseguir ver a visão geral né dos produtos que estão mais acessados e tudo mais aqui você consegue criar cupons de desconto e aqui são configurações para outras redes sociais aqui na análise você vai conseguir ver uma análise Geral de tudo visão geral dos produtos receita pedidos tudo Tá tudo em branco né A gente vai ver depois mais para a

frente e aqui em produtos que é a aba que a gente mais vai usar agora as duas Abas que a gente mais vai usar vai ser essa de Woocommerce né aqui na parte de configurações e a aba de produtos inclusive nós vamos aprender agora a cadastrar produtos e aí para isso você vai vir aqui em produtos Adicionar novo então Sempre que você quiser criar um produto você clica em produtos Adicionar novo aí aqui você coloca o título do seu produto eu já até determinei um título de um produto aqui para mim vou colar o título

dele aqui aqui são algumas configurações de se a gente não vai ver isso agora você pode deixar essa abinha fechada aqui você coloca a descrição do produto então Sabe aquele texto que aparece com toda a descrição do produto todas as informações dele é nesse Campo aqui que você vai colocar e você pode arrastar imagens para cá também textos eu pedi A Iá do Google que é a Gemini para gerar uma descrição para mim então você pode fazer isso também ir no chat de APT ou vir aqui na Gemini e pedir ela para gerar uma descrição

para você que aí é bom que ela faz tudo detalhadinho e aí depois você só confere vê se tá tudo certo né então sobre qualquer produto ela pode gerar aqui para você você pode usar ó vou colar todo o texto que ela me passou aqui você pode colocar também imagens né pode arrastar imagens para cá colocar imagens aqui no meio ó só você clicar aqui em adicionar uma mídia aí você arrasta do seu computador para cá eu não vou colocar aqui por enquanto mas aí se você quiser arrastar você pode arrastar aqui embaixo é onde

você vai determinar o preço do seu produto eu estou te ensinando a cadastrar um produto simples que é quando o produto não tem variações ou seja ele não tem tamanhos diferentes cores diferentes ele só é um produto único então por exemplo um relógio preto não tem como escolher outra cor não tem como escolher outro tamanho é só aquele relógio ali Esse é um produto simples agora por exemplo um relógio que dá para eu escolher entre relógio verde ou branco dá para escolher o tamanho da pulseira dá para escolher o armazenamento Esse é um produto variável

porque eu posso escolher entre as variações dele tá então quando é um produto simples que você não tem outras características pra pra pessoa escolher você deixa assim como produto simples aí aqui você coloca o preço Esse é o preço que seria o preço real dele e esse é o preço promocional sabe quando a gente acessa uma loja e tem o preço assim de 200 por 150 Então é assim onde tem de 200 né que é o preço Inicial preço real é aqui que você coloca se você quiser que apareça como preço promocional Aí você coloca

aqui eu vou colocar como preço promocional Então vou colocar por exemplo 200 que ele era 200 e agora está sendo 150 aí lá na página vai ficar de 200 por 150 tá aqui é a quantidade em stoque você pode criar um sku para eles se você for precisar aí no seu CRM você pode fazer gestão de estoque Ó você pode só deixar em estoque e não colocar quantidade ou então fazer gestão de estoque e colocar a quantidade que ele tem no estoque ó vou colocar aqui 50 falando que ele que tem 50 desses produtos aqui

na opção de entrega você tem que colocar o peso as dimensões aqui da embalagem que você vai enviar pelos Correios ou pela transportadora isso aqui é muito importante porque é com base nesses cálculos aqui que vão ser feitos os cálculos do frete entendeu então você tem que colocar o peso que vai ser usado aqui vou colocar por exemplo 200 g né ó repare que aqui fica em qugo tá vendo ó peso em quilo Então vou colocar aqui 0,2 que vai dar 200 g as dimensões aqui colocar uma dimensão qualquer né só para poder exemplificar mas

você tem que colocar aqui as dimensões tá produtos relacionados se você já tiver cadastrado algum produto você quiser correlacionar para aparecer lá embaixo nos relacionados você pode selecionar por aqui eu ainda não tem né atributos atributos são características desse produto que você pode usar para poder a pessoa conseguir filtrar lá na loja então por exemplo toda loja tem um filtro né você vai procurar uma loja de roupa Aí você coloca lá para aparecer só as roupas pretas então é com base nisso aqui ó nesse atributo que a gente cadastra que a pessoa consegue achar lá

nos filtros que a gente coloca entendeu então por aqui a gente consegue cadastrar o atributo se você quiser cadastrar um atributo você faz assim ó salva aqui primeiro ó clica aqui em publicar aí primeiro você vem aqui em atributos cria um atributo ó eu vou criar um atributo chamado cor pronto aí pode ter vários atributos cor armazenamento né várias coisas eu vou criar Esse chamado cor e vou clicar aqui em cima dele aí nós abrimos o atributo cor aí aqui eu vou criar várias cores vou colocar preto branco vermelho verde pronto criei várias cores aí

quando eu voltar lá em produtos ó todos os produtos aquele produto que eu criei ele já tá aqui tá vendo aí você clica em editar pra gente terminar de editar ele aí se eu vier aqui em atributos agora eu já posso escolher ó entre um atributo existente que no meu caso é esse aqui cor aí eu venho aqui e escolho qual que eu quero usar esse meu fone de ouvida aqui é preto eu selecionar o preto pronto aqui em avançado se você quiser deixar uma nota na compra você determina por aqui e se você quiser

permitir que as pessoas façam avaliações né comentem você coloca aqui eu vou deixar tudo do jeito como está aqui Uma Breve descrição a breve descrição é um item que você pode puxar em alguma parte da página depois inclusive lá naquela na página individual do produto logo abaixo do preço ele geralmente aparece então se você quiser que apareça Um textinho lá você coloca uma breve descrição aqui eu não vou colocar tá nessa aba aqui ó na aba esquerda você vai conseguir fazer as configurações principais aqui do produto tá eu diria que o mais importante aqui é

o título O preço e essa parte aqui então primeiro a imagem do produto que é a imagem que vai aparecer lá no cardz inho você vai arrastar a imagem para cá eu tenho essas imagens aqui que são as imagens que eu vou usar do produto e aí eu vou te dar uma dica geralmente a gente baixa as imagens elas vêm assim com esse nome feio né Você pode arrastar clicar clicar em renomear eí você renomeia um aí todos ficam renomeados com o mesmo nome só 1 2 3 4 vendo Então fica mais fácil aqui para

você renomear tudo de uma vez a foto do meu fone de ouvido vai ser essa ó foto do card vou arrastar para cá cá pronto e aqui vai ser a galeria de imagens que é aquele Carrocel de imagens que aparece embaixo aí eu vou arrastar o restante das imagens para cá vou clicar em adicionar Galeria da imagem Aqui é onde a gente vai criar as categorias se você não selecionar nenhuma categoria ele fica escrito sem categoria eu vou desmarcar essa opção e vou clicar em adicionar nova categoria E vou criar a categoria fone de ouvido

é só você escrever e dar enter que aí ela já vai ficar selecionada pronto essas opções aqui a gente pode a gente pode fechar porque a gente não vai usar e depois disso você clica aqui no botão de atualizar Toda vez que você fizer alguma modificação você clica aqui no botão de atualizar pronto nosso produto já está cadastrado este aqui é o link do produto Tá vendo você pode clicar aqui ó Clica com o botão direito abrir uma nova janela e essa é a página do produto então a descrição que a gente P fica aqui

ó informações avaliações tudo isso aqui a gente vai criar lout bem bonito com elementor depois mas esse aqui é o padrão que vem no tema vendo ó assim que fica o preço que eu te falei Esse é o preço original e esse é o preço em promoção se você não quiser colocar assim ó um preço em promoção só o preço normal tudo bem você pode só colocar essa parte aqui ó que é o preço original aqui na parte de promoção também você pode programar por exemplo você quer que fique uma promoção só por um período

você vem aqui determina que aí depois ele volta sozinho pro preço original vendo Então você pode fazer isso também fazer essa programação Ok então é assim que você cadastra um produto simples e lembrando que todos os produtos ficam aqui ó na aba de todos os produtos se você quiser editar você clica aqui em editar se você quiser uma edição rápida que é só essas essas Abas aqui ó o título O Slug né o Slug é o link que aparece aqui ó tá vendo esse link aqui o Slug E essas informações aqui de peso né categoria

E tudo essas informações aqui mais B você consegue clicar aqui em editar rápido sem precisar entrar lá dentro do produto agora para fazer edição completa você clica em editar se você quiser excluir clica em lixeira e se você tiver excluído sem querer vai ficar aqui em lixo aí você clica em restaurar pronto aí vai ficar aqui em todos tá quando você clica em todos os produtos aparece aqui todos os produtos que tem Beleza agora eu vou te ensinar a cadastrar um produto variável vou clicar aqui em Adicionar novo aí aqui eu vou colocar o nome

do meu produto né título aí aqui eu vou colocar a descrição eu pedi também pra Gemini criar a descrição aqui para mim Lembrando que isso é uma uma loja de teste tá na sua você presta atenção na descrição coloca tudo certinho aí aí aqui a gente vai mudar para produto variável aí ele vai nos mostrando algumas dicas aqui né vou clicar em entendi aqui a gente não precisa vai fazer a gestão de estoque por aqui a gente faz pelas outras Abas aqui em atributos a gente seleciona quais os atributos que vai ter eu vou colocar

o atributo cor e aí eu vou colocar o preto e também preciso de um que ainda não tem aqui vou abrir aqui essa aba de atributos em uma nova guia ó vou clicar aqui em cor e vou colocar a cor rosê já atributo pronto posso clicar aqui em publicar e vai recarregar a página aí eu vou rolar Aqui para baixo vou voltar em atributos vou abrir ó quando a gente já colocou tá vendo ele fica assim aí você pode clicar em cima para ele abrir ó vendo aí vou escolher o Rosé também pronto aí quando

a gente tem que cadastrar variável né produto variável a gente tem que deixar marcada essa opção aqui ó usado para variações tá aí você clica em salvar atributos beleza vem aqui em variações e vai clicar aqui em gerar variações e em OK aí ele vai gerar variações com base naqueles atributos ali que você colocou tá aí eu vou clicar aqui em cima aí tá vendo que eu tenho aqui o preto e o Rosé eu tenho que colocar uma foto do produto preto e uma foto do produto Rosé para que na hora que a pessoa selecionar

a cor lá mude não tem quando a gente vai numa loja e a gente clica na cor o produto muda a cor lá na na imagem é assim que funciona então aqui por exemplo ó o do preto vou clicar vou arrastar para cá a foto dele Preto né nesses smartwatch Preto pronto aí aqui a gente coloca as informações do produto Preto a gente pode colocar até preço diferente em cada um se a gente quiser ó aqui também tem igual a aba do outro preço normal e preço promocional eu vou deixar de 150 por 100 por

99 150 por 99 aqui para você dizer se ele tá em estoque ou fora de estoque aqui se você quiser gerenciar o estoque Ou seja para aparecer aqui ó para você colocar a quantidade de produtos que tem em estoque eu vou colocar 50 por exemplo aqui se você permite encomendas eu vou colocar não permitir aqui né o peso e as dimensões vou colocar uma aleatória aqui aqui o peso essa classe de entrega pode deixar do jeito que tá E aqui se você quer que tenha alguma descrição Então você vai preencher todos esses dados aqui na

na variação aí você vai clicar aqui em cima ó tá vendo pode ser até aqui perto do preto para fechar essa abinha e vai abrir a abinha do Rosé aí Aqui também você vai colocar imagem do Rosé que é imagem que vai aparecer quando a pessoa selecionar a cor e aí você vai colocar as mesmas informações eu vou colocar aqui também gerenciar em stock Como é o mesmo produto vou colocar as mesmas configurações aqui e o preço também vou colocar o mesmo de r50 para 99 E aí depois que você configura tudo isso você pode

fechar e clicar em salvar alterações pronto aqui na aba de avançado não vou colocar nada e aqui nessa abinha aqui ó aqui em imagem do produto que é a imagem que vai aparecer no card a gente vai clicar vai definir vou selecionar essa rosa aqui que já estava e aqui em galeria do produto eu vou arrastar essas outras imagens para cá menos essas duas que já estão né vou arrastar para cá depois vou ccar em adicionar a galeria aí aqui agora a gente vai selecionar a categoria tá vendo que agora já tem aquela categoria que

a gente criou fone de ouvido Então se fosse fone de ouvido eu podia só marcar aqui como não tem eu vou clicar aqui em adicionar nova categoria vou colocar relógio né categoria chamada relógio ou você pode criar com o mesmo nome também categoria chamada smartwatch tá vou colocar relógio que aí já fica selecionado ali e aí depois eu vou clicar aqui em cima em atualizar Pronto já posso acessar aqui o meu produto para ver ó ele fica assim aqui fica o carrocel né das imagens a gente vai mudar isso depois né E tá vendo aqui

ele consegue escolher a cor o rosê ou o preto vendo por conta que a gente colocou lá as fotos nas variações aparece aqui quando a pessoa seleciona a cor tá então é assim que você faz o cadastro aqui de um produto variável também tem um vídeo aqui no canal específico só sobre isso se você quiser ver depois com mais calma tá agora eu vou te ensinar a criar as páginas que a gente vai precisar aqui para criar o nosso menu Então as páginas do nosso site ficam aqui páginas todas as páginas quando a gente instalou

o Woocommerce ele já criou as páginas de carrinho de finalização de compra de loja ó inclusive se a gente clicar aqui em ver ou clicar com o botão direito abrir uma nova guia a gente vai ver a página de loja que é onde fica todos os produtos e eles já estão assim a página de minha conta a página de política de privacidade política de reembolso tudo ele já cria automaticamente e aí tem essa página de exemplo aqui que foi WordPress que criou a gente pode clicar em lixeira nela para ela ser excluída né Lembrando que

se você excluiu alguma coisa sem querer você clica aqui em lixo e restaura eu vou fazer a excluir permanentemente porque essa página realmente não precisa existir e aqui em todos tem todas as páginas aí agora a gente vai clicar aqui em adicionar nova página e vai criar a nossa página home que é a página principal que é a página que vai ser acessada quando alguém acessar o nosso site Então a gente vai colocar o título da página aqui e aqui em cima a gente vai clicar em publicar duas vezes tá vendo clica uma vez e

a segunda pronto aí pode clicar aqui no símbolo do WordPress agora a página já vai estar criada agora a gente vai clicar em adicionar nova página Vamos criar a página de contato vai clicar aqui em cima em publicar publicar nós já criamos aqui as páginas que a gente vai precisar eu vou vir aqui agora em produtos categorias e vou criar mais algumas categorias que eu vou usar né para cadastrar meus produtos e eu vou precisar dessas categorias para poder montar o meu menu tá então eu vou vir aqui e vou criar então eu criei a

categoria relógio Mas eu também vou colocar Smart watch porque muitas pessoas procuram por smartwatch né então vou colocar smartwatch aí é só você dar enter vou colocar também microfone colocar câmera vou colocar também ring Light né luzes Hing Light vou colocar luzes também porque algumas pessoas pesquisam como luzes né vou colocar isso por enquanto Essas são as categorias aqui que eu que eu vou cadastrar Ah vou colocar caixas de som também pronto aí agora nós vamos criar o nosso menu o menu são os links que aparecem aqui em cima ó por exemplo que nesse sesus

que eu ensinei vocês no canal tá vendo que tem aqui essas abinhas aqui em cima que a gente clica pra gente ir até o o local aqui do contato por exemplo de cada uma das Abas isso aqui se chama menu o menu é o conjunto de links para nos levar até uma página uma sessão para criar ele a gente vem aqui dentro dopra em aparência menus Vamos criar o nome aqui pro nosso menu eu vou colocar menu principal você pode escrever menu principal vou clicar aqui em criar menu você pode habilitar essa abinha aqui ó

de de cabeçalho e vai clicar aqui em salvar e aqui em páginas né a gente consegue ver todas as páginas que tem no site então eu vou colocar essa página aqui que é a página home vou colocar a página de loja e vou colocar a página de contato aí eu selecionei todas que eu quero e clico aqui em adicionar ao menu e aí por aqui eu consigo mover para deixar na ordem que eu quiser então vou mover a home para cima o contato vai ser o último E aí agora as categorias dos produtos eu vou

selecionar elas não aparecem aqui tá vendo apce só categoria normal do do blog aí para elas aparecerem você rola a tela tela em cima clica aqui em cima em opções de tela e habilita aqui ó categorias de produto aí ela vai começar a aparecer aqui aí você clica em inver tudo e selecionar as que você quer que apareça lá em cima eu vou colocar fones de ouvido relógio luzes vou colocar fone de ouvid relógios e luzes mesmo e microfone também eu vou clicar em adicionar ao menu não precisa pôr tudo tá só a intenção é

você colocar as mais pesquisadas as que as pessoas mais compram no seu site para ficar já de fácil acesso então eu vou pegar a página de contato vou arrastar aqui pro final e aqui na página da loja eu vou abrir ó tá vendo cliquei para abrir e aqui no título eu vou mudar para todos os produtos que às vezes se a gente deixar só escrito lja a pessoa não entende que é lá que vai ter todos os produtos aí eu vou mudar para todos os produtos que aí fica melhor eu vou clicar em salvar mendor

ó acessando aqui o nosso site agora a gente tem um menuzinho tá vendo se a gente clicar aqui em loja que é em todos os produtos ele vai para cá se a gente clicar em contato vai pra página de contato a gente já tem o nosso menu criado agora nós vamos para o nosso passo três que é começar a criar real mente o layout aqui da nossa loja nós vamos instalar agora o Elementor free o Elementor free ou Elementor gratuito é um plugin Lembra que eu te falei que plugins são como se fosse aplicativos que

adicionam funções ao site Então se a gente quiser editar o nosso site aqui só com os recursos do WordPress é muito limitado a gente não consegue fazer uns layouts bem bonitos do jeito que a gente quer e o plugin Elementor permite que a gente faça isso quando a gente instalou o nosso tema ele já ficou pedindo aqui pra gente instalar o elementor Tá vendo porque o o tema ele depende do elementor para ser construído o site né então você pode clicar aqui mesmo se tiver aparecendo esse aviso para você se não tiver você vem em

plugins Adicionar novo né adicionar plugin vem aqui em populares aí vai ter aqui o elementor você clica em instalar e depois em ativar toda vez os plugins que você quiser pô a mais são assim adicionar plugin ou você vem aqui populares ou você pesquisa nessa lupinha aqui tá vendo você pesquisar aqui no nessa lupinha você vai encontrar os qualquer tipo de plugin também E aí instala e ativa e depois disso você recarrega a página que ele vai começar a aparecer essa abinha aqui para você preencher você pode clicar aqui em pular conta pular pular pular

ele vai te levar para uma página de teste aqui do Elementor er que ele cria para você ver como que o painel é você pode apagar essa parte aqui de cima do link ó e voltar ali pro seu painel administrativo tá aí você pode perceber que abriu aqui duas caixinhas agora essa aqui do elementor e essa do modelos os dois são do Plugin elementor aí a gente vai precisar agora comprar a versão Pro desse plugin que os recursos de loja que a gente vai precisar a gente depende da função pro do elementor se você não

quiser pagar pela função pro do elementor tem outros vídeos aqui no canal que eu Já ensinei vocês a criar loja só com Elementor free tem essa loja e essa loja aqui ó ó eu fiz essa aqui com o modelinho de joias né semijoias mas enfim não importa você pode fazer para qualquer nicho e tem essa outra loja aqui que eu fiz com modelo de loja de roupas Tá você também pode adaptar para qualquer nicho então se você não quiser pagar pela plugin elementor tem esses outros tutoriais aqui para você também eu vou deixar o link

no C na descrição desse outro vídeo para você ir lá aprender Tá mas enfim como eu te falei Nós somos parceiros e afiliados né das plataformas que a gente mostra aqui como o a Hostinger e o elementor e o nosso link de afiliado fica aqui na descrição do vídeo então se você ó vi aqui na descrição e clicar em mais se não tiver por aqui vai estar ali do lado você olha aqui embaixo do vídeo onde é que vai est você clica em mais que aí você consegue ver toda a descrição do vídeo E aí

o nosso link aqui do elementor vai estar aqui ó adquiro o elementor pro aí você clica Se você comprar direto com o nosso link você ajuda a gente a trazer mais conteúdos relevantes aqui para você no canal tá E aí eu já te mando aqui pra página de preços do elementor né porque no site do elementor mesmo ele tem várias páginas e aqui eu já te mando na página da onde que você tem que comprar ele vem em inglês mesmo se você quiser você pode clicar com o botão direito e clicar em traduzir para português

que aí vai ó vai traduzir aqui você vai conseguir ver direitinho e aí tem alguns planos aqui no pacote ele é um plugin estrangeiro então ele vende em dólar tá você tem que considerar que esse valor aqui é em E você tem que comprar para usar na loja pelo menos esse plano avançado porque repare aqui ó tá vendo aqui ele mostra os recursos que tem e nesse plano menor aqui ele não tem os recursos de loja né que são os recursos de Woocommerce e se você comprar esse daqui também você pode usar em até três

sites né se você quiser se você olhar aqui ó ele tem escrito recursos de comércio eletrônico que é justamente loja online né se você tiver traduzido aqui ó Woocommerce filters né que é comercio online que é loja virtual então você escolhe o seu plano clica aqui em comprar preenche os dados aí depois que você efetuar a compra você pode logar aqui no site na verdade quando você compra ele já te manda logado né porque ele te pede para criar a conta mas se você não tiver logado É só você clicar lá em cima no site

em login tá E aí você vai ser redirecionado para a sua conta aí aqui na parte de cima tá vendo ó tem um uma chavinha uma setinha você clica clica aqui em cima de elementor pro baixa o plugin ó ele baixou aqui no meu computador agora a gente vai vir aqui em plugins Adicionar novo Enviar plugin Quando você compra um plugin de Fora geralmente você tem que subir ele dessa forma aqui no site tá aí você vai pesquisar lá no seu computador ele vem com a pasta zipada não é para abrir para deixar desse jeito

mesmo tá vendo ó 3.21.1 esse é o arquivo do elementor aí você arrasta para cá bem para cima desse nome clica em instalar e depois em ativar Pronto agora a gente tem que ativar a nossa licença né Porque só instalado do Plugin aqui também ele não funciona você tem que conectar a sua licença se você tiver aqui em plugins plugins instalados tem esse botãozinho aqui conectar Licença ou então aqui em elementor lá embaixo tá vendo tem escrito licença aí você clica aqui em conectar e ativar você tem que est logado para ele permitir se você

não tiver ele vai pedir para você logar aí você clica em ativar minha licença agora a gente já comprou as ferramentas não vamos precisar comprar mais nada aqui tá tudo que a gente vai usar agora é gratuito aí vamos fazer a primeira configuração de layout que são as configurações padrões do tema tá aí a gente vai vir aqui em modelos modelos salvos vamos clicar aqui em todos aí tem aqui kit padrão o kit padrão é justamente as configurações padrões do tema cores fonte tamanho de fonte porque quando a gente vai fazer um site assim que

tem muita coisa se você tiver que ficar editando um por um do do estilo de fonte leva muito tempo enquanto que se você já fizer essas configurações padrões né Depois você só pode puxar lá essas configurações fica mais fácil de ter que ficar digitando toda hora a cor e o tamanho das cores tá então você clica aqui em editar com elementor ó ele já vai te levar aqui para as configurações padrões do site você clica aqui em cores glob já te mostra aqui aí essa aqui é a cor primária a gente vai vir aqui e

vai colocar o azul claro como a nossa cor primária vou deixar esse arquivo para você também lá no nosso material de apoio tá com códigos das fontes aqui e tudo mais tem o azul escuro também eu vou pegar aqui vou vir aqui em cores personalizadas vou adicionar uma cor e vou colocar meu azul escuro aqui aqui as cores de subtítulo e texto eu vou deixar essa mesmo e as cores de Realce né que são as cores de botões eu vou deixar de verde aí eu vou colar essa cor verde aqui pronto também vou clicar em

adicionar cor e já vou deixar a cor branca customizada para quando a gente for pegar já tá aqui e também vou colocar a cor de sombra que eu vou usar vou clicar aqui colar essa cor você cola bem aqui tá vendo ó onde que tem aqui a caixinha e também se você quiser escolher uma cor você clica e aí você pode arrastar aqui para qualquer lugar ó se você não não tiver ainda paleta de cores e quiser aprender a criar paleta de cor combinar a cor tem vídeo no canal ensinando também tá ó vou excluir

esse daqui vou clicar em excluir porque eu coloquei só para mostrar né aí depois de tudo feito você clica em atualizar tá agora vamos clicar ali em cima nessa setinha vamos clicar em Fontes globais ó El já vai mostrando aqui pra gente aqui em primário eu vou colocar a fonte Jost vou usar essa fonte em todo o meu site tô gostando muito de usar ela em loja porque ela fica bem Clean então aqui no título mesmo eu deixei anotado vai ser Jost tamanho 19 ó então aqui no tamanho ser 19 peso 500 aqui na secundária

vai ser Jost 17 peso 500 aqui na de texto vai ser Jost também 15 peso 400 e aqui no real também vai ser 15 peso 500 fonte Jost pronto vou adicionar umas fontes personalizadas aqui também essa daqui a Jost 21 peso 600 que é para colocar al títulos maiores 21 peso 600 peso é espessura tá grossura peso 600 vou colocar uma outra aqui que é adJost 17 peso 400 vou clicar em atualizar aí já deixei aqui todas as minhas Fontes configuradas aí eu posso clicar no xizinho aqui para sair né voltei uma outra coisa que

a gente pode fazer na verdade ó vamos clicar lá em editar de novo editar com elementor pra gente terminar de configurar aqui também olha aqui na parte de Identidade do site a gente já pode deixar configurado a nossa logo a gente clica enviar arquivo e a gente arrasta a nossa logo para cá eu vou deixar para você na nossa pasta Ó tem a nossa logo aqui já vou subir os dois a logo e o ícone ó clica aqui seleciona e aí aqui embaixo a gente coloca o five econ do site five ion é esse iconz

Minho aqui tá vendo que esse site aqui tem o ícone colorido então é esse ícone aqui pra gente poder identificar nas Abas aí você clica aqui clica em enviar arquivo aliás eu já tenho ele aqui né Eu já subi junto com a outra aí você seleciona e clica em atualizar aí beleza agora sim eu posso fechar aqui já ó já vai est mostrando meu ícone ali em cima agora A gente vai pra criação do nosso menu e do nosso rodapé E Agora Nós temos uma novidade também eu ensino vocês a criar o site passo a

passo né todos os aspectos clique a clique Mas se você quiser comprar o template que é uma cópia exata desse site a gente tá vendendo também então a gente tem a nossa loja que é templates pdcom andos sites.com.br O link tá na descrição do vídeo e também se você acessar o meu site descomunal sites.com.br tem aqui no menu a aba de templates E aí você vem pra nossa loja um template é uma cópia exata de como o site está aqui então você vai subir esse template no seu WordPress e ele vai virar este site aqui

qual que é a vantagem disso que a você não precisa criar todas as páginas todos os aspectos aí você pode só ir lá e mudar mudar os produtos né mudar de repente aqui o nome das páginas trocar os banners trocar as cores você não precisa criar a estrutura é só você adaptar pro seu então se você quiser adquirir vou deixar o link aqui na descrição do vídeo e você acessa aqui a nossa loja e adquire o template por enquanto nosso menu e rodapé está assim né está aqui com essas configurações porque ele tá puxando as

configurações padrões ali do tema né a gente vai mudar isso então pra gente criar o nosso menu rodapé a gente vem aqui em modelos já estamos aqui em modelos né a gente clica aqui em Adicionar novo a gente vai selecionar o tipo de modelo que a gente vai querer um modelo é um layout que a gente cria para substituir o que já existe então assim o padrão do tema é esse aqui a a gente vai criar um que vai colar em cima dele que vai ficar automaticamente em cima dele e substituí-lo tá então vem escolhe

aqui header header também chamado de cabeçário é toda essa estrutura aqui de cima menu são esses links né que a gente fez e o header é toda essa estrutura aqui então vai ser header Aí você coloca o nome eu vou colocar assim menu principal vou clicar em criar modelo quando a gente cria ele já nos dá algumas opções aqui que a gente pode usar com padrão eu não vou querer vou clicar no x aí eu vou vir aqui eu vou clicar no card vou clicar em flex box e vou pegar um que tem uma setinha

que vai pro lado quando a setinha tá pro lado significa que as coisas vão ficar um do lado da outra quando ela está para baixo as coisas vão ficar um abaixo da outra tá nosso caso aqui vai ficar do lado vou vir aqui em estilo tipo de fundo vou configurar a cor do fundo aí aqui em cor tá vendo que tem esse símbolo do do mundo né do mundinho se você clicar nele você consegue pegar as cores padrões ali que você define New tá então vou puxar Azul vou vir aqui em avançado e em preenchimento

ou padding né Se tiver escrito em inglês o seu é o espaço de dentro eu vou deixar 10 de padding vou vir aqui na biblioteca ó aqui que tem o o que a gente chama de widgets que são esses itens que a gente vai arrastando e soltando para cá para montar a nossa página tá então quando eu diser biblioteca é aqui nesses quadradinhos e o widgets são esses itens aqui tá então vou pegar aqui o com widget de título comum aqui ó vou baixar aqui para baixo esse aqui é básico título arrastei para cá vou

vir aqui em estilo vou deixar ele Centralizado vou deixar aqui carregado o modelo de site aqui para eu poder ir pegando as informações né então vai ter essa frase aqui que eu vou deixar aqui na parte de cima copiei ela lá aí eu venho aqui em conteúdo aqui dentro dessa caixinha você pode escrever o que você quiser aí eu vou colar o isto aqui vou vir aqui no contêiner contêiner São essas Abas tá vendo que a gente vai usando para dividir os itens aí quando eu disser contêiner principal é aqui em cima onde é rosa

tá então vou clicar aqui no contêiner vou vir em layout vou vir aqui em justificar conteúdo vou deixar aqui alinhada ao centro aí vou clicar no item tá vendo ó aqui é o contêiner né que é a parte do fundo e aqui é o item o item tem um lapizinho ó vou clicar aqui no item vou vir em essa cor eu vou mudar para branco e a tipografia eu vou pegar essa daqui que é tamanho 17 pronto vou clicar aqui vou clicar em flexbox pegar outro com a setinha pro lado vou vir aqui na biblioteca

vou arrastar aqui a logo do site para cá ele já vai puxar automaticamente vou voltar na biblioteca vou arrastar aqui também uma caixa de ícone vou clicar em cima dessa caixa de ícone vou apagar esse texto que tem aqui embaixo e apagar esse título e substituir por esses que estão aqui que é entrar barra cadastrar vou colocar ele aqui no título e aqui no subtítulo vou colocar minha conta pronto vou duplicar nesse outro eu vou escrever esses outros títulos tô copiando que eu já tenho o meu aqui tá se você for escrever outra coisa você

pode escrever e também vou vir aqui na biblioteca vou pegar esse widget de menu cart e vou colocar aqui temos todos os itens agora a gente vai clicar aqui em publicar adicionar condition né que isso aqui é a condição que vai fazer esse menu aparecer no site a gente clica aqui a gente vai deixar esse mesmo entry site e vai clicar em salvar e fechar pronto aí tá faltando agora a gente colocar essa Barrinha aqui aí depois que eu colocar a Barrinha a gente termina de customizar essa Barrinha aqui ela não tem no elementor a

gente precisa de um plugin a mais e é gratuito esse plugin tá você vai acessar aqui o painel administrativo do seu site vai vir em plugins adicionar plugin vai vir aqui vai pesquisar por fibo search AJ bem desse jeito como tá escrito aqui você vai instalar e depois ativar essa Barrinha ela é uma barrinha de pesquisa igual tem loja grande que quando você vai escrevendo aparece essos produtos aqui tá vendo Então é bem interessante Pronto já ativamos aí vamos recarregar a página Vamos clicar em alo e continue Pronto já nos levou aqui pra página do

fibo search se não tiver levado aqui no comce ó você passa o mouse aí vai ter aqui ó fibo Search aí você clica em cima pronto aí nós vamos primeiro copiar esse short code ó short code é um código curto que puxa uma informação que a gente quer aí a gente vai vir aqui vai pegar um widget de short code vai arrastar aqui para cá pro meio e vai colar aqui e vai clicar em atualizar agora a gente vai vir aqui em barra de pesquisa aqui é como a barra de pesquisa está E aí a

gente vai customizando para ela ficar do jeito que a gente quer vou clicar aqui em mostrar configurações avançadas a quantidade mínima de caracteres ou seja de letra para el começar a pesquisar que é três largura máxima eu vou deixar em 16 mesmo aqui é o que fica escrito ali dentro ó vou vou deixar pesquisar produtos mesmo aqui é o estilo eu vou mudar o estilo para os Solares que é esse mais mais clean aqui que a gente tá usando ess se mostrar botão de envio eu vou desativar que aí vai ficar com iconeinstagram ó isso

aqui aí a gente vai configurar por aqui ó o limite né a quantidade máxima de produtos que aparece aqui o texto que aparece quando não tem nenhum produto se é para mostrar a imagem do produto se é para mostrar o preço ó vai aparecendo aqui se você quer que apareça o preço a descrição não recomendo que eu coloca a descrição senão ó fica muito poluído mas pelo menos o preço e também o título fica interessante o sku também se você quiser eu sugiro que não ver todos os produtos que é esse testinho que está aqui

tá E aqui também sugesto de cores você pode vir aqui e alterar ó aí você vai olhando e alterando cor do fundo é sugestão selecionada só essa daqui que eu vou alterar para um cinza bem clarinho pronto o restante vou deixar como está beleza se a gente acessar aqui o nosso site agora vai estar mostrando a Barrinha ó tá pra a gente pesquisar vai tá aparecendo aqui pronto agora a gente pode clicar em recarregar aqui o nosso site e vamos ajustar aqui os tamanhos a gente vai transformar todo unidade de medida aqui nosso contêiner em

porcentagem a gente vai clicar aqui nele nesses tracinhos Rosa vai vir aqui espaçamento vai mudar de pixel para porcentagem vai colocar dois e vai clicar em atualizar aí a gente vai vir aqui nessa logo vai vir em avançado em largura a gente vai deixar em personalizado e vamos deixar em 17% aí a gente vai vir aqui na nossa Barrinha vai vir em avançado deixar personalizada Vamos colocar 42% nesses aqui a gente vai vir avançado personalizado Vamos colocar no primeiro 11% e no segundo 18% e no último 3% no último vai ser o Card né vamos

vir em avançada personalizado e vamos deixar TR C pronto clicamos em atualizar agora vamos fazer alguns ajustes aqui na logo a gente pode clicar nela vir em estilo deixar aqui a linhada esquerda vir em largura e diminuir um pouco a largura ó vamos deixar aqui 75 de largura aqui nesses itens a gente vai clicar vai vir aqui em ícone aliás vai vir aqui em conteúdo vai excluir o ícone né porque esse aqui não tem ícone aí aqui na tipografia a gente vai pegar essa de texto né Vamos deixar Jost é peso 400 15 peso 400

e a cor a gente vai mudar para essa cor de texto e aí aqui na descrição a cor a gente vai mudar para azul e aqui na tipografia a gente vai deixar essa de de J 17 peso Vamos mudar para peso 500 aí aqui encaixa em espaçamento do conteúdo a gente vai diminuir vamos deixar zero e vamos deixar ele alinhado à esquerda ó vamos clicar nele com o botão direito clicar em copiar clicar nesse aqui com o botão direito e clicar em colar estilo que ele já vai copiar o estilo aqui do texto aí a

gente vai clicar nele vai vir em conteúdo aqui em ícone a gente vai clicar em enviar ícone svg vai aparecer esse aviso na primeira vez que você for fazer é só clicar em ativar aí você vai lá no nosso material de apoio na pasta de ícones vai puxar o ícone de Maps e vai arrastar para cá aqui no elementor também tem ícone de Maps mas eu gostei mais desse vai clicar aqui em inserir mídia vai vir aqui em estilo a posição do ícone nós vamos deixar na esquerda aqui ícone o tamanho do ícone a gente

vai diminuir deixar mais ou menos tamanho 30 vamos vir aqui em caixa aqui em cima em espaçamento do ícone a gente vai diminuir e aqui em alinhamento vertical a gente vai deixar aqui alinhada ao meio deixa ver se eu deixei aqui do tamanho certo ah eu coloquei errado tá vendo por ISO que tá pequeno faltou eu eu ajustar aqui na verdade ó aqui em avançado esse largura personalizada esse tem que ser 18 que ele é maior só esse aqui que é 11 pronto beleza aí agora vamos vir aqui no card de carrinho aí vamos clicar

aqui em conteúdo aqui em subtotal nós vamos tirar eu quero que apareça só o carrinho aqui no tipo do carrinho eu vou escolher essa cesta média que ela fica um pouco mais escura alinhamento eu vou deixar o centro aí vou vir aqui estilo em largura da borda eu vou deixar zero não quero que tenha aquela borda ali e em padding que é o espaçamento de dentro aqui eu vou deixar zero aí beleza ficou assim agora o tamanho do ícone eu vou aumentar um pouco vai ficar tamanho 25 aqui na cor do ícone eu vou pegar

essa cor azul escuro e aqui na cor do indicador de itens ó na cor do texto eu vou deixar de branco e na cor de fundo do indicador vou deixar de azul beleza agora vamos ir aqui no contêiner principal vamos vir aqui em ajustar conteúdo vamos deixar aqui ó espaço espaço entre para ficar um espaço entre todos eles e aqui em alinhar os itens vamos deixar alinhados ao centro que tava um maior que o outro né aí nesse aqui do carrinho a gente vai clicar vai vir em avançado em margem a gente vai desenc ó

vai clicar aqui para desenc aqui na margem inferior a gente vai tirar um pouco ó vai deixar menos sete só para poder tirar aquele espaço em branco que estava aqui aí vai clicar em atualizar agora para ficar clicável isso aqui ó para a pessoa conseguir clicar lá na página de minha conta é só você vir aqui em conteúdo tá vendo todos esses itens aqui vai ter abinha de link é só você colar o link aqui ou no nosso caso como é um site você pode vir e começar a digitar o nome da página que ela

vai aparecer ó minha conta tá vendo aí Já copiou o link vou copiar esse link aqui vou acessar aqui no navegador aí eu vou clicar aqui onde tem pedidos aí eu vou copiar o link aqui da página de pedidos E aqui onde está o o meu produto para rastrear eu vou colar essa página porque por lá a pessoa consegue clicar no pedido dela e rastrear né Então tá aqui e vou clicar em atualizar aí agora falta esse menu Aqui de baixo né a gente já criou ele lá dentro do site Vamos só chamar ele aqui

customizar então aqui a gente vai clicar nest vai clicar em flexbox vai pegar um que tem uma setinha pro lado vai vir em avançado aqui em preenchimento né a gente vai colocar 10 Vamos ir na biblioteca pegar esse Widget de menu do WordPress arrastar para cá deixar ele aqui Centralizado vamos vir aqui no contêiner principal layout vamos deixar ele alinhado ao centro vamos clicar nele para voltar vir estilo a cor do texto vamos deixar de azul a tipografia vamos deixar essa de texto aí vamos clicar aqui no lapizinho da tipografia em trans formação vamos deixar

maiúsculo na verdade Vamos aumentar aqui o tamanho para 17 pronto aí vamos vir aqui em conteúdo tá vendo que quando a gente passa o mouse faz um um tracinho embaixo eu quero mudar isso e deixar assim para ficar com a cor de fundo aí a gente vai vir aqui em ponteiro e vai mudar para fundo aí vai ficar assim beleza agora a gente vai vir aqui n estilo n espaço vertical a gente vai diminuir deixar TR aqui na cor do Rover né que é essa ação de passar o mouse eu vou clicar e vou mudar

para Azul ele vai ficar assim e no ativo aqui na cor do texto eu vou deixar de branco e na cor de fundo eu vou deixar Azul então quando tiver que nem aqui tá na página home ativo aí fica assim Beleza vou clicar aqui em atualizar tá sempre clica aqui em atualizar agora a gente já terminou de criar o nosso menu aqui pro computador só que a gente precisa adaptar pros dispositivos móveis né que é pro celular e pro tablet pra você conseguir adaptar tem essa abinha aqui embaixo ó Onde tem escrito modo responsivo você

vai clicar e aí aqui é como a gente tá vendo no computador se você clicar aqui você vê como está no tablet e se você clicar aqui você vê como está no celular tá eu tinha mexido aqui já não gravei mas no seu vai estar assim né um do lado do outro então o que que você vai fazer você vai clicar nesse contêiner vai vir aqui em itens vai deixar um abaixo do outro para parar de arrastar pro lado Igual estava E aí a gente vai fazer uma adaptação por quê se você faz as configurações

aqui no modo responsivo né se você não excluir não arrastar nada não mudar de lugar você consegue só alterar uma coisa que fica só pro celular e as outras alterações que você fez fica só no computador por exemplo mas aqui no nosso caso não vai funcionar então eu vou criar um novo só para celular você vai clicar aqui clicar em layout a setinha pro lado vai clicar aqui em cima clicar com o botão direito clicar em copiar vem aqui dentro clica o botão direito colar aqui na lupinha eu vou clicar com o botão direito copiar

vou clicar aqui colar e aqui em entrar a minha contra eu vou clicar com o botão direito copiar clicar com botão direito aqui na na logo e colar e no menu vou clicar com o botão direito copiar clicar com o botão direito na logo e colar aí vai ficar assim logo menu entrar e pesquisa tá aí você vai vir nesse contêiner se certificar que tá com a setinha pro lado ó um do lado do outro aí você vai vir aqui nessa imagem vai vir em avançado em largura você vai deixar personalizado vai mudar isso aqui

para porcentagem você vai deixar 33 de porcentagem e aqui em estilo você vai aumentar o tamanho da logo pode deixar 100% aqui no menu você vai clicar vai vir em avançado em largura vai mudar para personalizado vai mudar a unidade de medida para porcentagem e vai deixar 13% e aqui entrar você vai clicar vai vir em avançado largura personalizado vai mudar para porcentagem e vai colocar 38% aí vai ficar os três do lado do outro nesse aqui você vai clicar vai vir em avançado largura vai deixar 100% vai ficar assim aí você vai clicar no

container vai vir e avançado vai colocar 10 de preenchimento aí você vai clicar ainda nas container principal vir em layout aqui em ajustar o conteúdo e deixar ajustada ao centro E aqui embaixo também ó deixar ajustado ao centro aqui no menu você vai clicar em avançado aqui em margem você vai desvincular no inferior você vai diminuir Aí ele vai ficar bem Centralizado ó aí no mobile vai ficar assim esse que tá aqui em cima a gente vai ocultar ele pro celular é só você clicar nesse contêiner vir em avançado vir em responsivo e vir aqui

em ocutar para dispositivos móveis ó aí quando você colocar no celular não vai aparecer aí tem esse outro contêiner Aqui de baixo né que tem só o menu a gente vai clicar avançado responsivel ou tá para dispositivos móveis ó quando tá aberto no editor você consegue ver ele assim né mostrando que ele está aqui só que está oculto quando você fecha você vê como ele realmente fica no celular que é dessa maneira agora vamos corrigir o menu porque quando tá clicando ele tá ficando assim isso é normal a gente vai clicar no menu né no

lapizinho virem aqui em conteúdo E aqui onde tem assim ó largura total você vai ativar Aí ele vai ficar dessa maneira aí vamos ver aqui em estilo lista suspensa que é isso aqui que abre quando a gente clica no ícone inho do menu a cor de fundo a gente vai clicar e vai pegar o azul e a cor do texto a gente vai colocar o branco ficou assim vou ver aqui no espaço vertical vou aumentar um pouquinho ó pronto e a ação de passar o mouse que é o Rover eu vou deixar a cor do

texto de branco e a cor do fundo de azul vai ficar assim e no ativo também a cor do texto de branco e a cor do fundo de azul agora eu vou clicar novamente aqui no menu agora que já saiu o bug dele vou tirar esse menos 12 que ali para ele ficar certinho pronto vou clicar em atualizar E aí beleza já atualizamos aqui pro celular aí pro tablet é só você colocar aqui em tablet e adaptar tá vendo o nosso menu aqui que é do computador ele não tá tão ruim aqui pro tablet então

dá pra gente modificar a gente pode vir aqui na logo vir aqui em imagem aumentar o tamanho dela ó vamos deixar aqui també 98 podemos vir aqui na lupinha vira aqui em largura personalizado aí a gente pode mudar aqui para porcentagem diminuir né Um pouquinho a porcentagem V deixar aqui 32 e esse aqui a gente aumenta clica vem avançado largura largura personalizada muda para porcentagem e Aumenta até não quebrar a linha mais vamos deixar tamanho 16 nesse aqui é a mesma coisa clica avançado largura largura personalizado muda para porcentagem e aumenta para não quebrar a

linha mais aí nesse aqui em estilo no ícone você pode diminuir o tamanho do ícone para ele pegar menos espaço ó aí você volta lá em avançado diminui a largura dele Pronto ele ficou 26 tá arrastando um pouquinho pro lado a gente pode diminuir um pouquinho o tamanho de um dos outros pode ser esse aqui da lupinha a gente vem vem aqui em avançado largura personalizar deixa aqui em porcentagem e a gente vem e diminui aí esse menu aqui a gente vai clicar vai vir em conteúdo aqui em Break Point a gente vai deixar nenhum

que aí o menu vai ficar assim a ele vai ficar em duas linhas a gente pode vir aqui estilo tipografia diminuir o tamanho dele né Vamos deixar tamanho 15 e vamos vir aqui em espaço horizontal e diminuir o tamanho ó que aí ele vai ficar um tamanho legal aqui e a gente vai clicar nesse aqui que a gente fez pro celular vai clicar em cima dele vai vir em avançado responsivo ocultar para tablet e ocultar para a desktop né que é o computador ó aí no tablet ele vai ficar assim no computador vai ficar assim

e no celular vai ficar assim pronto agora sim olha agora faça uma conferência aqui é muito importante tá vamos clicar em atualizar se por acaso o seu não estiver aparecendo no site né se você acessar aqui o seu site que nem eu vou acessar aqui o nosso e ele não tiver aparecendo aqui foi porque você não publicou então você vem clica aqui nessa setinha de salvar opções clica em exibir condições ó deve est assim no seu Você vai clicar em adicionar condições e vai salvar aí ele vai começar a aparecer Ok antes da gente ir

pro roda pé só um ajuste Zinho que eu acho que vai ficar bonitinho clica aqui no menu vem em estilo aqui em menu principal arredondamento coloca 30 para ficar assim arredondado o fundo quando a gente passa o mouse acho que fica mais bonitinho assim olha lá Pronto agora vamos para o nosso rodapé o rodapé essa parte aqui de baixo do site é muito importante ter Principalmente quando é um site grande assim e você a pessoa tá navegando pelo celular né ela tá navegando aqui pro outro celular aí às vezes ela quer voltar em alguma página

quer ir em alguma página não quer subir ali o site inteiro ou informações pelo celular são mais difíceis de captar então é importante ter né o rodapé E também porque você reúne aqui informações importantes tá então essa parte aqui de baixo e é uma parte que aparece em todas as páginas tá você faz uma vez só e ele já aparece igual o menu vamos entrar aqui dentro do painel vamos vir aqui em modelos Adicionar novo selecionar Vamos colocar aqui rodapé ou pode ser que esteja escrito footer tá no seu Se tiver em inglês footer aí

você vai dar um nome né vou colocar rodapé vou clicar em criar modelo Como sempre ele vai oferecer aos modelos padrões de elementor pra gente a gente não vai querer vai clicar aí vamos criar aqui essa parte aqui de cima primeiro vamos clicar aqui na no maizinho clicar em flexbox um container com a setinha pro lado vamos vir em avançado preenchimento Vamos colocar 30 aqui de padding vamos já clicar em publicar pra gente já deixar ele visível adicionar condições deixar em todo o site salvar vamos vir aqui na biblioteca Vamos pegar uma caixa de arrastar

para cá aí a gente pode duplicar duplicar duplicar vamos deixar quatro aqui né duplicamos assim aí vamos modificar vou colocar o título e o subtítulo tá vou ir copiando Então você clica o título você coloca aqui e o subtítulo aqui faz aí no seu eu vou copiar todos e colar aqui no meu Pronto já coloquei todos e aí você sempre vai clicando em atualizar tá para se acontecer coisa você exclui sem querer fechar o computador alguma coisa você não perder Ok então vamos deixar assim aí nesse primeiro aqui a gente vai colocar os ícones eu

deixei todos esses ícones aqui para você é só você clicar em envar ícones svg você vai entrar lá na pasta do drive né o material de apoio O link tá na descrição pasta ícones vai arrastar todos para cá com exceção do Maps que a gente já já tem a a gente arrasta todos puxa se não tiver aparecendo todos para você você recarreg a página tá salva e recarrega a página ó o primeiro é do caminhão segundo é o da Box depois esse aqui do telefone e depois esse aqui do cartão agora vamos clicar aqui no

ícone vir em estilo deixar aqui a posição do ícone pro lado espaço entre o ícone Vamos diminuir espaço entre o conteúdo a gente vai diminuir também aqui no no ícone aqui né na abinha de ícone em tamanho a gente vai diminuir também bem vamos deixar aqui o tamanho do ícone 38 fiz uma colinha aqui dos tamanhos dos títulos ó título primeiro jost 20600 então vamos vir aqui em conteúdo tipografia vou pegar essa daqui essa última deixa eu ver se é ela mesmo não então vou mudar Jost 20 peso 600 Ok e essa de baixo Jost

15 400 Então vou selecionar aqui ó tipografia selecionar o mundinho vou pegar essa de texto mesmo que é Jost 15 peso 400 já já é o que está né Na verdade nesse aqui a gente vai voltar aqui em estilo alinhamento vertical vamos deixar meio vamos clicar aqui em atualizar vamos clicar aqui nesse contêiner vamos vir aqui em layout Vamos mudar o layout do contêiner para a grade aí aqui a gente consegue determinar quantas linhas e quantas colunas vai ter aqui em linhas a gente vai mudar para um e em colunas vamos deixar quatro que aí

todos ficam do mesmo tamanho aí vamos clicar com o botão direito nesse clicar em copiar clicar em lá estilo ele não tá pegando o estilo Vou atualizar e recarregar pronto ó olha só um bugzinho recarreguei vou clicar com o botão direito copiar clicar com o botão direito colar o estilo clicar com o botão direito colar o estilo atualizar Pronto agora vamos fazer a parte aqui de baixo vamos clicar no mais no FlexBox Vamos pegar esse daqui ó esse que tem quatro contêineres dentro Vamos ir em avançado preenchimento Vamos colocar 40 aqui de padding atualizar vamos

vir aqui na biblioteca vamos arrastar um título para cá aí a gente vai ir copiando todos os títulos e colando aqui ó copia Cola aí eu vou duplicar esse arrastar pro outro copiar o outro título que eu quero e colar você vai fazer isso em todos tá pronto Agora vamos ir nos títulos Vamos ir em estilo cor vamos deixar de azul a tipografia a gente vai deixar título tamanho 21 peso 600 aí vamos clicar com botão direito clicar em copiar clicar com o botão direito clicar em colar estilo nos outros pronto sempre atualizando vamos vir

aqui na biblioteca vamos pegar no Widget de lista de ícones arrastar Aqui para baixo agora a gente vai fazer essa parte aqui ó só você ir copiando aqui você pode excluir todos os itens no primeiro você vai sempre vir aqui ó e vai vir na biblioteca do elementor vai procurar pelo icone Procure em inglês tá então por exemplo hora é clock a gente vem pega esse ícone cola aqui duplica abre Coloca outro ícone aqui no caso agora vai ser o do contato vai ser o de fone né a gente vem procura o de fone clique

em inserir cola o texto duplica agora vai ser do WhatsApp clica pesquisa por WhatsApp pronto duplica agora vai ser de e-mail tem vídeo ensinando a criar e-mail institucional assim com o nome do seu domínio aqui no canal tá para ficar mais profissional assim dessa forma vou deixar o link aqui também também você pode pesquisar no canal ó fiz aqui agora a gente vai vir aqui em ícones em ícone quer dizer em estilo ícone aí o tamanho do ícone Vamos aumentar só um pouco ok aqui em lista a gente vai aumentar o espaço entre os itens

vamos vir aqui na biblioteca aliás pode ser esse daqui clica no botão direito clique em duplicar aí eu vou pegar esse subtítulo aqui de horário de atendimento vou colar aqui vou vir estilo tipografia vou diminuir para tamanho 19 vou vir na cor e vou pegar esse cinza médio aqui pronto ficou assim a agora vamos fazer essa parte daqui nesse menu a gente vai duplicar essa lista de ícones arrastar Aqui para baixo a gente vai clicar em cima dela vai vir em conteúdo Excluir todos deixar só um vamos excluir o ícone Vamos usar só a lista

mesmo sem os ícones E aí a gente vai copiar todos os os tópicos que eu fiz de páginas aqui ó página sobre nós duplica página contato meus pedidos e tudo mais vai duplicando e vai colando Pronto agora nessa lista de ícones aqui aqui em estilo ó Nessa do primeiro Card a gente vai vir em texto tipografia vamos deixar tamanho 17 vamos clicar com botão direito copiar clicar com botão direito colar o estilo vai ficar assim aí a gente vai clicar duplicar arrastar aqui para nossas políticas e vai fazer a mesma coisa ó vai vir copiando

clica aqui escol tudo né aí você vai vir copiando pronto colou todas as políticas agora a gente vai clicar com o botão direito duplicar esse subtítulo arrastar para cá mudar para esse aqui De onde nos encontrar vai colar aqui o título Vamos ir na biblioteca pegar o widget de redes sociais arrastar para cá agora você vai colocar as redes sociais que você tem eu deixei várias aqui né Facebook YouTube Instagram tiktok são as principais essa aqui do Twitter É só você clicar em cima e pesquisar aqui por exemplo ó mudei para Instagram vou duplicar vou

duplicar e mudar para tiktok pode colocar Whatsapp também Opa clica aqui em todos os ícones que aí vai aparecer o tiktok pronto clica em atualizar vem aqui em forma muda para círculo vem e estilo cor oficial você muda para personalizado aqui nessa cor primária você muda para azul e aqui nessa cor secundária você muda para Branco aí aí o tamanho do ícone você diminui vamos vir aqui em conteúdo deixar alinhado pra esquerda agora aqui em formas de pagamento a gente vai vir na biblioteca vai arrastar um Widget de imagem Aqui para baixo vai vir em

resolução da imagem deixar completo atualizar clicar em cima da imagem clicar em enviar arquivos vai vir aqui na pasta vai vir em imagens na pasta imagens tá aí você vai arrastar esse aqui ó esse esse aqui de formas de imagem e também já pode arrastar esse aqui de site seguro vamos arrastar os dois aqui Opa arrastei errada vamos arrastar os dois aqui para cima já aí vamos selecionar o formas de pagamento vou clicar em duplicar nesse aqui de baixo já vou selecionar e vou colocar esse do site seguro vou duplicar o subtítulo arrastar Aqui para

baixo e vou mudar para esse aqui de loja verificada Lembrando que é bom você colocar esse aqui do o Reclame Aqui se você for verificar no Reclame Aqui se você abrir uma conta lá se não tiver vai lá e abre é facinho é bom pra sua reputação fica fica mais seguro a loja o SSL já é instalado automaticamente na hosing tá sempre atualizando agora vamos para essa parte aqui de baixo eu vou copiar esse texto que tem aqui vou clicar com o botão direito clicar em flexbox clicar nesse com a setinha para baixo vira em

estilo tipo de fundo no mundinho vou pegar a cor azul vou vira em avançado vou colocar 15 de padding vou vir em na biblioteca arrastar um Widget de texto para cá vira aqui colar esse texto aqui vira em estilo deixar ele alinhado ao centro vira em cor e vou mudar para branco vai ficar assim mesmo aí se você quiser fazer como eu aqui né e deixar por quem que foi desenvolvido você pode linkar o site aqui só você selecionar clicar nesse iconz de link aí aqui você vai colar o link do site que nem o

meu aqui que é o S vou clicar aqui vou clicar em atualizar ó pode vir aqui vir aqui na cor vir aqui em cor e deixar de branco de novo Pronto Olha pessoal agora pra gente fazer a linkagem né então eu vou te ensinar como fazer linkagem Ah aqui faltou a gente mudar um ícone né que é aqui do e-mail então você vem aqui e muda pro ícone de envelope que é o ícone de e-mail aqui no WhatsApp por exemplo ó na verdade todas essas listas de ícone quando você abre tem esse campo de link

E aí é só você colocar o link aqui o link do WhatsApp você pode entrar em qualquer site da internet que gera o link do WhatsApp é só você colar o link aqui aqui você vai colocando os links das páginas que a gente já criou Então é só você ir pesquisando a parte de sobre nós eu vou colocar dentro da página de contato então eu vou colocar aqui ó selecionar a página de contato depois a gente vem linka certinho na na sessão certa tá aqui da página de contato você linka página de contato mesmo essa

página de pedidos aqui é lá na página de minha conta pode ser esse mesmo link que tá ali em cima ó no menu ou você pode clicar aqui vem aqui em pedidos copia o link ali em cima pronto cola aqui aqui em acompanhe seu pedido também aqui em editar cadastro mesma coisa você vem aqui vem aqui em detalhes da conta Clica ali em cima copia cola aqui e em todos os produtos é a página de loja então é só você puxar por aqui beleza aqui em políticas a gente vai colocar todos políticas de privacidade primeiro

se não tiver puxando é porque a sua parte política de privacidade não tá publicada realmente a gente mexeu nela ainda não vou deixar para linkar esses daqui mais por último Então vou clicar em atualizar aqui em onde nos encontrar também a mesma coisa você clica aqui aí tem o link né eu vou colocar todos aqui o meu Instagram só para caráter de exemplo Então é só você colar que aí já vai ficar o link beleza esses daqui não precisa colocar não agora a gente vai clicar nesse contêiner clicar aqui em avançado aliás em estilo em

borda aqui em tipo de borda vamos deixar sólido vamos desencar os valores aqui no superior a gente vai deixar dois e aqui nessa cor a gente vai buscar esse cinza aí vai fazer uma listrinha cinza assim vamos clicar em atualizar vamos clicar aqui clicar em modo responsivel pra gente colocar aqui configurar no celular né Vamos clicar aqui clicar em avançado vamos deixar aqui 20 de padding vamos vir aqui virem estilo espaço entre os ícones vamos deixar zero vamos mudar o ícone aqui pro lado depois vamos mudar para cima de novo aí aqui a gente vai

clicar no contêiner vai vir em layout e vai aumentar as colunas para dois as linhas Vamos aumentar para dois também aí aqui é melhor a gente deixar assim um do lado do outro porque aí ocupa menos espaço de tela tá tudo bem ficar uns assim maior e outros menores não tem problema por conta do tamanho do texto mesmo tá a gente clica em atualizar pode clicar aqui também e vir em layout e vir aqui deixar alinhada ao centro que eles vão ficar com texto alinhado também eí ficou assim aqui a gente não precisa colocar um

do lado do outro só vir aqui no contêiner vir em avançado Vamos colocar aqui 20 de padding também para ficar menos espaço aqui pronto aqui como a gente colocou os tamanhos de texos bons não precisa ajustar nada só clicar aqui em atualizar e beleza aí vamos olhar aqui também no tablet que basicamente a gente pode vir aqui nesse contêiner vir aqui em colunas vamos deixar duas e duas linhas e aí vai ficar assim vai ficar com melhor espaço né aqui também a gente pode vir aqui nesse contêiner vir aqui em layout ó vamos mudar aqui

de Flexbox para grade aí a gente vai deixar aqui duas colunas e duas linhas e a cada um desses contêiners aqui ó a gente vai deixar largura vai vir aqui mudar largura porcentagem vai deixar 100 ó vamos clicar com o botão direito clicar em copiar clicar com o botão direito colar o estilo clicar com o botão direito colar o estilo clicar com o botão direito colar o estilo pronto aí ficou com espaço melhor aqui no no tablet tá beleza então olha aqui no computador como a gente fez esse ajuste aí ele deu esse erro é

só corrigir clica aqui vem aqui em porcentagem muda para sem clica aqui no botão direito copiar clico botão direito colar o estilo clico botão direito colar o estilo clique botão direito colar o estilo aí aqui a gente vai vir no contêiner aqui nas colunas vamos deixar quatro e em linhas vamos deixar um aí ficou assim clica em atualizar é que nesse contêiner tá vendo que como esse título aqui é menor e esse texto é menor fica esquisito porque ele fica muito aproximado Daqui parece que tá meio torto contornar isso a gente vai vir nesse contêiner

vai vir em avançado vamos deixar 10 de padding preenchimento né que é o espaço de dentro aí vamos desenc e aqui no preenchimento da esquerda a gente vai colocar 40 para ele ficar um pouquinho mais para cá vamos atualizar aí vamos olhar aqui tanto no tablet ó deu certo no tablet e no celular ele vai ficar mais afastado a gente clica nele e no celular a gente vem e deixa todos de 10 e atualiza Pronto já temos aqui o nosso rodapé Prontinho aí se você atualizar aqui o seu site ó já vai est aparecendo em

todas as páginas tanto menu quanto rodapé aí quando tem coisas assim no meio aparece o corpo da página aqui e o rodapé aqui embaixo e quando não tem aparece logo aqui embaixo já tá pronto Agora nós vamos começar a configurar a nossa página home que é a nossa página principal se você saiu do menu e do rodapé e quiser editar eles novamente é só vir em qualquer página aqui do WordPress passar o mouse em cima de Elementor ent vai ter os dois aqui tá vendo ó cabeçalho e roda pé aí é só você clicar em

cima que você vai diretamente pro editor para criar nossa página home que é nossa página principal e se você clica aqui na página home e não está aparecendo essa página principal aqui ó você acessa aqui o seu site quer dizer você acessa o seu site não tá aparecendo a página home como página principal é porque falta a gente definir a página home como sendo a página principal que é a página que vai aparecer quando alguém carrega o nosso link do nosso site é bem simples você vem aqui em painel vem aqui em configurações leitura vai

ter aqui sua pagina se exi você muda para uma página estática seleciona aqui a página home e clica em salvar alterações a se a gente acessar novamente o site ó a gente acessar novamente o site é para ele est aparecendo a página home Deixa eu ver se eu salvei acho que eu não salvei né salvei aí quando a gente acessar novamente o site vai ficar aparecendo nossa página home se não tiver aparecendo como não tá aparecendo o meu pode ser O plugin De Cache passa o mouse em cima dele clica nele limpar aí pronto agora

tá aparecendo inclusive vamos desativar esse plugin para ele não ficar nos atrapalhando vem plugins plugins instalados é esse plugin aqui do LiteSpeed você vai desativar apenas tá não vai excluir porque depois da loja pronta você precisa otimizar o site esse plugin é para deixar o site rápido tá só que como ele trava o Cache do site às vezes a gente fica tendo esses perrein então vamos desativar depois da loja pronta você ativa novamente tá então é assim para tá aparecendo o link aparecendo página home aqui OK beleza agora vai ser mais fácil tá o mais

difícil menu Rodapé que são tem várias coisinhas para fazer mas agora é mais tranquilo então você vai clicar aqui em cima editar página vai clicar em editar com elementor vai clicar aqui na engrenagem vai clicar aqui em layout da página vai deixar Elementor a largura total porque com Elementor a largura Total some aquele título que fica ali em cima e deixa a tela toda em Branca aí vamos fazer aqui então o nosso Carrossel aqui né nosso slide Você vai clicar vai clicar em flexbox vai pegar esse com a setinha pro lado vai vir aqui na

biblioteca vai pegar um widget de slide arrasta para cá aí pra gente deixar ele esticado na tela toda a gente vai clicar aqui em cima do contêiner vai clicar em layout aqui em largura do conteúdo vamos deixar largura total e em avançado vamos deixar zero em preenchimento presta atenção aqui tá que muita gente pergunta nos comentários Ah o meu tá ficando com espaço é por conta disso você tem que deixar zero de preenchimento e em layout você tem que deixar largura Total tá que aí ele fica ó esticado aqui na tela toda Beleza agora vamos

clicar no lapizinho escui todos deixa só um vem aqui nessa cor de fundo deixa branco aqui em conteúdo você vai apagar o título vai apagar o texto e aqui em fundo você vai clicar e vai upar a imagem dos banners para cá já deixei esses banners aqui para vocês ó e eu ensino a criar banner no canva tá canva no Photoshop tem na playlist design aqui do canal tem vários vídeos ensinando sobre isso então vai lá assistir pronto aí você vai clicar em selecionar aqui na altura a gente vai deixar 650 vai clicar em duplicar

nesse aqui você vai colocar outra imagem vai clicar em duplicar e nesse terceiro vai colocar outra imagem vai clicar em atualizar ó aí vai ficar assim a gente vai vir aqui vai vir em opções do slide aqui em transição a gente vai deixar Fade que ele vai vai mudar assim ó tá vendo vai ser mais suave aqui uma coisa que eu esqueci tá vendo que tem aqui cli que aqui é porque eu esqueci de tirar o texto aqui do botão então eu vou vir aqui em cada um deles e vou vir em conteúdo e tirar

o texto do botão teúdo tirar o texto do botão OK aí vocês estão percebendo que a imagem tá um pouco embaçada ó neste site aqui ela está mais nítida e aqui ela tá um pouco embaçada então configuração de otimização de imagens na Hostinger que pode ser isso que esteja deixando a imagem com uma qualidade pior você vai acessar lá o site da Hostinger vai clicar em logar aí você vai vir aqui em hospedagem vai clicar aqui em cima do seu site vai clicar em cima do domínio que tá hospedado o site vai pesquisar aqui na

lupinha por CDN vai clicar aqui vai clicar aqui nessa setinha vai vir em otimização de site vai desativar compressão de mais webp e também otimização inteligente já faz automaticamente aí você pode salvar aqui né O que você tiver vai fazendo no site e aí vamos recarregar pra gente ver pode demorar alguns minutos para ele reverter as imagens ou então você pode subir a imagem novamente também tá mais para frente no tutorial a gente volta a ver isso agora vamos continuar né Vamos modificar aqui o nosso slide vamos vir aqui em opções de slide vou tirar

a navegação de sets Vou deixar só pontos aí vai ficar só esses pontinhos aqui embaixo a gente vai vir em estilo navegação Vamos aumentar o tamanho dos nossos pontinhos aqui em cor a gente vai deixar com esse azul escuro vai vir aqui nele e vai diminuir a intensidade da cor e aí vai ficar assim a gente vai clicar em atualizar pronto sempre clicando em atualizar para não perder nada agora vamos para essa parte aqui das categorias as categorias a gente já criou lá dentro do WordPress Vamos só chamá-las aqui aqui clica no mais flexbox coner

com a seta pro lado avançado Vamos colocar aqui 50 de padding atualizar Vamos ir aqui na biblioteca pegar uma caixa de imagem arrasto para cá aí a gente vai excluir essa descrição Vamos usar só a parte do título né E aí você vai colocar as categorias principais aqui as que você acha que vende mais, clica o botão direito duplica clica botão direito duplica até ficar a quantidade que você quer aqui na minha eu vou deixar sete 3 6 7 falta uma aí você vai neste momento agora Copiar todas as categorias que você quer e ir

colando os títulos delas aqui pronto e aí a gente vai colocar as imagens de cada uma das categorias tá essas bolinhas esses círculos aqui eu fiz pelo canva tem vídeo aqui no canal ensinando você a fazer isso também é legal que você coloque todas as bolinhas todas as imagens do mesmo um tamanho tá para ficar certinho eu vou pegar aqui no nosso material Lembrando que tá disponível para vocês esse todas essas imagens aqui vou arrastar todos de uma vez aqui já pro site e vou ir colocando smartwatch headset então primeiro aqui é o smartwatch aqui

depois headset você vai colocando aí trocando no seu pronto depois disso a gente vai ajustar clica nesse primeiro vem aqui em estilo espaçamento da imagem vamos deixar zero imagem a gente vai aumentar ó deixar ela aqui tamanho 100 mesmo aqui no conteúdo a gente vai vir aqui em tipografia ele tem que tá aqui tamanho 17 peso 400 e a cor tem que ser esse azul escuro aí a gente vai voltar aqui em estilo em espaço do conteúdo Vamos diminuir ou deixar zero vamos voltar na imagem ao passar o mouse vamos aqui em animação passar o

mouse deixar grow que é essa ação de crescer eí para colocar o link de cada uma tem a abinha do link aqui e você pode descobrir o link das categorias vindo aqui dentro do painel administrativo vindo aqui em produtos categorias aí tem todas as categorias aqui ó aí é só você passar o mouse em cima de ver clicar com o botão direito clicar em copiar o link tá então ó por exemplo smartwatch clique em ver clique em copiar endereço do link aí eu venho aqui venho em link e clico em colar tá você vai fazendo

isso em todos os seus colando o link aí depois que você colocar o link você clica com o botão direito copiar clica o botão direito colar estilo em todos os outros agora vamos ajustar o tamanho clica no contêiner vem no layout muda aqui pra grade aqui nós vamos deixar Sete Colunas e apenas uma linha vai ficar assim vamos clicar em atualizar agora essa parte aqui do Carrossel dos produtos clicar em flex Box pegar um contêiner com a setinha para baixo virem avançado colocar 50 de pad clicar em atualizar vamos clicar aqui na biblioteca arrastar um

contêiner para cá contêiner aqui para dentro vamos vir aqui na biblioteca arrastar um título para cá esse aqui ver todos vamos colar ver todos e também vamos ir na biblioteca e arrastar um botão botão tem que ficar depois desse vez todos vamos clicar aqui no contêiner principal e colocar ele com a linha horizontal ó pra ficar um do lado do outro aí nesse que é o botão a gente vai colocar aqui fone de ouvido ó vamos clicar no botão aqui no texto Vamos colocar fone de ouvido vamos vir aqui em estilo preenchimento vamos deixar zero

cor de fundo vamos deixar Branco cor do texto vamos deixar Azul tipografia vamos deixar primário tipo de borda sólido desenc os valores e só no inferior a gente coloca a borda arredondamento né raio da borda vamos deixar zero preenchimento vamos desvincular e aqui no inferior a gente vai aumentar vamos deixar cinco vamos vir aqui nesse contêiner interno cont interno é quando tem essa caixinha aqui clica aí vamos vir aqui em espaço entry para deixar um para cá e um para cá Ok vamos clicar em atualizar agora a gente vai criar um modelo que é o

modelo dos cards do produto se você quiser fazer um Carrocel assim como eu vou fazer tá você não quiser fazer um Carrossel se você quiser colocar só quatro produtos não precisa criar esse modelo você pode vir aqui na biblioteca vir aqui e digitar produtos ó produtos arrastar Aqui para baixo aí vai mostrar os produtos aqui aí você vai vir em estilo vai fazer as mesmas configurações que eu vou ensinar ali no card Ok eu quero criar um cé então eu gosto de criar um modelo que aí a gente pode chamar em todos os lugares tá

para fazer isso você vai acessar aqui o seu painel administrativo vir em modelos Adicionar novo escolher aqui loop item de loop escolher produtos e colocar um nome né eu vou colocar card de produto Card é cartão produto vou clicar em criar modelo vou clicar em fechar vou clicar blackx Box clicar com a setinha para baixo aí vou clicar na biblioteca arrastar um outro contêiner para cá isso só porque o Elementor não tá pegando a sombra que a gente tá colocando a eu t tendo P um dedo do outro tá aí aqui nesse contêiner Você vai

clicar vai vir em estilo cor né tipo de fundo vai colocar cor branca vai vir aqui em borda sombra da borda aqui em cor a gente vai pegar vamos vir aqui primeiro em plano de fundo a eu já tenho essa cor aqui ó a cor da sombra da borda Beleza vou volar aqui em borda sombra aí eu vou colocar aqui ó essa cor que eu quero que é essa aqui bem clarinha OK agora nós vamos ir aqui na biblioteca Vamos ir em imagem destacada arrastar para cá resolução vamos deixar personalizado Vamos colocar quro 100 de

largura e 500 de altura vamos aplicar vai ficar assim vamos ir aqui em na biblioteca Vamos ir em título do produto arrasta para cá volta na biblioteca preço do produto arrasta para cá volta na biblioteca vamos pegar um botão comum e arrastar para cá agora vamos configurar o título clica aqui vem em estilo na cor Vamos mudar para o azul nesse daqui a gente vai vir vai mudar a cor para esse cinza essa cor aqui a gente vai deixar de Cinza né nesse preço de de oferta e o preço promocional a gente vai deixar de

azul aliás Esse é o preço promocional né o de baixo e o Real a gente vai deixar de azul vai clicar e vai arrastar um pouquinho para ele ficar um pouco mais transparente aí nesse aqui que é o preço da oferta a gente vai clicar vai vir aqui em decoração vamos deixar nenhum para tirar esse risquinho que tá aqui vamos ir em espaço Vamos aumentar um pouquinho o espaçamento entre eles aí vamos clicar aqui na tipografia vamos pegar essa última aqui e vamos só modificar ela vamos deixar tamanho 18 peso 16 pronto vamos clicar em

publicar só pra gente ir salvando tudo Opa aí vamos voltar nessa daqui decoração deixar nenhum se tiver voltado aqui no seu clicar em atualizar aqui no título o título do produto é 17 peso 500 vamos ver se tá não tamanho 17 peso 500 aqui no botão a gente vai clicar vai vir aqui em estilo deixar ele justificado vai vir aqui na cor vai deixar de azul vai vir aqui em conteúdo e vamos mudar o texto para comprar escrev maiúsculo aqui no ícone a gente vai clicar vai pesquisar pelo ícone de Plus vai pegar esse maizinho

aqui pra pessoa saber né que ela clica aqui ela adiciona alguma coisa no carrinho e aqui no link gente vai clicar aqui em tags dinâmica vai vir aqui embaixo e vai selecionar colocar no carrinho pronto vai clicar em atualizar vai vir aqui no estilo ao passar o mouse cor cor do texto vamos deixar de branco também cor de fundo vamos deixar de azul também só que a gente vai clicar no azul e arrastar essa Barrinha para ficar um pouquinho mais claro ó quando a gente passar o mouse tá vendo para dar uma ação de clicar

pronto vai ficar assim aí aqui no contêiner nesse contêiner interno a gente vai clicar vai vir em avançado Vamos colocar aqui 10 de padding vamos clicar em atualizar vamos vir aqui em layout Vamos deixar a altura mínima dele aqui acho que 500 vamos ver é vamos deixar 500 vamos clicar em atualizar aí nós vamos clicar aqui em espaço uniforme ó vamos deixar espaço uniforme e vamos clicar em atualizar pronto agora vindo aqui na nossa página home a gente vai na biblioteca Pesquisar pelo item de Carrossel de loop que é esse aqui ó pesquisa por loop

que aí vai aparecer aqui ó loop Carrocel aí arrasta Aqui para baixo Vamos mudar aqui para produtos e aqui em escolha o modelo você vai pesquisar Aquele modelo que a gente criou a gente vai chamar aqui ó card de produto e aí pronto ele vai pegar aquele mesmo modelo que a gente colocou aqui aí que a gente vai customizar eu quero que apareça quatro colunas né Quatro por vez e vou deixar aparecendo os 10 produtos por vez aqui no Carrossel ó vai ficar assim aqui a gente vai igualar a altura deles claramente não tá igualado

né a gente vai configurar lá depois para corrigir vai clicar em atualizar e aqui estilo ã no espaçamento aqui entre eles a gente vai diminuir pode deixar zero vai clicar em atualizar Então eu atualizei aqui né a página acessei aqui pra gente ver e ele tá uns maiores do que o outro a gente vai fazer alguns ajustes vai vir nesse principal vai clicar aqui ó para ficar um espaço uniforme vai vir nesse interno a gente vai deixar 550 de altura e aqui em espaço entre os itens a gente vai deixar cinco para não ficar tão

espaço assim aí vamos clicar em atualizar vamos recarregar aqui a nossa página ó aí todos estão ficando do mesmo tamanho só que aí o botão os botões estão ficando uns para cima outros para baixo vamos voltar aqui vir nesse contêiner aqui vamos deixar aqui espaço ao redor E vamos clicar em atualizar agora os botões estão alinhados a gente vai fazer agora uma tzin de desconto Vamos ir na biblioteca um widget de botão aqui para cima Então vamos vir aqui em botão arrasta aqui a gente vai vir aqui em tag dinâmica vamos puxar aqui ó em

o com Vamos colocar produto em promoção vamos clicar aí tá vendo ele vem escrito promoção a gente vai mudar para oferta Ou se você quiser pode ser promoção também vou deixar a oferta aqui porque eu que eu acho mais mais congruente deixei a oferta vou vir em estilo aqui em preenchimento vou deixar 10 aliás vou deixar cinco vou desvincular os valores e na esquerda e na direita eu vou deixar 10 vou deixar alinhada à direita vou clicar em cima dele vir em avançado clicar aqui em imgem e no inferior eu vou colocar uma margem negativa

para ele ficar em cima da imagem e aqui em Z index Vou deixar um para ele ficar em cima da imagem eu vou clicar em atualizar aí vamos recarregar Pronto agora temos uma tzin em todos os produtos que estão em oferta nos que não estão não vai aparecer Ok então vai ficar assim o nosso card de produto agora a gente pode recarregar aqui a nossa página de edição perceba que ele tá dando um bugzinho ó quando a gente carrega tá crescendo a gente vai corrigir isso mais pra frente do vídeo tá Não se preocupe então

clica aqui de novo ó regula né eu quero que apareça uns 10 produtos aqui por vez e cada slide Vai scrollar um só aí eu vou vir aqui em consulta pra gente poder deixar só de fones de ouvido aqui incluir por vou colocar termo o termo é categoria né e eu vou procurar a categoria fones de ouvido pronto aí ele vai buscar só fone de ouvido já puxei os meus mas ele tá dando bugzinho repetindo o mesmo produto então eu vou atualizar a página tá clica aqui em atualizar no elementor aqui embaixo e recarrega a

página Pronto agora Estou puxando os outros Ok e uma coisa que eu fiz aqui também que não filmou Foi as bolinhas que eu editei Então você vai vir aqui em paginação quer dizer em navegação né o seu vai est assim vai ter umas setinhas aqui do lado eu desativei quero deixar só essas bolinhas mesmo eu vou vir aqui em paginação aqui em tamanho tá vendo eu deixei tamanho 11 no meu para ficar maiorzinho e aqui na cor eu mudei para essa cor azul e aqui o espaçamento também ó você pode aumentar de diminuir um pouquinho

deixei em cinco clicar em atualizar agora vamos para essa parte aqui ok aqui pessoal na parte de ver todos você pode colocar o link da página loja ou então o link aqui de ver todos os fons de ouvidos né que a gente colocou aqui em cima também né que a gente colocou aqui em cima também no menu ó clicar com o botão direito copiar o link clicar aqui e colar este link vou clicar aqui também nesse contêiner deixar eles alinhados ao centro aqui OK vou vir aqui na biblioteca pegar um Widget de imagem e arrastar

para cá vir aqui em resolução vou deixar completo clicar em imagem aí eu vou arrastar a imagem desse banner para cá que é esse aqui também fiz no cano também deixei para vocês também ensinei a criar no canal Aí clica aqui embaixo em selecionar agora vem aqui no estilo raio da borta vamos deixar 10 vamos clicar em atualizar Aqui também tá falando de fone de ouvido né então eu vou vir aqui em conteúdo em link URL personalizado vou colar esse link aqui da categoria de fone de ouvido vou clicar em atualizar que se a pessoa

clicar na imagem Ela vai para lá agora eu vou deixar esse Card aberto ali tá que se a gente precisar editar ele já tá aqui agora vamos para essa parte ó nessa parte aqui de baixo eu deixei o carro ao céu vamos clicar aqui com o botão direito copiar clicar com o botão direito aqui colar ah nessa imagem eu vou clicar aqui no botão direito vou vir em avançado vou desencar aqui os valores de imagem e aí no superior e no inferior eu vou colocar 30 para dar um espacinho legal aqui entre as os itens

vou clicar aqui nesse aí esse é para buscar os produtos virais né Tem uma categoria que eu cadastrei aqui que chama produtos tiktok Então vou vir aqui em consulta em vez de pegar categoria fã de ouvido eu vou buscar essa categoria de produtos do tiktok para aparecer os produtos virais para pronto vou clicar em atualizar vou pegar esse Contender aqui em cima copiar vou vir aqui na biblioteca arrastar um Ed de contêiner aqui para cá vou copiar esses ids que tem aqui ó copiar clicar com o botão direito colar copiar clicar com o botão direito

colar e vou vir aqui nesse contêiner interno clicar com o botão direito vou vir aqui nesse contêiner interno clicar com o botão direito e colar pronto aí aqui eu vou mudar né vou mudar o título para produtos virais aí aqui a gente vai mudar o link né para produtos do tiktok ou pra categoria que você quiser e aqui também você muda o link aí para fazer as setinhas a gente reativa ó vamos voltar aqui vou vir aqui em paginação navegação vou reativar as setinhas vou vir em atualizar vou vir em estilo navegação aqui na cor

de fundo vou deixar de azul Opa aqui aqui eu vou deixar de branco e aqui no tipo de fundo que é a cor de fundo eu vou deixar de azul aqui n arredondado vou deixar 30 tamanho do ícone eu vou diminuir um pouco e aqui no padding que é o espaçamento eu vou deixar cinco aqui na posição Vou deixar do lado de fora el vai ficar assim Vou atualizar Pronto agora vamos fazer essa sessão aqui com duas imagens vou vir na biblioteca arrastar um Widget de contêiner para cá vou vir na biblioteca arr Widget de

imagem vou duplicar clicar aqui nesse contêiner deixar aqui na linha horizontal aqui em flexbox vou mudar pra grade e vou dear duas colunas e uma linha atualizar vou vir na imagem clicar arrastar a imagem para cá são imagens que eu também fiz no canva tá colocar uma desse lado e uma desse outro vou clicar nessa vir em estilo raio da borda vou deixar 10 clicar com o botão direito copiar clicar com o botão direito colar atualizar agora vamos fazer essa sessão aqui das novidades vamos arrastar um contêiner para cá vai ficar embaixo Aqui ó desse

contêiner das imagens você pode arrastar ela aqui para cima também que é mais fácil pronto sempre clicando em atualizar tá para não perder nada se acontecer um bugzinho assim você recarreg a página pronto vamos clicar aqui copiar es Carrocel clicar aqui colar ele vir na biblioteca pegar o Idiot de caixa de ícone Ah está para cá para dentro desse contêiner vamos clicar aqui nele deixar aqui ó horizontal na linha horizontal aí a gente vai copiar esses títulos aqui ó vou copiar vir aqui nesse Card colar e vou copiar esse subtítulo também e vou vir aqui

e vou colar aqui nesse ícone eu vou enviar que V e eu já tenho essa setinha aqui vou inserir ela que é o ícone que eu vou deixar para vocês vou vir aqui no contêiner estilo tipo de fundo vou pegar com azul layout vou deixar aqui alinhada ao centro avançado vou deixar 15 aqui de padding vou voltar em estilo borda vou deixar 10 de arredondamento atualizar vou voltar aqui nesse item vou vir em estilo vou deixar alinhada à esquerda vou vir no conteúdo aqui na tipografia do título eu vou deixar esse maior e nesse aqui

eu vou mudar apenas a cor para Branco vou clicar em atualizar vou vir aqui no meu Carrossel vou mudar a quantidade de produtos que eu quero que apareça para três e vai ficar assim vou clicar em atualizar vou vir aqui no contêiner vou colocar um pouco mais de espaçamento aqui ó vou colocar 305 de padding vou clicar aqui nesse item vou vir em conteúdo ele deu um bugzinho aqui aí eu excluir aqui o modelo e vou pegar de novo o modelo para ele puxar eu vou clicar em atualizar vou vir em estilo diminuir também a

largura entre eles atualizar aí Vamos acessar aqui pra gente ver como é que tá ficando a nossa página home olha aqui tá dando certo aqui a a gente precisa atualizar as bolinhas vamos clicar aqui vir em paginação a cor das bolinhas vamos deixar de branco e ficou assim e pra gente deixar uma transição mais suave aqui no Carrocel ó que ele tá passando muito assim a gente vai clicar aqui nele nesse Primeiro vai vir aqui em configurações aí Aqui é onde a gente determina a velocidade da repetição né velocidade que o Carrocel vai ficar passando

sozinho eu vou diminuir vou deixar 1000 para ele ficar mais rápido aqui tá tá em milisegundos ó tá vendo aí ele tá passando mais rápido e aqui é a duração da transição a duração do efeito de passar eu vou deixar 1000 para ficar mais lento e ficar mais suave tá vendo aí ele passa um pouco mais devagar mais suave aí eu vou clicar aqui aí nesse daqui como eles são iguais vou clicar nele vou vir aqui em configurações vou fazer isso também mudar aqui para 1000 e aqui para 1000 também aí aqui eu posso clicar

com o botão direito copiar clicar com o botão direito colar o estilo desse a s Vou precisar mudar de novo para três pronto vou clicar em atualizar beleza uma coisa também que a gente pode fazer para poder contornar esse bugzinho que tá dando quando a gente acessa ele fica grande a gente colocar um efeito de movimento então a gente clica vem aqui em avançado efeito de movimento animação de entrada né animação que acontece quando carrega a página Vamos colocar F in lento que ele vai aparecer almente viu ele apareceu gradualmente e não ficou com aquele

bugzinho então você pode fazer isso em todos os outros e agora nós temos uma novidade também eu ensino vocês a criar o site passo a passo né todos os aspectos clique a clique Mas se você quiser comprar o template que é uma cópia exata desse site a gente tá vendendo também então a gente tem a nossa loja que é templates pdcom sites.com.br O link tá na descrição do vídeo e também se você acessar o meu site descomunizar nossa loja um template é uma cópia exata de como o site está aqui então você vai subir esse

template no seu WordPress e ele vai virar este site aqui qual que é a vantagem disso que aí você não precisa criar todas as páginas todos os aspectos aí você pode só ir lá e mudar mudar os produtos né mudar de repente aqui o nome das páginas os banners trocar as cores você não precisa criar a estrutura é só você adaptar pro seu então se você quiser adquirir deixar o link aqui na descrição do vídeo e você acessa aqui a nossa loja e adquire o template agora nós vamos configurar a nossa página home para o

mobile né ou seja adaptar ela para dispositivos móveis como celular e computador agora do jeito que está se a gente acessar ela no celular olha como que ela tá a gente vai ajustar os tamanhos igual a gente fez no menu rodapé vamos clicar aqui em modo responsivo Vamos colocar aqui em modo de telefone E aí a primeira coisa que a gente vai fazer é modificar o tamanho desses banners porque dessa maneira que ele está aqui se a gente colocar no celular não vai dar para enxergar muito bem Olha você vai vir aqui vai clicar aqui

em cima do do lapizinho do Banner e vai diminuir a altura ó Ele ficaria dessa forma que quase não dá para enxergar Então a gente tem que adaptar pra imagens mais altas aqui no elementor não dá pra gente colocar uma imagem só para mobile e outra só para a desktop e ele conseguir modificar isso sozinho então a gente vai clicar aqui com o botão direito duplicar aí nesse aqui de baixo a gente vai mudar e colocar só imagens pro celular então ó eu vou deixar no nosso os banners que eu ajustei aqui pro mobile tá

vendo que eles são mais altos Você pode baixar lá e também tem vídeo aqui ensinando a fazer banner no canva eu ensino a adaptar aí você abre muda os outros abre muda os outros beleza Lembrando que nesses banners aqui ó todos tem um botãozinho falando para clicar né e a gente não colocou o link neles então tanto nesse aqui de cima quanto no de baixo a gente tem que colocar os links aqui a gente vem aqui em conteúdo em link e vamos colocar o link da página de todos os produtos mesmo clica aqui com o

botão direito copiar endereço do link cola aqui esse daqui também ele não fala de específico né então a gente vai colar e esse daqui também a gente vai colar ó vou atualizar é agora ó se a gente clicar ele vai lá para a página de loja aí tem que fazer isso nesse aqui de baixo também tá vem aqui conteúdo em link e cola o link da página de loja Pronto agora esse daqui de cima a gente vai deixar ele a gente clica aqui no contêiner principal e vai vir em avançado e vai vir em responsivo

e vai deixar ele oculto para o modo de celular para que Ele apareça só no computador e esse aqui de baixo a gente vai fazer o contrário vai clicar vai vir em avançado responsivo e vai ocultar para desktop e tablet e vai clicar em atualizar aí nesse aqui de baixo a gente vai clicar esse aqui de baixo é o que vai ficar pro celular a gente vai clicar e vai aumentar a altura dele ó vamos deixar mais ou menos 450 de altura qu vai passar as imagens sem cortar pronto nessa seção aqui de baixo a

gente vai clicar no contêiner vai vir em avançado Vamos colocar 20 de preenchimento vamos vir aqui em layout em colunas nós vamos deixar duas vamos ir aqui em estilo vamos clicar em um dos itens né vir aqui estilo imagem largura e Vamos diminuir o tamanho da imagem vamos ver se dá pra gente diminuir o espaçamento entre o conteúdo aqui e a imagem não dá mais né então é isso a gente Clica com botão direito clica em copiar cli com botão direito clica em colar estilo Pronto agora nesse contêiner aqui a gente vai ccar vai vir

avançado Vamos colocar também 20 de preenchimento vamos vir aqui nesses títulos vamos clicar vir em estilo tipografia Vamos diminuir o tamanho dele vou deixar esse aqui tamanho 16 e esse outro também tamanho 16 pronto esses daqui estão ok aqui a gente vai fazer a mesma coisa do Banner Clica com botão direito duplica esse aqui a gente vai vir em avançado responsivo vai ocultar para celular e para tablet e esse daqui a gente vai clicar aqui em avançado responsivo e vai ocultar para desktop aí nesse aqui que é o que vai ficar no celular a gente

vai clicar e vai mudar para esse outro aqui a gente também vai configurar igual tá lá em cima ó eu posso até clicar aqui com o botão direito copiar clicar aqui com o botão direito colar o estilo clicar aqui com botão direito copiar clicar com botão direito colar o estilo aqui nesse carel a gente vai clicar vai vir em estilo em navegação a gente vai deixar a posição das setas para dentro que aí ele não fica tão Estreito pronto esses aqui já estão com tamanho legal aqui a gente vai clicar vai vir em avançado Vamos

colocar 20 de padding vamos vir aqui nesse caixa de ícones vir em avançado deixar Centralizado virem avançado deixar a largura 100% e vai ficar assim vamos clicar em atualizar pronto aí nosso nosso site aqui no mobile já tá ajustado aí eu quero fazer um outro ajuste aqui agora pessoal ó vou recarregar aqui a página pra gente ver tudo certinho fazer um outro ajuste aqui que é diminuir o tamanho das imagens para elas não ficarem Tão estreitas vamos passar o mouse ali em cima de elementor clicar em cards dos produtos vamos clicar aqui na imagem aqui

nela vamos deixar 300 por 300 que ela vai ficar quadrada clicar em aplicar Vou atualizar ó aí diminuiu o tamanho aí a gente pode diminuir o tamanho da altura também desse contêiner né vamos vir aqui no contêiner Vamos diminuir para 450 de altura e clicar em atualizar pronto diminuímos aqui a altura dele agora tá faltando ele ficar clicável né a gente não consegue clicar A não ser que seja para comprar então para fazer isso a gente vai clicar aqui na imagem vamos vir aqui em link URL personalizado clicar em tag dinâmica e colocar o URL

do post aqui em título também aqui em link tag dinâmica URL do post e aqui no texto não tem como aí a gente clica em atualizar aí vamos recarregar ó aí agora se a gente clicar em cima da imagem a gente vai pra página dele pronto esse czin aqui deixa eu ver tá faltando a gente arredondar a borda dele para 10 pronto aí agora agora aqui nessa abinha o c está ficando arredondado Tá OK agora nós vamos para a configuração da página de produto individual página de produto individual é quando você clica no produto aí

aqui é a página dele né a página individual dele vem assim ó do tema a gente vai modificar com elementor vamos vir aqui dentro do painel administrativo vamos vir aqui em modelos Adicionar novo vamos escolher um modelo chamado produto individual vamos dar o nome de modelo de produto e clicar em criar modelo modelo da página que a gente vai criar é assim primeiro nós vamos vir aqui vamos pegar um contêiner com uma setinha para baixo vamos vir aqui em avançado Vamos colocar 40 de padding clica aqui em publicar adicionar condições tem que deixar aqui em

produtos para já ir salvando tudo que a gente fizer a gente conseguir ver vamos clicar aqui na biblioteca pegar esse wiet chamado caminho percorrido aqui em cor do texto a gente vai deixar esse cinza em cor do link vamos deixar o azul e na tipografia a gente vai pegar essa aqui essa última aqui ó vai ficar assim agora a gente vai aliás vamos vir aqui diminuir esse padding pronto deixei 20 só aí vamos clicar aqui pegar um contêiner com dois contes dentro que esse da a gente vai vir aqui nesse contê vamos dear ele tamanho

55 e nesse aqui vamos dear ele tamanho 45 e vamos aqui no contêiner princial Vamos mudar para Pixel vincular aqui os valores a gente vai colocar 20 de pixel em cada um dos espaços OK agora nesse contêiner daqui de cima principal a gente vai vir em estilo tipo de fundo Vamos colocar essa cor cinza claro de fundo nesse contêiner aqui em de baixo também tipo de fundo estilo tipo de fundo Vamos colocar essa cor cinza claro e clicar n atualizar aí nesse contêiner aqui ó interno a gente vai vir em estilo tipo de fundo vamos

deixar de branco ou então o branco já tá aqui você pode pegar aqui no mundinho né vamos vir aqui em borda sombra aqui na cor da sombra eu já tenho a cor salva aqui a gente pode colar ó essa cor de sombra e vai ficar assim ó a nossa sombra bem Sutil e vamos deixar 10 de arredondamento vamos clicar em atualizar a gente pode fazer a mesma coisa nesse vir em estilo tipo de fundo deixar Branco vir aqui na na borda deixar uma sombra colocar cor da sombra e Enem raio da borda deixar 10 aí

vamos vir aqui na biblioteca pegar o Widget de imagem dos produtos colocar aqui vou desativar essa oferta relâmpago clicar em atualizar aí aqui nas miniaturas a gente vai colocar uma borda a largura da borda vai ser um e a cor da borda vai ser esse cinza mais clarinho só para ficar um realzinho mesmo e vamos colocar 10 de arredondamento e vamos colocar um espaço entre as imagens um espaço bem pequeno pronto ficou assim vamos vir aqui nesse contêiner vir em avançado e colocar 30 de preenchimento nesse aqui também vamos vir vir em avançado 30 de

preenchimento nesse contêiner de cá a gente vai vai vir aqui vai pegar o ID de título arrastar Aqui para baixo das imagens vai escrever aqui descrição vai vir estilo cor vai pegar esse azul tipografia vai pegar essa de novo item Eu acho que eu vou mudar esse esse título aqui de novo item para 25 Ok vamos vir aqui na biblioteca vamos pegar o Widget de descrição tem que ser essa daqui ó conteúdo do produto ó que aí ele vai mostrar tudo que a gente escreveu lá na aba de descrição vai ficar aqui e vamos clicar

em atualizar aí aqui desse lado a gente vai fazer essa parte aqui do preço né vamos vir aqui na biblioteca arrastar o título do produto para cá vamos ir em estilo cor do texto deixar esse azul mais escuro aqui no tamanho do título vamos deixar tamanho 28 deixar um pouquinho maior do que eu deixei lá e peso 400 OK agora a gente vai voltar aqui na biblioteca para colocar essas estrelinhas aqui de avaliação a gente pega esse widget aqui ó de classificação do produto coloca aqui embaixo só vai aparecer se produto tiver sido avaliado tá

aí aqui na cor da estrela a gente vai arrastar a Barrinha para cá para do amarelo e vai pegar uma cor de amarelo aqui pronto a cor da estrela vazia A gente vai deixar o mesmo amarelo e vai tirar um pouquinho a opacidade dele e a cor do link vamos deixar de azul é tipografia vai ser essa de texto vamos clicar em atualizar eu vou colocar aqui por enquanto não vou fazer o seguinte vou clicar aqui exibir condições vou excluir salvar e vou voltar ali n um produto nesse produto vou vir aqui nesse produto só

para eu poder avaliar aqui para você ver ó vou avaliar agora vou clicar clicar em exibir condições adicionar condição salvar Não esquece fazer isso aqui tá senão não funciona Vou atualizar a página aí agora já tá aparecendo aqui as avaliações ó Pronto agora vamos ir na biblioteca pra gente fazer essa abinha aqui vamos pegar um título normal pega um título arrasta para cá escreve aqui mais informações vem aqui no estilo cor do texto vamos deixar essa cor cinza tipografia pode ser essa de texto aliás vamos deixar maiorzinha deixar tamanho 18 tamanho 18 decoração vamos deixar

sublinhado pessoa saber que ela tem que clicar e aqui em conteúdo Vamos colocar #descrição sem o Cedilha tá descrião a gente vai copiar essa palavra vai vir aqui no título descrição vai vir em avançado aqui em ID a gente vai colar que aí quando a pessoa clicar aqui ela vem para cá OK agora vamos ir na biblioteca pegar o preço do produto colocar aqui embaixo vamos deixar ele empilhado para ficar um abaixo do outro aqui essa cor aqui é a cor do texto sem tá em promoção que é o o o preço original que é

aquela que fica riscada Vamos ir aqui na biblioteca vamos deixar ele tamanho 25 e aqui na tipografia desse vamos deixar tamanho 35 nesse aqui a gente vai deixar cor azul escuro e vamos vir aqui na tipografia dele em decoração e vamos deixar nenhum acho que ainda eu vou aumentar o tamanho dele aqui para 40 e o tamanho desse aqui vou deixar 28 e peso 600 ok agora para poder fazer o nosso filtro de variáveis como este a gente precisa instalar um plugin a mais ó clica aqui em atualizar para não perder nada clica em plugins

adicionar plugin a gente vai instalar esse plugin aqui ó pausa aí copia o nome vai vir em plugins Adicionar novo plugin Vai colar esse nome aqui é Este plugin aqui ó você vai clicar em instalar agora depois em ativar Às vezes o nome dos plugins mudam tá Aí você presta atenção se tem um nome parecido e o nome aqui do desenvolvedor que é esse clica em ativar pronto recarrega a página agora vem em plugins plugins instalados vem aqui embaixo nele aqui ó variation Sanches clique em settings E aí aqui você consegue fazer algumas adaptações ó

Clica com o botão direito clica em traduzir para português aqui você muda o estilo da da formaa totip totip é esse popupzinho que aparece aqui tá vendo para poder falar sobre a cor que é o item você tá selecionando aí aqui ele tá quadrado né retangular aí se você mudar você pode mudar para arredondada eu vou deixar quadrado mesmo o restante você deixa como está se você mudar alguma coisa clica em salvar aqui em avançado Clica com o botão direito clica em traduzir para português vou ativar essa opção ó limpar o atributo se ele for

selecionado novamente e aqui o estilo que fica quando aquele atributo está vazio vou clicar em salvar aí pronto e aí ele começa a aparecer a partir do momento que a gente coloca o botão de comprar porque ele já é configurado para ficar acima desse botão e o botão de comprar ou de adicionar o carrinho é esse aqui ó colocar no carrinho aí a gente coloca aqui eí quando a gente recarregar página lá ele já mostra as variações vou vir aqui no botão vou deixar ele aqui justificado vou vir aqui na cor do texto vou deixar

de branco vou vir na cor de fundo vou deixar de verde vou vir na cor da borda vou deixar de verde também na tipografia vou pegar essa aqui e vou modificá-la para ficar com a transformação maiúscula vou aumentar um pouquinho esse tamanho aqui e o peso para 500 ok vou aumentar o padding para 15 vou clicar atualizar e em Hover vou mudar a cor de fundo para verde a cor do texto para branco e esse Verde aqui eu vou diminuir um pouquinho a opacidade dele para ficar com essa impressão aqui de clique vou clicar em

atualizar E se a gente for olhar aqui na loja um produto que seja variável como por exemplo essa bolsa aqui que ela tem opções ó aí já tá aparecendo aqui pra gente tá só vai aparecer esse aqui quando o produto for variável se ele não for não aparece e aí ele vem com essa configuração aqui dessa caixa que eu não gosto então eu criei um CSS pra gente poder tirar essa caixa daqui ó eu vou deixar esse código para vocês do material de apoio você vai copiar ele inteiro vai vir aqui em cima do botão

vai vir lá em cima em avançado aqui embaixo em CSS personalizada E vai colar esse código aqui vai clicar em atualizar aí vamos vir aqui ó aí ficou assim tirou aquela caixa que tem aqui agora vamos para essa parte pra gente fazer o cálculo do frete e também essa parte aqui eu já vou copiar esse título vir aqui Pesquisar uma lista de ícones arrastar Aqui para baixo do botão excluir deixar apenas uma mudar o o ícone aqui para um cheque colar o texto e já vai ficar com o texto certinho aqui vai ficar assim essa

parte aqui do cálculo do frete pessoal eu não vou ensinar nesse vídeo porque além de ser opcional né colocar o cálculo do FR aqui na página do produto ainda é um pouco grande para poder configurar então vou fazer um vídeo específico só sobre é esse cálculo do fret aqui na página do produto tá provavelmente vai ser o próximo vídeo do canal Então você fica de olho para você poder com configurar isso aqui na sua página caso você queira Tá então vamos deixar assim a nossa página agora vamos configurar ó vamos vir aqui no contêiner principal

vamos vir aqui em avançado Vamos colocar 40 de padding vamos vir aqui em layout vamos deixar aqui alinhado ao início vamos clicar em atualizar e nesse contêiner aqui a gente vai vir em avançado efeito de movimento fixo e vamos deixar superior vamos tirar os dois e deixar só no desktop vamos clicar em atualizar aí vamos recarregar aí ficou assim se a gente for rolando a tela ele fica fixo conforme tem todo o conteúdo aqui e aí para ele parar de ficar fixo aqui a gente vai selecionar essa opção aqui ó ficar na coluna pronto ó

aí ele vai fica até aqui depois continua o site normal outra coisa que a gente vai fazer também é vir aqui em deslocamento e deixar 20 de deslocamento para ele não ficar tão grudado ó recarrega tá vendo ele ficou um espacinho aqui então ficou assim agora vamos fazer essa parte de baixo desce aqui clica clica em flexbox pega uma setinha um um flexbox setinha para baixo clique em avançado padding 40 estilo tipografia cor vamos pegar essa cor cinza claro que estamos usando cola aqui atualizar vou peguei esse mesmo título que tem aqui em cima vou

copiar clicar com o botão direito colar ele aqui e eu vou mudar o título para veja também clicar atualizar eu vou vir aqui na nossa página home clicar no editor do Elementor e vou copiar esse carrossel que a gente já tem aqui ó vou pegar esse primeiro Carrocel clicar com botão direito copiar agora eu vou clicar com o botão direito em cima do título colar esqueci aqui de colocar o padding aí a gente vai voltar aqui no Carrossel vai vir aqui em consulta e vai mudar para produtos relacionados e vai clicar em atualizar é normal

não aparecer aqui assim mesmo tá E para fazer essa parte aqui das avaliações a gente vai precisar instalar um plugin a mais e ele eu também vou ensinar em um outro vídeo aqui no canal que ele também é grande para configurar tá para ficar dessa forma mas o comerce ele já traz um por padrão tá eu quis fazer essa configuração aqui para ficar mais bonitinho diferente deixando na descrição aqui e avaliação aqui por último igual tem grandes lojas Mas se você quiser já usar o do Woocommerce em vez de você deixar aqui ó separado descrição

o título e a descrição você exclui tudo e pega esse widget aqui de Abas do produto que aí ele já vem com a descrição e também com a aba de avaliação que é assim é um pouquinho mais feia né mas também funciona tá então se você quiser deixa assim sen não você vem e assiste os próximos vídeos do canal que eu vou ensinar a colocar essa abinha aqui de avaliações no site Ok beleza então essa abinha de avaliações eu vou fazer depois e o restante Já tá feito agora a gente só vai configurar pro mobile

clica aqui em modo responsivo coloca aqui no celular Vamos ir aqui nesse contêiner avançado Vamos colocar 20 de pad Ah ele já está com 20 de padding né Ok vamos ir aqui nesse avançado Vamos colocar 15 de padding vamos vir aqui dentro do contêiner avançado Vamos colocar 15 de padding também e nesse outro contêiner aqui a gente vai vir aqui em avançado Vamos colocar também 15 de padding atualizar e E aí o que que a gente vai fazer para aparecer primeiro o título e o preço ó a gente vai vir aqui no contêiner principal vai

vir em layout e vai clicar aqui ó em coluna invertida E aí vai aparecer primeiro essa coluna aqui e aí depois aparece que aí faz mais sentido aqui no mobile tá vendo se a gente clicar aqui aí ele nos Desce aqui para onde que tem a descrição ok então fica assim aqui no tablet a gente vê se tá se tá precisando ajustar vem aqui no contêiner vem avançado Vamos colocar só 20 de padding vamos vir aqui nesse contêiner avançado Vamos diminuir para 15 nesse aqui também avançado diminui para 15 e aí vai ficar assim ó

nesse aqui a gente vai vir em avançado e feit de movimento Vamos colocar novamente aqui no tablet porque ele deu certo de ficar aqui do lado né ó no tablet pronto esse aqui a gente vai vir vai vir em avançado Vamos colocar 20 de padding colocar aqui no modo celular ele também já está com 20 de padding e atualizar Então pronto já criamos aqui a nossa página de produto individual agora nós vamos criar e configurar a nossa página de loja que é a página onde fica armazenar todos os produtos Lembrando que toda vez que a

gente cria um modelo de alguma coisa como a gente criou um modelo de produto individual e como a gente vai criar um modelo de loja você não consegue clicar aqui em editar a loja para editar o modelo que você tava criando você tem que ir lá em modelos ou então por exemplo ó tá aqui na P individual do produto né você passa o mouse aqui em cima em elementor aí vai aparecer aqui ó modelo de produto individual É assim que você consegue clicar e ir lá nele para você alterar alguma coisa tá aqui na página

da loja a gente precisa criar um modelo também a gente vai vir aqui dentro do painel administrativo do WordPress vai vir em modelos Adicionar novo selecionar aqui arquivo de produtos vai dar o nome de modelo de página de loja clica em criar modelo fecha o popup clica pega um contêiner com a setinha para baixo vem avançado preenchimento Vamos colocar 30 estilo cor vamos pegar essa cor de Cinza que já está aqui vamos ir na biblioteca vamos pegar um Widget de título vamos clicar aqui em cima é título do arquivo tá o nome do idet aqui

incluir contexto a gente vai tirar vamos vir aqui em estilo deixar ele alinhado ao centro na cor a gente vai pegar esse azul e o tamanho a gente vai aumentar para 30 transformação maiúscula e peso 400 vamos vir aqui pegar um contêiner com dois só que esse daqui ó que já tá configurado o menor e o maior tá vendo se não tiver a gente ajusta eu quero que esse aqui Fique 20% apenas e este outro aqui 80% aí vamos vir aqui no contêiner principal avançado colocar 40 de padding clicar em publicar adicionar Nova Condição tem

que tá aqui em todos os arquivos se por acaso você Já publicou e não tá aparecendo aqui você clica nesse triângulo exibir condições E aí você adiciona tá e salva pronto vamos ir aqui na biblioteca pegar o widgit de loop de produtos isso aqui ó grad loop arrasta para cá vem aqui e seleciona produtos vem aqui e seleciona card de produto que foi o que a gente criou aqui em colunas eu vou deixar três mesmo itens por página eu vou deixar 12 pronto vou deixar aqui a altura igual vou vir aqui no estilo largura entre

as colunas eu vou deixar bem pouquinho e largura entre as linhas eu vou deixar bem pouquinho também Pronto agora eu vou vir aqui em consulta e vou mudar para consulta atual vou clicar em atualizar isso é muito importante Se você deixar aqui produtos recentes Quando você clicar ali em cima ó em fã de ouvido ou clicar em qualquer categoria não vai aparecer vai aparecer só os produtos mais recentes tem tem estar consulta atual para poder fazer essa dinâmica ó se eu selecionar aqui fone de ouvido ó ele já vai colocar aqui o nome fone de

ouvido e já vai mostrar aqui somente fones de ouvido lá nisso achei que ficou muito grande vou diminuir para 25 tamanho desse título aqui OK agora nessa parte aqui a gente vai fazer o nosso filtro o elementor tem um filtro chama filtro taxonomia mas ele fez o favor de bugar este filtro Então a gente vai vai estar usando um outro plug adicional por enquanto vamos vir aqui entrar pro painel administrativo plugins adicionar plugin o nome do Plugin É este aqui ó products Filter by wpw pausa aí e copia aí você vai colar o nome aqui

Este plugin aqui você vai clicar em instalar depois em ativar ele é muito fácil de criar o filtro o bom dele é esse vamos recarregar a página ele já vai criar aqui pra gente ó tá vendo uma abinha você clica em adicionar um novo filtro vou dar o nome de filtro da loja ele cria filtro de qualquer coisa aí nós vamos selecionar os filtros que a gente quer eu vou querer o de preço o de categoria de produtos e o de atributo também tem o de avaliação que a gente pode colocar aqui ó que é

esse aqui ó Rain e vamos clicar em criar pronto tá vendo ele criou todos os filtros e aqui ele fica mostrando pra gente como que o filtro vai aparecer na página do produto a gente pode clicar aqui nessa setinha para abrir aí aqui a gente muda o título ó vou mudar para preço aqui eu vou mudar para categorias aqui eu vou mudar para Cor e aqui a gente vai selecionar Qual que é o atributo que a gente vai querer no meu caso aqui é o cor se você tiver cadastrado outros atributos como tamanho como dimensão

como sei lá qualquer atributo que você tenha colocado aí você vem em seleciona aí se você for criar outro atributo por exemplo se você quiser criar o de cor e também de outro você vem aqui ó seleciona qual que você quer colocar e você coloca por exemplo atributo e clica em Adicionar novo aí ele vai vir assim aí você muda aqui o título e seleciona aqui qual que é o atributo que você quer tá vou deixar só o atributo de cor que é o único que eu tenho aqui esse aqui de Range a gente vai

mudar para avaliações o nome do título E aí você pode ir alterando ó tá vendo aqui ele vai mostrando pra gente como é que tá ficando o filtro aí Aqui você pode clicar com o botão direito clicar em traduzir para português aí aqui ó como é que ele vai aparecer na área de trabalho na área de trabalho é o desktop que é o computador que é que que apareça o título o título é esse título que a gente colocou aqui né preço e tudo tudo mais eu vou colocar assim mostre sempre aberto ó assim e

no telefone é para aparecer o título ou não eu vou colocar sim mostre sempre opa vou colocar mostrar sempre como aberto e aqui mostrar sempre como aberto aqui o tipo de filtro Ele tá em português aí tá mudando ó tá vendo os outros ele não deixa a gente colocar então só deixa esse daqui aí aqui ele não deixa a gente fazer muitas configurações não tá só faça isso vem aí todos e deixa Yes show US Open que é para ele aparecer e deixar aberto o filtro nos dois tanto para mobile quanto para desktop presta atenção

tá abre um por um aqui olha se tá assim Aí clica em salvar agora vem aqui options e aqui a gente vai configurar algumas coisas clica aqui com o botão direito clica em traduzir para Português ó aqui a gente vai ativar essa opção aqui de exibir nas páginas solicitar o shortcode porque a gente vai usar é com shortcode mesmo aqui tem algumas outras configurações que a gente não vai ativar ó sempre Clica ali em salvar aqui em projeto também não precisa mexer em nada vou voltar aqui em opções e vou vir aqui em botões aqui

se você quiser você pode acionar o botão de limpar também tá vendo que ele tem o botão de filtrar você você pode ativar que fica o botão de limpar também eu não vou colocar aqui a gente muda o texto que tá aqui dentro eu vou colocar filtrar ele vem escrito em inglês né É só você clicar fora ó deixa eu mudar para português aqui para ver direito tá vendo aí fica sem filtrar pronto aqui são as configurações da Caixa sempre filtrando todos os produtos clica em salvar aí tá vendo esse short code que foi criado

aqui em cima você vai clicar e copiar ele vai vir aqui vai pegar o Widget de short code arrastar para cá e vai colar vai clicar em atualizar Vamos acessar a nossa página de loja aqui agora para você ver ó ele ficou assim aí a gente consegue filtrar ó só você selecionar por exemplo fone de ouvido e vem aqui clica em filtrar ele recarrega a página e filtra só fone de ouvido esse esse botão dele tá puxando as configurações do tema e eu criei um CSS pra gente configurar ele direitinho aqui você vai vir aqui

em avançado CSS personalizado Vai colar esse CSS aqui e vai clicar em atualizar vamos atualizar a página ó ele ficou assim se você quiser mudar a cor do seu botão é aqui tá vendo vai ter aqui no CSS aqui ó background color aí você vai mudar o código da cor por aqui Ok só você colocar outro código que é a cor que você quiser e colar esse código inteiro lá vamos vir aqui nesse container virem avançado Vamos colocar 30 de padding e vamos vir aqui nesse virem avançado e colocar 30 de padding também agora nós

vamos clicar aqui vir aqui em paginação deixar números como paginação ó para ter outras páginas tá aí agora a gente vai vira aqui em estilo a cor a gente vai deixar com esse azul escuro e a cor de Hover vamos deixar de azul claro e a cor de ativo de azul claro vai ficar assim vou aumentar o espaço entre eles e os produtos vou clicar em atualizar agora vou clicar aqui colocar no modo mobile né no celular aqui em cima a gente vai vir em avançado Vamos colocar 20 de padding aqui a gente vai clicar

vai vir em avançado Vamos colocar 20 de padding vamos vir aqui nesse contêiner interno avançado 20 de padding contêiner interno avançado 20 de pad padding é preenchimento tá o espaço de dentro aliás pode diminuir para 10 tanto aqui quanto em cima ó aí a gente vai fazer uma coisa atualiza primeiro clica aqui clica em conteúdo e em aplicar para começar a aparecer o filtro aqui parar de rodar Pronto ó prof ficar bonitinho aqui pro celular você tem duas opções ou você deixa aparecendo o filtro todo grande estragando a experiência do usuário ou Você pode adaptar

a gente vai fazer o seguinte tem esse widget aqui chamado sanfona que a gente pode usar e colocar o filtro aqui dentro só que a gente tem que ativar uma configuração lá no elementor primeiro vamos vir aqui dentro do painel administrativo vir em elementor configurações cursos e ativar widgets alinhados ó vamos deixar ativo salvar ó atualiza aqui para não perder nada e recarrega o editor Pronto agora vamos pegar o widget de sanfona Vamos colocar aqui em cima fechamos né excluímos deixamos só um aí tá vendo ele cria um contêiner um espaço aqui pra gente poder

colocar o que a gente quiser aí aqui eu vou escrever filtrar escrever maiúsculo aqui o ícone eu vou deixar aqui na posição pra frente vou deixar ele aqui esticado vou vir aqui na biblioteca aliás vou pegar esse mesmo ID de shortcode que tá aqui ó clicar com botão direito copiar clicar com botão direito e colar ele aqui dentro Eu vou clicar em atualizar aí eu vou clicar aqui nele vir em avançado responsivo e ocultar ele aqui pro computador nãoo que el aparecer no computador tá vendo vai aparecer o filtro mesmo aí vou voltar e colocar

lá no celular ó e aí no celular ele vai ficar aparecendo vou clicar em aplicar aqui para ele parar de rodar e começar a aparecer logo e vou voltar lá para celular pronto ó aí tá ficando assim tá vendo esse filtro aqui eu quero que ele apareça só no computador vou vir aqui nele esse de baixo tá Não é esse aqui de cima não ó fecha ele vem no deai vou vir em avançado responsivo e ocultado do celular pronto aí nesse aqui eu vou vir aqui em estilo preenchimento vou deixar 10 oito de preenchimento vou

vir em cabeçalho aí no título eu vou deixar 500 de padding e fonte Jost e a cor vou pegar essa cor mais escura mesma vai ficar assim aqui na sanfona tem que o raio da borda vou deixar dois aliás vou deixar cinco vou deixar cinco vai ficar assim e vou vir aqui neste Contender vou vir aqui em avançado vou vir aqui em efeitos de movimento em fixo e vou deixar superior que aí quando a gente rolar a tela ele vai ficar aqui em cima tá vendo mas aí a gente precisa precisa colocar uma cor de

fundo nele vamos vir aqui em estilo tipo de fundo e colocar branco Ó que aí ele fica aqui em cima o filtro Vamos diminuir o espaçamento desse contêiner vamos deixar podemos deixar cinco Só que já tem o espaçamento do de fora né ó F assim pronto que eu vou diminuir um pouco mais para ficar mais estreito ó clica na sanfona vem avançado e o preenchimento vamos deixar cinco aí vai ficar assim o nosso filtro aí a pessoa clica e abre o filtro e clica e fecha aí vamos clicar aqui vir em conteúdo vir aqui em

interações aqui em estado padrão vamos deixar todos recolhidos para quando a gente recarregar a página ele carregar assim e não carregar assim aberto Sabe para não preencher muita página aí a pessoa tem que clicar aqui em filtrar para abrir o filtro aqui também eu vou aumentar um pouquinho a duração da animação para ficar mais suave ó assim vou vir aqui no estilo aqui sfone distância do conteúdo ó vou abrir aqui para eu ver tá vendo distância do conteúdo vou vir aqui em conteúdo tipo de borda e vou deixar nenhum eu quero que tenha uma borda

somente aqui no botãozinho do filtro Ok ficou assim vou cliquear em atualizar aí e Vamos acessar aqui a nossa loja ó no computador tá assim tá parecendo filtro normal e no celular vamos lá ó no celular aparece assim a gente clica aí o filtro abre fecha ele Recolhe e a gente rola a tela e fica o filtro aqui em cima outra coisa aqui nesse contêiner a gente tem que vir em avançado efeitos de movimento vamos tirar aqui ó deixar nenhum só pra gente conseguir configurar aí você clica aqui se você quiser deixar dois produtos por

coluna você deixa aqui dois tá só que aí tem que observar bem Se for por exemplo esse tipo de produto aqui que tem muito texto aí fica esquisito aqui no meu eu vou deixar um mesmo ok Aí depois que você configurar você volta aqui no contêiner vem avançado efeit de movimento e deixa novamente superior para ele ficar fixo pronto Já terminamos aqui a nossa página loja agora nós vamos para a página do carrinho Então nós vamos configurar agora a nossa página de carrinho quando a gente clica aqui no menu ele abre pra gente o carrinho

flutuante e ele fica assim né eu vou ensinar vocês a configurar primeiro esse carrinho que já tá aqui no menu você vai passar o mouse ali em cima de elementor vai clicar em menu principal abrindo a nova guia aí deixa essa página aqui aberta para você ficar sempre abrindo o carrinho aqui para conferir Ok vou te ensinar a configurar esse aqui do el mentor Mas esses dias eu ensinei a configurar um outro plugin aqui que fica com carrinho flutuante que é esse aqui ó que é o mesmo que tem aqui na minha loja de templates

então ele fica flutuante aqui embaixo no site o tempo todo aí quando você clica ele aparece parecido com o do elementor e fica um botãozinho de continuar comprando que o elementor não tem então por exemplo se eu coloco aqui um template no carrinho né ó fica aqui para mim aí tem finalizar a compra e continuar comprando né que ele me traz de volta aqui pro site a nesse do elementor não tem ele fica assim né para você ou ir ver o carrinho ou finalizar a compra tá se você quiser aprender a fazer esse outro tipo

de carrinho flutuante vou deixar o vídeo aqui na descrição para você também tá ó você vai clicar aqui aí aqui em estilo ó aqui vai ter a parte do ícone né então isso aqui você configura o ícone e aqui você configura o carrinho mesmo que h primeira coisa que a gente tem que fazer é configurar esses títulos né então aqui na parte dos produtos ó que os títulos ficam grandes a gente pode vir aqui pegar esse secundário eu vou vir aqui em cor deixar essa cor mais escura vou clicar em atualizar vamos atualizar pra gente

ver ó já mudou a cor aqui do título que a gente pode diminuir um pouco o tamanho desse título deixar tamanho 15 outra coisa que também agora pra gente configurar é o subtotal o subtotal fica aqui na parte de carrinho aí fica aqui ó subtotal aí eu vou selecionar esses vou selecionar esse secundário aqui também atualizar e a cor eu vou deixar esse azul mais escuro atualizar e vamos atualizar pra gente ver já mudou aí tem também os botões gosto deixar eles empilhado que aí fica um abaixo do outro e aqui na cor de fundo

eu vou deixar com essa cor de azul escuro e a cor do texto de branco eu vou clicar em salvar e aqui no de finalizar a compra eu vou deixar com a cor azul e a cor do texto de branco eu vou atualizar ó vamos recarregar ó aí vai ter ficado assim tá vendo esse aqui não pegou a cor esse esse aqui de cima Ah tá eu tinha colocado errado era para colocar a cor de branco pronto a ação de passar o mouse eu vou deixar esse aqui com a mesma cor azul e com a

mesma cor branca só que esse aqui eu vou vir arrastar um pouquinho para ficar um pouquinho mais claro quando a gente passar o mouse nesse aqui a mesma coisa eu vou deixar o fundo de azul e a cor do texto de branco e aqui no azul eu vou vir e vou arrastar um pouquinho para clarear quando passar o mouse ó aí vai ter ficado assim ó quando passa o mouse ele clareia para fazer a ação de clicar tá então ficou assim aí você pode modificar outros aspectos que nem por exemplo tem o botãozinho de fechar

aqui o de excluir o produto tem o de fechar o carrinho também que vai ficando por aqui ó aqui na parte do carrinho tem o tamanho do ícone aqui de fechar o carrinho você pode aumentar e diminuir por aqui tem a cor do ícone de fechar o carrinho eu vou deixar esse cinza mesmo tem esse ícone aqui de remover item vou deixar o cinza mesmo que já já pega aí tem o tamanho do ícone de remover item aí aqui na parte também do carrinho você pode colocar um um espaçamento vou colocar 30 de espaçamento né

de preenchimento você pode ir testando todas as abinhas e configurando para você ver o jeito que fica melhor para você ó eu vou desinc esses valores aqui de preenchimento né de padding vou mudar também por aqui ó vou de vincular tá vendo deixar de branco os valores aqui do padding e na parte de cima eu vou deixar 50 a gente pode ir olhando também por aqui tá vendo ó se você conseguir clicar em cima do carrinho ele também vai aparecendo aí tá vendo que o meu ícone de fechar tá bem pequeno eu não tinha visto

que eu tinha corrido o tamanho do ícone aqui tinha deixado muito pequeno Ó tem que aumentar um pouquinho senão não dá pra pessoa ver né aí tá aqui vou mudar a cor dele para esse mais escuro para ficar mais clicável pronto vou diminuir aqui para 40 do tamanho aqui do do padding ok aqui na parte do do subtotal a gente pode colocar uma sombra de sólido aí eu vou deixar um mesmo de largura que nem já está a cor eu vou deixar a cor que está que aí fica mais destacado aqui o subtotal né vou

clicar em atualizar E aí vai ficar assim aqui na parte do produto também se você quiser configurar melhor os títulos tem como configurar por aqui eu vou deixar assim dessa forma mesmo e o nosso carrinho vai ficar assim vamos colocar aqui no modo de mobile pra gente ver como é que tá ficando ó tá ficando ok também então beleza o nosso carrinho aqui do menu já está OK agora a gente vai customizar a página de carrinho que é essa página que a pessoa Vem quando ela clica em ver carinho você vai clicar aqui em cima

em editar página vai clicar aqui em editar com elementor vai excluir esse contêiner clicar em atualizar clicar na engrenagem clicar em Elementor largura Total atualizar essa configuração de Elementor largura Total faz sumir aquele título carrinho que tem ali em cima vai clicar pegar um contêiner com setinha para baixo vir em avançado colocar 50 de padding atualizar pedem a preenchimento vir aqui nos widgets e pegar o widget de cart que é esse aqui ó carrinho que aí tem o carrinho do elementor e ele já vem assim mais bonitinho e você consegue configurar todas essas Abas aqui

a gente vai mudar só algumas mesmo só mesmo os textos né porque não está com a fonte Se você quiser mudar o texto de cada um também ó cada um aqui que você vai clicando resumo do pedido cupom totais todos seus textos se o seu vier em inglês você pode ir traduzindo mas geralmente ele vem em português mesmo aí vou vir aqui em estilo tipografia e ir mudando aqui as tipografias de todos então a tipografia que nós estamos usando aqui AJ então por exemplo essa daqui é os títulos dos aqui da parte de total né

do carrinho vou aumentar aqui para deixar 18 e peso 500 e a cor vou colocar essa cor cinza mais escuro aí aqui nos formulários que é essa parte aqui eu vou fazer a mesma coisa vou deixar fonte Jost tamanho 17 peso 500 a cor eu vou deixar essa cor mesmo aqui no resumo do pedido que é aqui onde tem os produtos também vou mudar a fonte para Jost tamanho 17 peso 500 e aqui a cor da fonte eu vou deixar esse azul mais escuro a aqui tem a cor dos links tá vendo que tem escrito

aqui os títulos aí os itens né que são cada um dos produtos Se você quiser mudar a cor deles aqui tem como no caso esse daqui a gente tá mudando a cor aqui do preço e a fonte do preço você vai mudando as fontes de cada um aqui e vai testando tá deixar esse com peso 500 também e a cor cinza e agora aqui o link do produto que também é o título tá você pode mudar a cor vou deixar essa cor azul que é a cor que que tem no projeto a fonte vai ser

a mesma né a fonte jost aqui também quando tem variações né tem escrito aqui variações aí você pode ir mudando por aqui aqui os divisores só essas linhas aqui que ficam dividindo aqui os links das quantidades né quando tem escrito aqui a quantidade é tudo customizável tá aqui agora no botão de pagamento eu vou vir aqui em cor do texto vou deixar de branco vou vir em aqui na cor do fundo vou deixar com aquele azul que é do projeto e vou vir aqui na tipografia vou pegar a fonte Jost deixar tamanho 17 e peso

400 também e vou ver aqui em transformação vou deixar maiúsculo pronto aí vai ficar assim o nosso carrinho agora eu vou clicar Vou colocar aqui no mobile vou vir nesse contêiner vou vir em avançado vou colocar 20 de padding vou vir aqui no carrinho vou vir em estilo vou vir aqui em padding e vou deixar 15 de pad aí no caso tá sendo modificado esses daqui de baixo tá o tamanho aqui de cada um eu vou deixar do mesmo jeito aí aqui em tipografia você pode ir mudando os os espaçamentos ó os espaços entre os

títulos ó vai mudando em cada uma das Abas aí aqui na parte de formulários também é o espaço entre as linhas aí você vai conseguindo ver na aa de formulário resumo do pedido que essa parte aqui de cima ó Você vai mudando também o espaço entre as linhas vou deixar dessa forma que está e pronto aqui no Tablet também tá com tamanho Ok e aqui no no computador também está Então já tá terminada aqui a nossa página de carrinho agora vamos configurar a nossa página de checkout a página de checkout é onde a pessoa realmente

vai efetuar o pagamento ela clica aqui em avançar para efetuar o pagamento e ela vem aqui para essa página de checkout tá o checkout do WordPress ó ele é assim por padrão né não é ruim mas dá pra gente deixar mais customizado eu vou usar esse checkout de Passos aqui que é bem interessante porque aí vai fechando cada uma das abinhas não deixa a tela muito grande aí aumenta a conversão porque a pessoa não se cansa e não desiste de preencher todo o formulário né esse formulário aqui ele é mais interessante ele se chama fluid

checkout é um plugin gratuito o próprio elementor também tem esse campo de checkout que dá para você configurar igual do carrinho mas eu vou usar o do fluid que está um pouco melhor tá você vai vir aqui no painel vai vir em plugins Adicionar novo o fluid também é bem mais fácil de Configurar pesquisa aqui por fluid checkout é esse plugin aqui você vai clicar em instalar depois em ativar quando você ativa ele ele já muda o checkout do site para esse só que observa bem o menu e o rodapé subiram para eles voltarem a

gente precisa ir nas configurações do Plugin Então a gente vai vir aqui em plugins instalados vai vir aqui no fluid configurações aí vai clicar aqui em checkout aí aqui ó em modelo de cabeçal e rodapé a gente vai deixar cabeçal e rodapé do tema e vai clicar aqui em salvar e aí pronto agora já aparecendo o menu e o rodapé né o cabeçário e o rodapé do tema tá tudo aqui já tá configurado só tá faltando a gente mudar as cores do link né Essas cores aqui do link a gente muda através daquelas configurações do

tema que a gente já fez então a gente pode entrar aqui em algum editor do El mentor Clica ali em cima configurações do site aí tem aqui tipografia aí se a gente não definir uma cor específica aqui pros links ele fica pegando do tema eu vou colocar essa cor azul para ser a nossa cor de links aí a gente tem que tomar cuidado porque se tiver algum botão que a gente colocou no site a gente não colocou uma cor no texto aí fica tudo azul por exemplo vamos ver aqui na nossa página inicial ó ó

tá vendo eu não tinha colocado uma cor branca mesmo na cor do texto Então tá ficando azul que agora a cor de link é azul isso é fácil de resolver só você vir aqui no card dos produtos clicar ó tá vendo eu tinha deixado aqui a cor do texto Definido do tema E aí ele puxa o que a gente configurou lá agora eu vou deixar a cor específica Branca pronto aí se eu voltar aqui pra página home ó agora já está com a cor certinha E algum outro lugar que você tiver colocado o botão tiver

tudo azul por exemplo é porque você esqueceu de colocar a cor de dentro do texto aí é só você voltar lá e configurar Ok então ficou assim aí falta a gente colocar um CSS aqui para configurar esse botão de pagamento né que ele vem dessa cor Eu Já criei um CSS vou deixar aqui para vocês aí você vai clicar aqui em personalizar Lembrando que todos esses códigos vão estar lá no material de apoio que eu deixei para vocês tá você vai copiar esse código vai vir aqui em CSS adicional E vai colar aí se você

quiser mudar essa cor aqui é neste código aqui ó código de background color vou deixar também o código já certinho para na hora que passar o mouse ele mudar pra a mesma cor azul só que um pouquinho mais clara tá então beleza agora a gente pode testar aqui essa pgina de finalização de compra no mobile né que é a parte do celular então vamos clicar aqui em inspecionar colocar no celular ó ele já configura sozinho a gente não precisa mexer né Então tá tudo ok a parte aqui de checkout já foi agora vamos pra página

de contato sobre nós Você vai clicar aqui em cima de contato vai clicar não tem aqui editar página né então você pode vir aqui dentro do painel administrativo vir em páginas todas as páginas clicar em cima de contato clicar em cima de editar vir aqui em cima e clicar em editar com elementor vou deixar a página aqui pra gente vendo ó a página de contato que eu fiz foi assim com a minha de tabs eu tenho visto muitas lojas usando essa referência aqui de páginas e eu vou te ensinar a fazer isso agora vamos clicar

aqui na nas configurações aqui embaixo clicar em layout da página deixar Elementor a largura Total clicar em atualizar clica pega um contêiner com a setinha para baixo vem em avançado coloca 50 de padding atualiza vem aqui na biblioteca pega o widget de tabs ou Abas vai ficar assim aí você vai deixar aqui ó as abas para antes nessa abinha de antes que é para ele ficar aqui do lado vai clicar em atualizar aí você pode excluir e mudando aqui as abas né eu vou escrever uma chamado atendimento ao cliente aí é só você clicar em

duplicar nessa aqui você escreve sobre a sua loja né sobre a no meu caso aqui a UD Tec depois vai ser entregas e prazos depois perguntas frequentes pronto Atualiza aí aqui cada vez que você vai clicando Ó você vai conseguindo mudar as abas e dentro de cada aba abre um contêiner que você consegue criar o que você quiser então vamos primeiro configurar essa abinha aqui né dos Filtros Vamos ir aqui em estilo aí aqui em títulos no normal eu vou deixar esse mesmo cinza bem clarinho opa não é aqui é a cor do texto né

que é a cor do texto eu vou deixar essa cor de Cinza mesm é aqui em Abas então né Abas tipo de fundo no normal vou deixar Branco ao passar o mouse aí eu vou deixar o fundo cinza claro e no ativo eu vou deixar cinza claro também vou atualizar Às vezes dá um bugzinho assim que ele não obedece as configurações é só recarregar a página tá clica aqui vamos configurar de novo estilo Abas ó no ativo a cor do fundo é o cinza claro pronto aí agora os títulos Ok no normal os títulos desse

cinza ao psar o mouse vai ser o azul e o ativo também vai ser o azul a tipografia a gente vai colocar peso 500 transformação maiúscula ainda aqui em Abas ao passar o mouse a gente vai vir em tipo de borda vai deixar sólido desencar a largura da borda e aqui na direita a gente vai deixar três e a cor vai ser o azul também ó quando a gente passa o mouse fazer essa sombra azul aqui na parte do ativo ó cor de fundo aqui também não tinha pego aquela hora na parte do passar o

mouse vou colar aqui ó agora ficou aqui na parte do ativo também vou ativar a borda sólido desenc os valores e aqui na direita vou deixar três e a cor da borda é esse azul aí vai ficar assim a distância entre as abas ó vou deixar bem pouquinho deixar dois só só para fazer uma linhazinha aliás vou deixar um só para fazer uma linhazinha Ok e aqui no conteúdo que é aqui ó onde a gente vai colocar todo o conteúdo aqui primeiro em Abas a distância do conteúdo eu vou deixar zero para ficar grudado e

aqui no conteúdo eu vou colocar uma borda também ó vou vir colocar sólido desencolher assim ó vou diminuir para um aí vai ficar assim pronto agora eu vou vir em conteúdo em largura e vou aumentar a largura para não haver quebra de linha pronto ficou assim e vou deixar aqui o conteúdo tudo alinhado ao início vou clicar em atualizar Pronto agora sim podemos começar a criar aqui na aba de atendimento ao cliente eu vou clicar no contêiner vou vir em avançado vou colocar 50 de padding vou vir na biblioteca vou arrastar um título para cá

copiar esse título vou colar ele aqui vou vir em estilo a cor eu vou deixar de azul a tipografia eu vou pegar essa daqui vou deixar alinhado ao centro vou clicar em atualizar vou duplicar vou copiar esse título que eu tenho aqui vou colar ele vou vir em estilo a cor eu vou deixar essa cor de texto A tipografia eu vou deixar essa tipografia de secundário só vou ajustar aqui para ficar peso 400 vou vir aqui no conteúdo e depois de entre em contato ó antes de entra em contato quer dizer eu vou colocar esse

simbolo aqui sinal de maior sinal de menor e no meio BR para poder fazer uma quebra de linha Pronto agora vou vir na biblioteca vou arrastar um Widget de grade para cá vou configurar para ficar apenas uma linha atualizar vi na biblioteca pegar uma caixa de ícone arrastar para cá clica no botão direito duplica clica no botão direito duplica clica aqui aí agora a gente vai colocar os títulos ó vou colocar atendimento no WhatsApp atendimento Via e-mail é só ir clicando substituindo tá e atendimento Via telefone aí você você faz isso em todos os seus

e também copia ou escreve o que você vai colocar aqui na parte de baixo meu caso ó esse texto aqui pronto agora você muda os ícones é só clicar em cima vir aqui escolher aqui no WordPress no Elementor já tem os ícones de tudo o de e-mail é o envelope e esse aqui de chamada no próprio elementor já tem um de chamada que é esse aqui de fone mas ele fica empilhado e eu quero um de linha então eu V pegar ess aqui que a gente já tá usando aqui no site que é esse aqui

pronto vou clicar em atualizar percebeu né enviar arquivo sbg O arquivo já tá aqui você clica e seleciona Pronto agora vou vir aqui vou vir em estilo ícone a cor do ícone deixar de azul tamanho vou diminuir um pouquinho só vou vir aqui em conteúdo a cor do texto eu vou deixar de azul escuro tamanho do texto eu vou deixar 17 vou vir aqui em avançado vou colocar 11 de padding vou vir aqui na borda tipo de borda vou deixar sólido a cor eu vou colocar um cinza bem clarinho eu vou deixar um ó vai

ficar assim e a borda eu vou desencar os valores porque no inferior eu vou deixar três para ficar assim e em raai da borda que é arredondamento eu vou deixar cinco para ficar levemente arredondado vou clicar com o botão direito copiar clicar com o botão direito e colar o estilo em todos os outros pronto aí para ficar clicável tá pessoal pra pessoa clicar aqui ela conseguir por exemplo ir direto para falar no WhatsApp eu só vou cons colocar o link aqui tá vendo você gera um link de conversa para WhatsApp ok aí a pessoa já

clica e vai falar lá direto com você então já finalizamos aqui essa parte agora vamos para essa ab aqui de sobre Vamos ir aqui no contêiner avançado 50 de padding vou voltar nesse aqui copiar o título voltar aqui colar vir na biblioteca arrastar o Widget de texto aqui para baixo aí aqui no título você vai escrever né sobre a UDI Tec sobre aí o nome da sua loja e vai gerar um texto vai copiar um texto vai escrever um texto esse aqui eu fiz pela Gemini que é uma ia do Google é igual o chat

GPT e é gratuita pedi ela para gerar para mim esse texto Você pode escrever você mesmo aí Eu arrastei uma imagem para cá vou deixar aqui tamanho completo e vou pegar a nossa imagem da logo tá pegar aqui a imagem da logo vou vir aqui em link vou pegar a página home que aí se a pessoa clicar na logo ela vai pra página home vou vir em estilo e diminuir um pouquinho a largura vai ficar desse tamanho pronto ficou assim clicar em atualizar vou vir aqui em entregas e prazos copiar esse título que tá aqui

clicar aqui colar vem aqui no contêiner avançado 50 de padding vou vir aqui eh vou pegar um Widget de texto arrastar para cá vou copiar o meu texto aqui relacionado na entrega prazos e ó aqui perceba que eu coloquei um link que vai para a página de meus pedidos tá então eu tenho aqui no rodapé ó meus pedidos já eu vou copiar esse link aí eu clico em cima seleciono né clic em cima e substituo o link e clica aqui na setinha Pronto já vai ficar aqui clicável para ir pra página de meus pedidos aí

você vai mudar o título né para o mesmo que tá ali entregas e prazos e agora vamos para a abinha de perguntas frequentes também vou colar esse título que eu tenho aqui eu vou escrever faq perguntas frequentes clicar aqui no contêiner avançado 50 de padding atualizar a gente vai pegar o idet chamado sanfona que é esse aqui você vai arrastar para cá aí Aqui tem um truque esse wiet por conta dos itens alinhados às vezes ele buga então por exemplo ó se você clicar aqui em adicionar o novo item ele fica fica bugado você não

consegue abrir esse último tá vendo Então você tem que sempre duplicar o que já está aqui que aí você consegue ir abrindo tá então você sempre duplica aqui e não adiciona um novo aí aqui também ó fica um contêiner dentro que você pode escrever o que você quiser aí você vai copiando as perguntas como essa daqui por exemplo aí você coloca a pergunta aqui no título e a resposta você põe aqui dentro aí para a resposta a gente vai pegar um editor de texto colar aqui e aí colocamos a resposta que nesse caso aqui faltou

eu ter colocado pix e cartão de crédito também pessoal essas perguntas e respostas que eu fiz aqui são só para mostrar para você como é que faz o mecanismo de pergunta e resposta Aí você coloca o que você achar que for mais relevante aí pro seu tipo de produto pra sua loja tá então você vai pegando vai fazendo assim aí você pode clicar aqui em copiar ó fecha abre o de baixo cola aqui fecha abre o de baixo Cola fecha é só clicar com botão direito e clicar em colar e aí você vai só substituindo

né vai vindo aqui pegando pegando a pergunta clica aqui depois eu vou fazer várias perguntas e deixar já aqui para vai ficar de sugestão para você aí na hora que você for fazer o seu você pode acessar aqui o meu site vir aqui nessa aba olhar as perguntas que eu deixei e vê o que que é relevante colocar aí no seu aí de repente você põe também ó Foi errado era para ter colocado aqui naé pergunta a resposta ó quando fosse sim nem esse daqui eu vou fazer um texto colocando alguns links pra pessoa clicar

que nem aqui para ela acompanhar a encomenda E aí é igual o que a gente fez lá em cima onde a gente quiser que seja clicável a gente seleciona vai tá assim ó sem nada aí você seleciona aí vai ter esse ícone instagram caso para ele lá em meus pedidos né copia o link cola o link aqui e dá o enter aqui eu coloquei o link dos Correios para a pessoa ir lá nos correios fazer o rastreio ali da da encomenda dela ok aí beleza Falta só o título da pergunta Pronto agora a gente vai

vir aqui ó em posição do ícone vou deixar fim e vou deixar aqui esticado pro ícone ficar mais para cá aí vou vir aqui em estilo vou vir aqui na sanfona né que é de cada um dos itens aqui em tipo de borda eu vou deixar nenhum e aqui em distância entre os conteúdos eu vou aumentar um pouco e aqui no tipo de fundo eu vou colocar cinza um cinza bem clarinho na distância entre os itens opa eu tava colocando no lugar errado é aqui ó distância entre os itens aqui é a distância entre o

item e o conteúdo tá aqui então a distância entre os itens ficou assim o raio da borda n redondamento eu vou deixar CCO e aqui no conteúdo eu vou colocar 30 de preenchimento né que é o espaço aqui de dentro o raio da borda eu vou deixar cinco também a vai ficar assim OK aí eu vou clicar aqui no lapizinho aqui em conteúdo vou vir aqui em interações e aqui tá configurado para ele já apareceu o primeiro expandido né Assim como como resposta eu vou deixar todos escondidos Aqui também tá configurado para você conseguir abrir

um por vez eu vou deixar Abrir múltiplos aqui também vou clicar em atualizar e pronto vamos dar uma olhada aqui na nossa página agora como tá ficando ó aí aqui fica as tabs a gente vai clicando e vai mudando uma coisa que eu fiz aqui também que não gravou foi ter alinhado os itens para cima antes eles estavam assim conforme a gente fosse abrindo ele ficava sambando aqui na coluna Aí eu deixei aqui ó justificado no início que aí eles ficam sempre lá em cima tá então você tem que fazer isso também e agora vamos

ajustar pro celular clica aqui coloca em modo de celular lá vem nesse contêiner vem avançado Vamos colocar aqui 20 de padding aí a gente vem em cada um dos itens e aqui no contêiner deles a gente pode deixar 20 também de preenchimento aí você clica clica no outro vem aqui avançado 20 de preenchimento clica no outro avançado 20 de preenchimento avançado 20 de preenchimento Opa foi no lugar errado aqui ó avançado 20 de preenchimento aí Aqui tem como você configurar de duas formas tem como você deixar assim mesmo que aí ele fica assim ó aqui

aí quando a pessoa desce tem o outro botãozinho clica e abre o restante ou então tem como você colocar para ele ficar como se fosse um menuzinho aqui Aí a gente faz assim deixa aqui ó acima aí abre aí vai ter que rolagem horizontal aí a gente coloca em ativar e aqui ponto de interrupção nenhum ó tá vendo aí ele faz tipo um menuzinho ó aqui eu não vou conseguir ver no editor Vou recarregar a página e a gente vai ver no mod mobile olha ele vai fazend no menu e vai arrastando pro lado tá

aí vamos configurar aqui para ficar mais clicável clica aqui em estilo aqui em Abas em preendimento vamos deixar 10 aqui em títulos em tipografia a gente vai deixar tamanho 12 que aí fica um botãozinho menor ó vamos recarregar ó aí ficou assim aí vamos colocar uma distância também ó aqui em Abas espaço entre as abas e atualizar pronto ó aí ficou assim aí a pessoa clica aqui e muda para cá clica aqui muda para cá aí vamos vir aqui vir em conteúdo deixar esticado atualizar que aí fica todos do mesmo tamanho ó aqui aqui aqui

pronto aí ficou assim no mobile no Tablet também ficou dessa forma aí se você quiser deixar também rolagem horizontal ou então só aqui na parte de cima ó deixa aqui também e aí no caso se for deixar assim na parte de cima tem que dar uma diminuída né ou deixa todos centralizados ou então a gente vem aqui e deixa rolagem horizontal também igual tá no celular e vem aqui no Card principal né no contêiner principal vem avançado deixa 20 de preenchimento para não ficar muito espaço aí ficou assim Beleza então nós já finalizamos a nossa

página de contato e sobre nós agora vamos configurar a de políticas de privacidade e minha conta olha as páginas de políticas de privacidade ficam aqui em páginas todas as páginas aí o próprio comerce quando a gente sal ele já cria ó políticas de privacidade e política de reembolso e devoluções né geralmente elas ficam em rascunho tá v significa que as pessoas que não estão logadas não conseguem ver a gente precisa publicar para elas aparecerem você clica aqui em editar Aí clica aqui em cima ó em publicar e publicar de novo aí ela já fica visível

e agora vamos clicar em editar com elementor essa é a política de privacidade o próprio WordPress ele já sugere um texto aqui pra gente ó você pode usar ele se você quiser aí você tem que ir apagando Onde tem escrito texto sugerido tá vendo eu pedi pra ia da Gini que é uma inteligência artificial do Google para gerar uma política um pouco melhor escrita aqui para mim aí você pode copiar aqui se você quiser aí você só substitui né Onde tem escrito techwood que é o nome aqui da minha loja você põe o seu aqui

é o link da minha loja você põe o seu sempre Onde tiver techwood você substitui você pode fazer assim pressionar control F pesquisar Tech ood que aí você vai ver todos lugares aqui da página tá escrito techwood que é aqui Aqui também on tá escrito separado ó Onde tiver escrito junto aqui no texto é só aqui e onde vai escrito separado tem aqui e aqui tá vendo vai ficando Amarelo aqui no site onde é que tem escrito aí você pode fazer isso e ir mudando tá então vou copiar aqui as políticas do meu vou copiar

aí eu vou vir aqui nesse arquivo de texto que já é gerado clicar aqui dentro selecionar tudo e escluir E aí eu vou colar esse texto que eu peguei ali vou clicar em atualizar vou vir aqui na engrenagem largura da página deixar Elementor a largura Total vou clicar em atualizar vou vir aqui nesse contêiner vou clicar em avançado colocar 20 de padding vou vir aqui no texto vira em estilo vira em tipografia vou colocar tamanho 17 e aqui na cor do texto eu vou pegar essa cor azul porque só para mim copiar o código da

cor Mas vai ficar essa cor cinza normal aqui mesmo de texto aí eu vou vir aqui em conteúdo aí aqui somente no título eu vou selecionar vou vir em personalizado e vou colar essa cor azul para só o título ficar dessa cor tá aí que nem eu te falei você vai substituindo ó tá vendo Onde tem escrito o nome aqui da minha loja o link aqui ó substitui o link aqui pelo seu tá ok e depois clique em atualizar E aí pronto a nossa página de política de privacidade vai est pronta agora a gente pode

voltar lá pro painel pra gente poder ir para a políticas de devolução né ó aqui aí você clica em editar aqui no texto da políticas de devolução o elementor ele traz um texto em inglês né eu vou clicar aqui em publicar depois vou clicar em editar com elementor E aí eu pedi também para iar gerar um novo texto pra gente substituir esse aí você pode ir mudando aqui onde tem escrito techwood cont contrl F ó aí Onde tem escrito Tech você substitui Ok se você tiver com preguiça também pode mandar G substituir cola o texto

lá e fala substitui onde tem Tech pro nome e tal OK aí você vai fazer a mesma coisa vai copiar Ah você também tem que substituir o seu e-mail seu telefone né Dá uma lida e substitui se você quiser escrever outro texto também fica seu critério né cada loja tem suas políticas ó clica aqui esc o texto que está Cola vou AB em estilo vou pegar aquela cor azul só para eu copiar aí vou vir aqui onde que tem o título eu vou clicar aqui no itzin da cor colar o código da cor clicar fora

dar OK aí eu vou vir aqui na engrenagem selecionar Elementor largura total e vou clicar em atualizar vou vir aqui no contêiner avançado 20 de padding clicar em atualizar tá aí Faltou só a gente vira aqui estilo e aumentar o tamanho da fonte para 17 pronto nem precisa ajustar no mobile porque esses tamanhos que eu coloquei já ficam bons ó Ok então tá pronto aqui as nossas páginas aí vamos voltar aqui pra gente poder editar a página de minha conta se a gente acessar aqui a página de minha conta você consegue acessar aqui ou então

você também já colocou aqui no rodapé né se você vier aqui em meus pedidos e já tá aqui na página de minha conta ou então você pode vir aqui pelo painel administrativo páginas todas as páginas vai ter aqui minha conta você clica em editar e clica aqui em cima e editar com elementor tá se já tiver na página você só passa o mouse al em cima e clica ó se já tiver aqui você só clica aqui em painel né para ir pra minha conta e clica aqui em cima de Elementor pronto aí vai vir para

cá Aí você vai excluir esse campo aqui clica aqui nas configurações deixa Elementor a largura Total clica em atualizar vamos pegar um contend pode ser com a setinha para baixo vem avançado Vamos colocar aqui 50 de padding atualizar vamos vir na biblioteca pegar o widget de minha conta arrastar para cá aí vamos fazer o mesmo layout que a gente fez na página de contato lembra ó vamos olhar lá a página de contato que tá assim então a gente vai fazer parecido para ficar layout legal no site ó aqui você pode determinar se você quer vertical

ou horizontal que fica aqui em cima eu vou deixar vertical mesmo para ficar igual a gente fez na página de contato quiser trocar o título aqui de cada um pode trocar eu vou deixar vou vir aqui em estilo aqui em Abas que é onde é que tá aqui em normal vou clicar aqui em tipo de fundo e vou deixar de branco em Hover vou clicar aqui em tipo de fundo e vou deixar op tipo de fundo e vou deixar essa cor cinza clarinho aí vou copiar esse mesmo cinza claro e aqui em ativo tipo de

fundo e vou colocar essa cor clara também aí a tipografia a mesma coisa a gente vai pegar eu acho que é essa daqui vamos ver é só que o peso Se não me engano é 500 transformação maiúscula Ok beleza e aqui em cor a gente vai deixar aqui na na aba de normal né esse cinza mais claro aqui em Rover o azul escuro e no ativo o azul escuro A vai ficar assim OK agora aqui em normal a gente vai deixar tipo de borda sólido largura aqui na direita a gente vai deixar três e a

cor da borda de branco agora aqui no Rover a cor da borda a gente vai deixar de azul ó assim e aqui no ativo a cor da borda a gente vai deixar de azul também Opa coloquei no lugar errado aqui aqui ó cor da borda vamos deixar de azul no ativo em Rover a cor da borda de azul e aqui em Normal também a cor da borda vamos deixar de branco isso Ó aí fica a cor da borda só quando tiver ativo vou passar o mouse Beleza o espaçamento entre os itens Tá ok e aqui

agora vamos para as sessões aqui em largura da borda vamos deixar nenhum e aqui no padding vamos deixar 20 aí agora vem as tipografias que é os textos tá aí Aqui tem a definição de cada ó título das sessões e aqui ó a gente pode vir e pegar esse secundário aí você consegue ver quando tem título nas sessões por exemplo ó aqui tem esses títulos a cor vou deixar com esse azul detalhes da conta aqui o restante do texto eu vou deixar com esse texto de real normal aí a cor do texto também bem vou

deixar normal mensagem de login vou deixar normal aí aqui formulários ó que vai ter Igual tem aqui detalhes da conta que tem os formulários aí você consegue configurar os rótulos dos formulários eu vou deixar esse aqui a cor vou deixar esse Cinza Mais Escuro aí aqui os campos do formulário Vou colocar cinco de arredondamento ó aí ficou meio arredondado então dá para você ir modificando cada coisa aqui aqui os botões eu vou deixar com a cor do texto de branco e o tipo de fundo de azul escuro ó ficou assim e a tipografia vou deixar

essa Realce só vou deixar o peso 400 e a transformação em maiúscula beleza ficou assim aí você pode ir configurando o restante também que nem quando tiver pedidos Ó tem detalhes do pedido aqui que você consegue ir configurando também tipo grafite tudo mais deixar assim mesmo e vou clicar em atualizar aí a gente vai clicar aqui colocar em moldo responsivo vamos clicar no contêiner pau avançado e colocar 20 de pad aí Aqui você pode usar de duas formas Ó tem ele aqui ó clicando no no item de minha conta tá aqui em conteúdo tem vertical

e tem horizontal horizontal S vai aparecer se você modificar aqui a posição por exemplo deixar aqui no início aí eles vão ficar um do lado do outro você deixar esticado aí fica toda esticado mas eu não recomendo que você faça isso não porque fica muito bagunçado assim né Melhor deixar um abaixo do outro mesmo tá vertical e um abaixo do outro aí clica em atualizar pronto a nossa página de minha conta também já está pronta o método de pagamento eu também não vou ensinar nesse vídeo porque também é uma coisa particular né existem vários métodos

de pagamento que você pode colocar no seu site eu até coloquei aqui nesse passo no Passo cinco né configurações de funcionamento você tem que fazer configurar o getter de pagamento que é uma empresa que você coloca para receber os pagamentos do seu site tem vários tem PayPal Mercado Pago picpay asas Pag Seguro tem vários vários mesmo sabe o o asas e o app Max são os que eu vejo que o pessoal tá mais usando porque eles T recuperação de carrinho tem algumas vantagens né rejeitam menos pagamentos tem vídeos aqui no canal ensinando você a configurar

o get de pagamento no seu site tá então você faz uma pesquisa de qual get de pagamento você acha que fica melhor para você você pra sua empresa tem alguns que só aceita se for CNPJ tem alguns que aceita CN cpf também então você avalia vê o que que você acha e pesquisa aqui no canal que a gente tem aula de praticamente todos os Gets de pagamento tá o dos correios e o plugin de Fred dos Correios que é o melhor envio também e o próprio dos Correios eu já tinha falado para vocês antes né

que tem um vídeo separado aqui no canal para isso então essa parte a gente não vai fazer nesse vídeo porque tem vídeo separado aí agora nós vamos fazer alguns ajustes finais né Essa é a a hora de você dar uma olhadinha no seu site v o que que faltou linkar aqui no meu eu vi que eu tinha linkado só esse daqui para mostrar para vocês e não linki os outros então se tiver Acontecido isso com você também ó você vem aqui na sua página home e coloca o link Lembrando que para você pegar o link

certinho de todas as categorias você vai vir aqui em produtos categorias e aí Aqui tem o link de tudo né então por exemplo aqui ó headset você clica aqui com botão direito clica aqui em copiar endereço do link aí você vem em cada um deles aqui e clica dentro do campo de link e cola tá vai pegando de todos aqui ó clica o botão direito copia vai pegando de todos e cola Ok então aqui tinha faltado eu fazer isso tinha faltado também eu linkar algumas coisas aqui no menu então Ó aqui na parte de menu

na parte de minha conta tá linkado E faltou esse daqui né vamos ver lá passa o mouse em cima de mentor aí tem menu principal a gente vai clicar aqui para editar deixa eu ver ah não eu tinha colocado aqui o da minha conta e esse aqui ah coloquei também então tá linkado sim esses dois estão linkados aí você vê se no seu não está tá bom confere também se a logo não está linkada como a gente pegou a logo do site ela já tá vindo aqui com a URL do site já tá linkado tudo

certinho as páginas aqui as categorias também fere lá no menu o rodapé ó a gente tinha colocado tudo né Deixa eu ver acho que tinha faltado políticas de privacidade Então vamos passar o mous aqui em cima clicar em rodapé a gente ainda não tinha feito as páginas né vamos vir em páginas todas as páginas aí a gente tem aqui política de privacidade vamos clicar em ver clicar em copiar endereço do link aí eu vou linkar aqui ó políticas de privacidade agora políticas de devolução entregas e prazo que estão na mesma página né Então essa aqui

eu vou colocar esse link e nessa aqui é o mesmo link OK aqui nessas a gente já tinha colocado todos os links né você vai conferindo se não tá errado e aqui nos links das redes sociais também ó se você não tiver colocado você vai colocando pronto aqui no link do WhatsApp Confere se você não colocou Então você vai conferindo tudo e colocando todos os links adicionar o five icon que é esse icone instagram não tiver colocado tem lá por dentro do Elementor e também tem por aqui ó você vem aqui em aparência personalizar também

tem como você colocar por aqui ó identidade do site ó aí aqui é a logo e aqui é o ícone tá então se o seu tiver 100 ó se tiver assim você clica e arrasta para cá o Iconezinho tá o meu já estava Essas foram as configurações que estavam faltando aqui no Passo C Eu já mostrei né agora tem essa configuração aqui também que que a gente não fez ó configuração de login na página de minha conta a página de minha conta também é a página para se logar no site por isso que eu coloquei

aqui entrar e cadastrar tudo pra pessoa ir na página de minha conta e conseguir logar por aqui aí tá vendo que ela não consegue se cadastrar por aqui por enquanto porque a gente tem que ativar uma configuração no site para permitir Então vamos vir aqui dentro do painel aí a gente tem que vir aqui em WooCommerce configurações contas e privacidade aí aqui a gente marca ó permitir que os clientes se conectem a uma conta existente permitir que os clientes criem uma conta durante a finalização de compra e permitir que os clientes criem uma conta na

página de minha conta então todos esses aqui tem que estar ativos para um bom funcionamento da sua loja aí você vem aqui embaixo clica em salvar e vamos recarregar a página pra gente ver ó agora já tem aqui o formulário de cadastra-se pessoa já consegue cadastrar normalmente Ok então é isso a nossa loja ficou pronta ela ficou assim ó vamos ver ah tá ó outra coisa pra gente conferir tá vendo que esse link aqui tá azul então faltou a gente corrigir isso no card ó vamos passar o mouse aqui em cima de Elementor clicar em

Card clica aqui ó em cima de oferta vem aqui em estilo aqui em cor do texto vamos deixar de branco e atualizar pronto Prontinho agora tá tudo certo confere todas as páginas né Vamos ir aqui na página de loja vamos conferir também tudo certo ah uma coisa que faltou também que a gente pode configurar é o menu ficar fixo ó aqui também aqui não tem descrição porque eu não coloquei nenhuma descrição nesses produtos tá mas aí na sua loja você vai colocar ó uma coisa que faltou também a gente deixar o menu fixo vamos fazer

isso também passa o mouse em cima de elementor vem em menu principal clica aqui vem avançado efeito de movimento fixo e deixa superior e clica em atualizar aí quando a gente rola a tela ele rola para baixo aí tá vendo que ele fica bagunçado com os outros é porque falta a gente colocar a cor de fundo ó clica no contêiner estilo tipo de fundo vamos pegar a cor branca pronto aí se a gente recarregar agora ó quando a gente rola a tela o menu fica fixo aqui ok também vamos colocar no modo de celular que

se você quiser deixar o menu fixo aí você tem que deixar esse menuzinho aqui aí você clica vem aqui em avançado vem efeitos de movimento deixa superior clica em atualizar eí Vamos colocar aqui no mode de telefone e recarregar a mesma coisa tá faltando por o fundo branco aí você avalia se você vê que o seu menu ficou muito grande aí você não coloca fixo ó pronto uma outra coisa que faltou foi a gente colocar efeitos de movimento em todo o site aqui na página home tá vendo ó que vai aparecendo gradualmente a gente fez

isso só nos carrosséis ó é a mesma coisa do Carrocel você vai vir aqui no contêiner vai vir em avançado vai vir aqui em efeit de movimento aí animação de entrada vamos deixar fing lento a mesma coisa aqui também ó avançado efeit de movimento F in lento esse daqui a gente já colocou né aqui nas imagens também ó avançado efeit de movimento f em lento não se esqueça que nessas imagens aqui tem que colocar o link ó esse aqui ó que é do produto de fã de ouvido né tem que colocar o link aí quando

tiver coisa de mobile você tem que colocar o efeito de movimento também ó tá vendo clica aqui avançado efeito de movimento F in lento esse daqui já está né esse daqui a gente pode clicar avançado efeito de movimento fanding lento e lembrar de colocar o link neles ó esse aqui eu não tinha colocado você clica aqui no URL personalizado e eu vou colocar para linkar pra página loja que é a página onde tem todos os produtos né aqui já está e clica aqui em atualizar outra coisa também pessoal a gente tem que garantir que as

configurações aqui da nossa loja estejam corretas né então a gente vem aqui em techwood painel vamos vir aqui em new comer configurações aí tudo que você precisar de configurações de endereço e tudo mais na loja fica aqui então Ó aqui em configurações tem geral e aí a gente vai configurar aqui o endereço eu vou colocar o endereço do Shopping aqui da minha cidade só para exemplificar para vocês coloca aqui o endereço a cidade colocar aqui na minha Uberlândia o país Brasil né o CP você tem que colocar porque é com base nisso pessoal que vai

ser calculado o seu frete tá lá do lá dos Correios quando a gente for configurar ó os locais de venda Aí você coloca se você quer vender para todos os países ou só para um país específico se for só para um país específico como o Brasil você vem aqui ó e configura vender só pro Brasil se você quiser vender para outros países também Aí você coloca aqui ou então deixa todos tá locais de entrega enviar para toda a localidade que vende né ou seja para todo o Brasil nenhuma localização padrão aqui é se você tiver

produtos que precisa calcular imposto né mas não é o dos Correios tá não é contato com imposto é imposto mesmo calcular o cupon de desconto sequencialmente se você quer que os cupons eles sejam acumulados aqui o tipo de moeda né já tá real aqui já tá o tipo de pontuação da moeda aqui do nosso país já tá correto vou clicar em salvar alterações se no seu tiver diferente você muda tá aí aqui em produtos também ó aqui tem algumas coisas por exemplo se você quiser que assim que a pessoa clique para adicionar o produto no

carrinho ela seja redirecionada lá pra página de carrinho eu vou deixar aqui não que a pessoa continua comprando no site né se você quiser que as pessoas consigam avaliar o produto aí você deixa aqui aqui a unidade de peso e de medida Ou se você quiser mudar de repente você tem um produto diferente se quiser mudar as unidades de medida São através daqui tá E aí o restante só esse daqui que a gente já viu e o restante não vai ser nesse vídeo ah tá aqui nos e-mails ó esses são os e-mails que chega pro

cliente aí tem o e-mail de cada coisa novo pedido pedido cancelado eí se você quiser editar você pode clicar em gerenciar que aí vai abrir aqui ó o e-mail pra qual a pessoa vai responder Se for responder tá bom E aí ó esse daqui é o assunto a ele já pega tudo Tá vendo que tem umas azinhas site novo pedido e Ordem ele já pega tudo automático aí se você não quiser que os e-mails sejam enviados você desativa por aqui mas é importante chegar né pra pessoa comprar e ficar certinho aí todos eles você consegue

vir e gerenciar né Ó o detalhes do pedido aí todos vão vão ter a mesma coisa vão pegar aqui já automático E aí se você quiser colocar mais informação ou mais texto aqui você coloca só não pode apagar essas Chaves que tem tá vendo que eles puxam automaticamente Ou se você quiser por exemplo ó que nem aqui por exemplo tá falando que chega em inglês ó detalhes for Order né detalhes do pedido se você quiser por exemplo escrever como está aqui coloca as chaves escreve alguma outra frase para ser no assunto no cabeçalho e tudo

mais você pode ir escrevendo ok uma outra coisinha pra gente corrigir ó aqui na página do produto tá vendo que quando rola a tela ele tá ficando em cima do menu Então a gente vai vir aqui passar o mouse aqui em cima de elementor clicar em modelo de produto individual né vamos corrigir ó vamos vir aqui vamos deixar já aqui enrolada a tela para baixo pra gente conseguir enxergar aí vamos vir em avançado efeitos de movimento aí aqui em deslocamento a gente vai aumentar tá vendo ó Aumenta até ele ficar embaixo do menu então que

o nosso deslocamento ele vai ser aqui no meu caso mais ou menos uns 90 né E vamos clicar aqui em atualizar aí vamos testar aqui pra gente ver ó OK OK aí agora certinho Ele fica aqui abaixo do menu né E já finaliza aqui beleza o passo seis que eu deixei aqui são sugestões para você sugestões de coisas que você pode fazer no seu site para melhor funcionamento da sua loja então um configurar o se seo são configurações que a gente faz no site para ele ser encontrado no Google mais rápido otimizar são configurações que

a gente faz pra loja carregar rápido se sua loja tiver carregando devagar as pessoas não compram elas desistem Antes de abrir e vão embora então é importante otimizar o site lgpd que é a lei geral de proteção de dados que é obrigatório ter no site tem um vídeo aqui no canal só sobre isso ó tá vendo quando você entra no site aparece esse aviso de cooks é a lgpd e eu ensinei isso aqui no canal também cadastrar asas ferramentas do Google como analytic search console né tudo tem aqui no canal também tem a Playlist de

design que eu te ensino a fazer banner Artes então se você quiser modificar tem como também playlist de marketing que eu te ensino a cadastrar Pixel Pixel do Facebook Pixel do Google playlist de segurança que eu te ensin a configurar um plugin de segurança pro seu site ficar mais seguro e ter menos risco de ser invadido como fazer backup não isso aqui é importantíssimo muito importante principalmente pra loja porque você tem que saber fazer backup e se possível fazer todo dia ou toda semana pelo menos porque se acontecer alguma coisa você não perde o seu

site tem que começar do zero se acontecer alguma coisa seu site for hackeado invadido qualquer coisa acontecer você tem o arquivo ali do backup e você sobe o site de novo pra pra hospedagem não precisa criar de novo então é importante você saber fazer backup tá e tem vídeo aqui no canal e tem uma playlist completa de WooCommerce ecommerce é a ferramenta de loja né do WordPress e lá tem várias outras coisas menuzinho para mobile diferente e Order Bump várias coisas tá bem legais dá para você acessar lá e ver se você acha que vale

a pena colocar alguma coisa a mais na sua loja tá bom E lembrando que se você quiser comprar o template dessa lógica e você não precisa criar passo a passo né só upar lá no seu site e editando que nem vem aqui troca a cor Troca os produtos e tudo mais tem para vender aqui no meu site também então você vem em templates.descomplicandosites.com.br ou então aqui no meu site mesmo descomplicandosites.com.br tem a abinha de templates que te leva direto aqui pra loja tá E vai ter essa loja disponível pra venda também. Então é isso Pessoal,

espero muito que vocês tenham gostado. Se você curtiu deixa um like no vídeo, se inscreve no canal, me segue nas redes, um abraço, até a próxima, tchau.